อินเทอร์เฟซการแชทข้อความที่กำหนดเอง

ตัวอย่างนี้แสดงวิธีการใช้คลาส TextChatService เพื่อออกแบบฟรอนต์เอนด์ของคุณเองมันใช้ช่องข้อความเริ่มต้นจาก CreateDefaultTextChannels และมีความเรียบง่ายมากกว่า UI เริ่มต้น

1. ปิดใช้งาน UI เริ่มต้นที่มาพร้อมกับ TextChatService โดยการตั้งค่าคุณสมบัติ ChatWindowConfiguration.Enabled และ ChatInputBarConfiguration.Enabled ให้เป็น false ในหน้าต่างคุณสมบัติของ Studio ****

2. สร้างตัวแทนสําหรับแถบการใส่ข้อความแชท นี่คือกล่องข้อความที่ออกเมื่อผู้ใช้กด Enter

   1. สร้าง ScreenGui และให้เป็นพ่อของ StarterGui

   2. สร้าง TextBox และให้เป็นพ่อของมันกับใหม่ ScreenGui จากนั้น เปลี่ยนตำแหน่ง และ ปรับขนาด ตามต้องการ

   3. สร้าง LocalScript และให้เป็นพ่อของใหม่ TextBox

   4. เพิ่มโค้ดต่อไปนี้ใน LocalScript :

      ไคลเอนต์
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral เป็นช่องสาธารณะเริ่มต้น
      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
      
      		-- ผู้ใช้คาดว่ากล่องใส่ข้อความจะถูกล้างหลังจากส่งข้อความ
      		textBox.Text = ""
      	end
      end)

3. สร้างตัวแทนสำหรับหน้าต่างแชทนี่คือ ScrollingFrame ที่แสดงข้อความตามที่ได้รับจาก TextChatService.MessageReceivedขั้นตอนนี้ยังสร้าง UIListLayout เพื่อจัดเรียงข้อความโดยอัตโนมัติ

   1. สร้างอีกใหม่ ScreenGui และให้เป็นพ่อของ StarterGui

   2. สร้าง ScrollingFrame และให้เป็นพ่อของมันกับ ScreenGui จากนั้น เปลี่ยนตำแหน่ง และ ปรับขนาด ตามต้องการ

   3. สร้าง UIListLayout และให้เป็นพ่อของ ScrollingFrame

   4. สร้าง LocalScript และให้เป็นพ่อของ ScrollingFrame

   5. เพิ่มโค้ดต่อไปนี้ใน LocalScript :

      ไคลเอนต์
      local TextChatService = game:GetService("TextChatService")
      
      -- ฟังก์ชันสร้างฉลากข้อความใหม่สำหรับแต่ละข้อความที่ได้รับ
      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
      
      -- เริ่มฟังข้อความที่เข้ามา
      TextChatService.MessageReceived:Connect(addMessageGui)

      เมื่อใช้อีเวนต์ TextChatService.MessageReceived เป็นสิ่งสำคัญที่ต้องตรวจสอบว่าข้อความมีอยู่แล้วในหน้าต่างแชทหรือไม่อีเวนต์นี้จะเรียกเมื่อส่งและเมื่อได้รับข้อความจากเซิร์ฟเวอร์แล้วหนึ่งครั้ง

4. ทดสอบประสบการณ์ของคุณโดยส่งข้อความในแถบการใส่ข้อความแชทคุณควรเห็นข้อความปรากฏในหน้าต่างแชทจากนั้นคุณสามารถขยายตัวอย่างนี้โดยเพิ่มคุณสมบัติเช่นการโฟกัส TextBox เมื่อกดปุ่มหรือเพิ่มแท็กแชท