Interface de chat de texte personnalisé

Cet exemple montre comment utiliser la classe TextChatService pour concevoir votre propre frontend.Il réutilise les canaux de texte par défaut de CreateDefaultTextChannels et est très simple par rapport à l'interface utilisateur par défaut.

1. Désactivez l'interface utilisateur par défaut qui accompagne le TextChatService en définissant les propriétés ChatWindowConfiguration.Enabled et ChatInputBarConfiguration.Enabled à false dans la fenêtre Propriétés de Studio.

2. Créer une barre de saisie de chat de remplacement. C'est la boîte de texte qui émet des messages lorsque l'utilisateur appuie sur Enter .

   1. Créez un ScreenGui et parentez-le à StarterGui .

   2. Créez un TextBox et parentez-le au nouveau ScreenGui, puis répositionnez-le et redimensionnez-le comme souhaité.

   3. Créez un LocalScript et parentez-le au nouveau TextBox.

   4. Ajoutez le code suivant à la LocalScript :

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral est le chat (chat privé)public par défaut
      local RBXGeneral = TextChatService:FindFirstChild("TextChannels"):WaitForChild("RBXGeneral")
      
      local textBox = script.Parent
      textBox.FocusLost:Connect(function(enterPressed)
      	local text = textBox.Text
      	if enterPressed and #text > 0 then
      		local success, response = pcall(function()
      			return RBXGeneral:SendAsync(textBox.Text)
      		end)
      
      		if not success then
      			RBXGeneral:DisplaySystemMessage("Failed to send message")
      		end
      
      		-- Les utilisateurs s'attendent à ce que la boîte d'entrée soit vidée après avoir envoyé un message
      		textBox.Text = ""
      	end
      end)

3. Créer une réplique de la fenêtre de chat.C'est le ScrollingFrame qui affiche les messages tels qu'ils sont reçus de TextChatService.MessageReceived.Cette étape crée également un UIListLayout pour mettre en forme automatiquement les messages.

   1. Créez un autre nouveau ScreenGui et parentez-le à StarterGui .

   2. Créez un ScrollingFrame et parentez-le au ScreenGui , puis répositionnez-le et redimensionnez-le comme souhaité.

   3. Créez un UIListLayout et parentez-le au ScrollingFrame.

   4. Créez un LocalScript et parentez-le au ScrollingFrame.

   5. Ajoutez le code suivant à la LocalScript :

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Fonction de création d'une nouvelle étiquette de texte pour chaque message reçu
      local function addMessageGui(textChatMessage: TextChatMessage)
      	local isOutgoingMessage = textChatMessage.Status == Enum.TextChatMessageStatus.Sending
      
      	local parent = script.Parent
      
      	local originalLabel = parent:FindFirstChild(textChatMessage.MessageId)
      	if originalLabel then
      		originalLabel.Text = textChatMessage.Text
      		originalLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      	else
      		local textLabel = Instance.new("TextLabel")
      		textLabel.BorderSizePixel = 0
      		textLabel.Font = Enum.Font.BuilderSans
      		textLabel.TextSize = 18
      		textLabel.TextXAlignment = Enum.TextXAlignment.Left
      		textLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      		textLabel.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
      		textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
      		textLabel.Name = textChatMessage.MessageId
      		textLabel.AutomaticSize = Enum.AutomaticSize.XY
      		textLabel.Text = textChatMessage.Text
      		textLabel.Parent = parent
      	end
      end
      
      -- Commencez à écouter les messages entrants
      TextChatService.MessageReceived:Connect(addMessageGui)

      Lors de l'utilisation de l'événement TextChatService.MessageReceived, il est important de vérifier si le message existe déjà dans la fenêtre de chat.Cet événement est appelé une fois lors de l'envoi et une fois lorsque le message est reçu du serveur.

4. Testez votre expérience en envoyant des messages dans la barre de saisie de chat.Vous devriez voir les messages apparaître dans la fenêtre de chat.Vous pouvez ensuite étendre cet exemple en ajoutant des fonctionnalités telles que la mise au point du TextBox lorsqu'une touche est pressée ou en ajoutant des balises de chat .