[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-follow-up-replies-websocket-chat-all--*":3,"academy-blog-translations-v7izy1ofhc0a975":99},{"data":4,"page":87,"perPage":87,"totalItems":87,"totalPages":87},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":93,"keywords":94,"locale":69,"published_at":95,"scheduled_at":13,"school_blog":91,"short_description":96,"slug":97,"status":89,"title":6,"updated":98,"updated_by":13,"views":92},"EP.53 การเพิ่มฟีเจอร์การติดตามข้อความที่ถูกตอบกลับใน WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>ฟีเจอร์การติดตามข้อความที่ถูกตอบกลับใน WebSocket Chat จะช่วยให้ผู้ใช้สามารถติดตามคำตอบของข้อความที่ถูกตอบกลับได้อย่างสะดวก ซึ่งจะทำให้การสนทนาในห้องแชทมีความต่อเนื่องและเป็นระเบียบมากยิ่งขึ้น\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>ทำไมต้องมีฟีเจอร์การติดตามข้อความที่ถูกตอบกลับ?\u003C\u002Fh2>\u003Cp data-start=\"133\" data-end=\"524\">ฟีเจอร์การติดตามข้อความที่ถูกตอบกลับมีความสำคัญใน WebSocket Chat เพราะช่วยให้ผู้ใช้สามารถติดตามคำตอบหรือการตอบกลับของข้อความที่ตนเองส่งไปแล้วได้อย่างสะดวก โดยไม่ต้องค้นหาหรือเสียเวลาผ่านข้อความเก่าที่ถูกตอบกลับมา ฟีเจอร์นี้ทำให้การสนทนามีความเป็นระเบียบและเชื่อมโยงกันมากยิ่งขึ้น นอกจากนี้ยังช่วยให้ผู้ใช้สามารถมองเห็นการตอบกลับในลำดับที่ถูกต้องและไม่พลาดข้อความสำคัญที่เกี่ยวข้องกับการสนทนา\u003C\u002Fp>\u003Cp data-start=\"526\" data-end=\"707\">การที่ผู้ใช้สามารถเห็นข้อความที่ตอบกลับมาได้ชัดเจนจะช่วยให้การสื่อสารในแอปพลิเคชันมีความลื่นไหลและไม่สับสน การติดตามคำตอบเหล่านี้ทำให้ผู้ใช้สามารถตัดสินใจหรือตอบกลับได้ตรงจุดมากขึ้น\u003C\u002Fp>\u003Cp data-start=\"526\" data-end=\"707\"> \u003C\u002Fp>\u003Ch2>การเพิ่มฟีเจอร์การติดตามข้อความที่ถูกตอบกลับใน WebSocket Server\u003C\u002Fh2>\u003Cp data-start=\"778\" data-end=\"1057\">การอัปเดต WebSocket Server จะทำให้เราสามารถรองรับฟีเจอร์การติดตามการตอบกลับข้อความได้ โดยเราจะเพิ่มฟังก์ชันที่จะทำการเชื่อมโยงข้อความที่ตอบกลับกับข้อความต้นฉบับผ่านการใช้ \u003Ccode data-start=\"953\" data-end=\"975\">follow_up_message_id\u003C\u002Fcode> ในฐานข้อมูล ซึ่งจะช่วยให้การตอบกลับของข้อความนั้นๆ สามารถติดตามได้ในทุกๆ การสนทนา\u003C\u002Fp>\u003Cp data-start=\"1059\" data-end=\"1280\">ด้วยฟีเจอร์นี้ เมื่อผู้ใช้ทำการตอบกลับข้อความใดๆ ข้อความที่ตอบกลับจะถูกจัดเก็บในฐานข้อมูลพร้อมกับการอ้างอิงถึงข้อความต้นฉบับที่ถูกตอบกลับ และระบบจะส่งข้อความการตอบกลับไปยังผู้ใช้อื่นๆ ที่เชื่อมต่ออยู่ในห้องแชทแบบเรียลไทม์\u003C\u002Fp>\u003Cp data-start=\"1059\" data-end=\"1280\"> \u003C\u002Fp>\u003Ch2>การสร้าง UI ให้ผู้ใช้สามารถติดตามคำตอบของข้อความที่ตอบกลับ\u003C\u002Fh2>\u003Cp data-start=\"1346\" data-end=\"1612\">เพื่อให้การติดตามคำตอบของข้อความที่ตอบกลับมีความสะดวกมากขึ้น เราจะเพิ่มปุ่ม \u003Cstrong data-start=\"1422\" data-end=\"1437\">\"Follow-up\"\u003C\u002Fstrong> ใน UI ของแอปพลิเคชัน โดยเมื่อผู้ใช้คลิกที่ปุ่มนี้ ระบบจะให้ผู้ใช้สามารถเห็นข้อความต้นฉบับที่ถูกตอบกลับ และแสดงคำตอบในที่เดียวกัน ซึ่งจะช่วยให้การติดตามการตอบกลับทำได้ง่ายขึ้น\u003C\u002Fp>\u003Cp data-start=\"1614\" data-end=\"1873\">นอกจากนี้ การแสดงผลข้อความตอบกลับใน UI จะทำให้ผู้ใช้เห็นความเชื่อมโยงระหว่างข้อความที่ตอบกลับกับข้อความต้นฉบับ เช่น แสดงข้อความที่ตอบกลับไว้ใต้ข้อความต้นฉบับ พร้อมด้วยป้ายชื่อว่า \"Replied to\" หรือ \"Follow-up\" เพื่อให้ผู้ใช้เข้าใจว่าเป็นการตอบกลับจากข้อความไหน\u003C\u002Fp>\u003Cp data-start=\"1614\" data-end=\"1873\"> \u003C\u002Fp>\u003Ch2>การทดสอบฟีเจอร์การติดตามข้อความที่ถูกตอบกลับ\u003C\u002Fh2>\u003Cp data-start=\"1925\" data-end=\"2094\">หลังจากที่เราเพิ่มฟีเจอร์นี้เสร็จสิ้นแล้ว การทดสอบจะเป็นสิ่งสำคัญในการตรวจสอบว่าฟีเจอร์ทำงานได้อย่างถูกต้อง โดยการทดสอบจะทำในลักษณะการติดตามข้อความที่ตอบกลับแบบเรียลไทม์\u003C\u002Fp>\u003Col data-start=\"2096\" data-end=\"2305\">\u003Cli data-start=\"2096\" data-end=\"2142\">\u003Cp data-start=\"2099\" data-end=\"2142\">ทดสอบการส่งข้อความและการตอบกลับภายในห้องแชท\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"2143\" data-end=\"2223\">\u003Cp data-start=\"2146\" data-end=\"2223\">ตรวจสอบว่าเมื่อผู้ใช้ตอบกลับข้อความ ระบบจะแสดงข้อความตอบกลับในลำดับที่ถูกต้อง\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"2224\" data-end=\"2305\">\u003Cp data-start=\"2227\" data-end=\"2305\">ทดสอบการอัปเดต UI ให้แสดงข้อความตอบกลับแบบถูกต้องและเชื่อมโยงกับข้อความต้นฉบับ\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Cp data-start=\"2307\" data-end=\"2463\">การทดสอบเหล่านี้จะช่วยให้แน่ใจว่าฟีเจอร์ \u003Cstrong data-start=\"2348\" data-end=\"2372\">Follow-up on Replies\u003C\u002Fstrong> ทำงานได้ถูกต้อง และผู้ใช้สามารถติดตามคำตอบได้อย่างสะดวกโดยไม่พลาดข้อความสำคัญในแอปพลิเคชัน\u003C\u002Fp>\u003Cp data-start=\"2307\" data-end=\"2463\"> \u003C\u002Fp>\u003Ch2>\u003Cstrong>ตัวอย่างโค้ดสำหรับการติดตามข้อความที่ถูกตอบกลับใน WebSocket Chat\u003C\u002Fstrong>\u003C\u002Fh2>\u003Col>\u003Cli>\u003Ch3>\u003Cstrong>การอัปเดตฐานข้อมูล (Database)\u003C\u002Fstrong>\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>อัปเดตฐานข้อมูลเพื่อรองรับการติดตามข้อความที่ตอบกลับ โดยเพิ่มคอลัมน์ \u003Ccode inline=\"\">follow_up_message_id\u003C\u002Fcode> เพื่อเชื่อมโยงข้อความที่ตอบกลับกับข้อความต้นฉบับ\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-sql\">ALTER TABLE chat_messages ADD COLUMN follow_up_message_id INT REFERENCES chat_messages(id);\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Col start=\"2\">\u003Cli>\u003Ch3>\u003Cstrong>โค้ดใน WebSocket Server (Backend)\u003C\u002Fstrong>\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>เพิ่มโค้ดใน WebSocket Server เพื่อให้สามารถติดตามการตอบกลับข้อความและส่งผลลัพธ์ให้กับผู้ใช้ทุกคนในห้องแชท\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport (\n    \"database\u002Fsql\"\n    \"encoding\u002Fjson\"\n    \"fmt\"\n    \"net\u002Fhttp\"\n    \"sync\"\n\n    \"github.com\u002Fgorilla\u002Fwebsocket\"\n    _ \"github.com\u002Flib\u002Fpq\"\n)\n\ntype FollowUpRequest struct {\n    MessageID   int    `json:\"messageID\"`\n    Sender      string `json:\"sender\"`\n    NewContent  string `json:\"newContent\"`\n    FollowUpID  int    `json:\"followUpID\"`\n}\n\ntype FollowUpResponse struct {\n    MessageID   int    `json:\"messageID\"`\n    NewContent  string `json:\"newContent\"`\n    Sender      string `json:\"sender\"`\n    FollowUpID  int    `json:\"followUpID\"`\n}\n\nvar (\n    clients   = make(map[*websocket.Conn]bool)\n    broadcast = make(chan FollowUpResponse)\n    mu        sync.Mutex\n    db        *sql.DB\n)\n\nfunc handleFollowUpMessage(w http.ResponseWriter, r *http.Request) {\n    conn, _ := upgrader.Upgrade(w, r, nil)\n    defer conn.Close()\n    clients[conn] = true\n\n    for {\n        var request FollowUpRequest\n        err := conn.ReadJSON(&request)\n        if err != nil {\n            delete(clients, conn)\n            break\n        }\n\n        \u002F\u002F Save the follow-up message into the database\n        _, err = db.Exec(\"INSERT INTO chat_messages (content, sender, follow_up_message_id) VALUES ($1, $2, $3)\", request.NewContent, request.Sender, request.FollowUpID)\n        if err == nil {\n            broadcast <- FollowUpResponse{MessageID: request.MessageID, NewContent: request.NewContent, Sender: request.Sender, FollowUpID: request.FollowUpID}\n        }\n    }\n}\n\nfunc notifyClients() {\n    for {\n        msg := <-broadcast\n        for client := range clients {\n            err := client.WriteJSON(msg)\n            if err != nil {\n                client.Close()\n                delete(clients, client)\n            }\n        }\n    }\n}\n\nfunc main() {\n    http.HandleFunc(\"\u002Fws\", handleFollowUpMessage)\n    go notifyClients()\n    fmt.Println(\"WebSocket Server Running on Port 8080\")\n    http.ListenAndServe(\":8080\", nil)\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Col start=\"3\">\u003Cli>\u003Ch3>\u003Cstrong>โค้ดใน Frontend (Client)\u003C\u002Fstrong>\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>เพิ่มปุ่ม \"Follow-up\" เพื่อให้ผู้ใช้สามารถติดตามคำตอบของข้อความที่ตอบกลับได้\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">const socket = new WebSocket(\"ws:\u002F\u002Flocalhost:8080\u002Fws\");\nconst chatContainer = document.getElementById(\"chat-container\");\n\nsocket.onmessage = (event) => {\n    const data = JSON.parse(event.data);\n    const messageElement = document.getElementById(`msg-${data.messageID}`);\n    if (data.followUpID) {\n        messageElement.innerHTML = `${data.sender} replied: ${data.newContent}`;\n    }\n};\n\nfunction sendFollowUpRequest(messageID, newContent, followUpID) {\n    socket.send(JSON.stringify({ messageID, sender: \"JohnDoe\", newContent, followUpID }));\n}\n\nfunction displayMessage(id, sender, content) {\n    const msgElement = document.createElement(\"p\");\n    msgElement.id = `msg-${id}`;\n    msgElement.innerText = `${sender}: ${content}`;\n    \n    const followUpButton = document.createElement(\"button\");\n    followUpButton.innerText = \"Follow-up\";\n    followUpButton.onclick = () => {\n        const newContent = prompt(\"Follow up on this message:\", content);\n        if (newContent) sendFollowUpRequest(id, newContent, id);\n    };\n    \n    msgElement.appendChild(followUpButton);\n    chatContainer.appendChild(msgElement);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3 data-start=\"225\" data-end=\"243\">\u003Cstrong data-start=\"229\" data-end=\"243\">ท้าให้ลอง!\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp data-start=\"244\" data-end=\"398\">ลองเพิ่มฟีเจอร์ \u003Cstrong data-start=\"260\" data-end=\"291\">การแสดงข้อความที่ถูกตอบกลับ\u003C\u002Fstrong> (Show Replied Message) เพื่อให้ผู้ใช้สามารถเห็นข้อความต้นฉบับที่ถูกตอบกลับเมื่อแสดงผลลัพธ์การตอบกลับใน UI!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>EP ถัดไป:\u003C\u002Fstrong>\u003Cbr>ใน EP ถัดไป เราจะมาดู \u003Cstrong>การเพิ่มฟีเจอร์การปักหมุดข้อความสำคัญ (Pin Messages)\u003C\u002Fstrong> เพื่อให้ผู้ใช้สามารถปักหมุดข้อความที่สำคัญไว้ในห้องแชท!\u003C\u002Fp>","77_11zon_fxhz6qc7cr.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fcw4mwf7mipx8gav\u002F77_11zon_fxhz6qc7cr.webp","2026-03-04 08:48:50.352Z","",{"keywords":15,"locale":63,"school_blog":73},[16,23,28,33,38,43,48,53,58],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:48:46.903Z","wqd5lairiftowzr","Frontend","2026-04-10 16:13:54.137Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:44:53.062Z","puutdnxuitnxxgq","Backend","2026-04-10 16:12:51.264Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:48:41.296Z","yp5nm5cxdv83ffw","โปรแกรมมิ่ง","2026-04-10 16:13:52.263Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:48:37.396Z","7rautg2afwgj00c","ฟีเจอร์ WebSocket","2026-04-10 16:13:51.129Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:48:37.086Z","lyvc6m6wy8i75nq","การพัฒนาแอปพลิเคชันแชท","2026-04-10 16:13:51.062Z",{"collectionId":17,"collectionName":18,"created":49,"created_by":13,"id":50,"name":51,"updated":52,"updated_by":13},"2026-03-04 08:48:48.976Z","jrkqay47xhwgh9j","Follow-up on Replies","2026-04-10 16:13:54.674Z",{"collectionId":17,"collectionName":18,"created":54,"created_by":13,"id":55,"name":56,"updated":57,"updated_by":13},"2026-03-04 08:46:14.782Z","v0mhensk18fofru","WebSocket Chat","2026-04-10 16:13:10.563Z",{"collectionId":17,"collectionName":18,"created":59,"created_by":13,"id":60,"name":61,"updated":62,"updated_by":13},"2026-03-04 08:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"code":64,"collectionId":65,"collectionName":66,"created":67,"flag":68,"id":69,"is_default":70,"label":71,"updated":72},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":74,"collectionId":75,"collectionName":76,"expand":77,"id":91,"views":92},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":78},{"blogIds":79,"collectionId":80,"collectionName":81,"created":82,"created_by":13,"id":74,"image":83,"image_alt":13,"image_path":84,"label":85,"name":86,"priority":87,"publish_at":88,"scheduled_at":13,"status":89,"updated":90,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:33:53.210Z","59ty92ns80w_15oc1implw.png","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fwqxt7ag2gn7xcmk\u002F59ty92ns80w_15oc1implw.png",{"en":86,"th":86},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","v7izy1ofhc0a975",259,"cw4mwf7mipx8gav",[20,25,30,35,40,45,50,55,60],"2025-06-19 02:36:22.283Z","เรียนรู้วิธีเพิ่มฟีเจอร์การติดตามข้อความที่ถูกตอบกลับ (Follow-up on Replies) ใน WebSocket Chat เพื่อให้ผู้ใช้สามารถติดตามคำตอบของข้อความที่ตอบกลับได้ง่ายขึ้นและทำให้การสนทนาในห้องแชทมีความเป็นระเบียบและมีประสิทธิภาพมากยิ่งขึ้น","follow-up-replies-websocket-chat","2026-04-22 07:10:15.743Z",{"th":97}]