[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-chat-history-websocket-all--*":3,"academy-blog-translations-50e85mmgv40xlhv":104},{"data":4,"page":92,"perPage":92,"totalItems":92,"totalPages":92},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":98,"keywords":99,"locale":74,"published_at":100,"scheduled_at":13,"school_blog":96,"short_description":101,"slug":102,"status":94,"title":6,"updated":103,"updated_by":13,"views":97},"EP.56 การเพิ่มฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>ฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Chat ช่วยให้ผู้ใช้สามารถเข้าถึงประวัติการสนทนาได้หลังจากการแชทเสร็จสิ้น ซึ่งมีประโยชน์ในการตรวจสอบข้อมูลที่ถูกพูดถึงหรือใช้สำหรับการสืบค้นข้อมูลที่สำคัญในภายหลัง\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>ทำไมต้องมีฟีเจอร์การบันทึกประวัติการสนทนา?\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>การบันทึกประวัติการสนทนาช่วยให้ผู้ใช้สามารถเก็บข้อมูลการสนทนาที่สำคัญเพื่ออ้างอิงในภายหลัง โดยไม่ต้องกังวลว่าข้อความจะหายไปเมื่อห้องแชทหรือการสนทนาจบลง ฟีเจอร์นี้ช่วยให้ข้อมูลที่ถูกพูดถึงหรือข้อมูลที่สำคัญถูกเก็บรักษาอย่างถาวรในฐานข้อมูล\u003C\u002Fp>\u003Ch3>\u003Cstrong>ข้อดีของการบันทึกประวัติการสนทนา:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>เก็บข้อมูลที่สำคัญ\u003C\u002Fstrong>: ฟีเจอร์นี้ช่วยให้ข้อมูลการสนทนาที่สำคัญสามารถเก็บไว้ได้และค้นหาได้ง่าย\u003C\u002Fli>\u003Cli>\u003Cstrong>ช่วยให้สามารถตรวจสอบหรือย้อนกลับไปดูข้อมูลในอนาคต\u003C\u002Fstrong>: หากผู้ใช้ต้องการย้อนกลับไปอ่านประวัติการสนทนา ก็สามารถทำได้ง่าย\u003C\u002Fli>\u003Cli>\u003Cstrong>ช่วยในการจัดการข้อมูล\u003C\u002Fstrong>: การเก็บบันทึกการสนทนาช่วยให้การจัดการข้อมูลในระบบเป็นระเบียบและมีประสิทธิภาพมากขึ้น\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>โครงสร้างของฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Chat\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>การบันทึกประวัติการสนทนาใน WebSocket Chat จำเป็นต้องใช้โครงสร้างที่สามารถเก็บข้อมูลทั้งหมดของการสนทนาในฐานข้อมูล และสามารถดึงข้อมูลนี้มาแสดงให้ผู้ใช้ในภายหลังได้\u003C\u002Fp>\u003Ch3>\u003Cstrong>ส่วนประกอบหลักของระบบการบันทึกประวัติการสนทนา:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>การเก็บข้อมูลในฐานข้อมูล\u003C\u002Fstrong>: ข้อความที่ถูกส่งในห้องแชทจะถูกเก็บในฐานข้อมูลเพื่อให้สามารถเรียกดูได้ในภายหลัง\u003C\u002Fli>\u003Cli>\u003Cstrong>การจัดการข้อมูลด้วยการดึงข้อมูล (Querying)\u003C\u002Fstrong>: เราจะต้องสามารถดึงข้อมูลการสนทนาจากฐานข้อมูลโดยการใช้งาน SQL Queries หรือ ORM (Object-Relational Mapping)\u003C\u002Fli>\u003Cli>\u003Cstrong>การแสดงข้อมูลใน UI\u003C\u002Fstrong>: ข้อมูลการสนทนาจะถูกแสดงใน UI ของแอปพลิเคชันเพื่อให้ผู้ใช้สามารถดูประวัติการสนทนาได้\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>วิธีการเพิ่มฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Server\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>การอัปเดต WebSocket Server เพื่อรองรับฟีเจอร์การบันทึกประวัติการสนทนาและบันทึกข้อความทุกข้อความที่ถูกส่งไปในห้องแชท\u003C\u002Fp>\u003Ch3>\u003Cstrong>ขั้นตอนที่ต้องทำ:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>การอัปเดต WebSocket Server เพื่อรองรับการบันทึกประวัติการสนทนา\u003C\u002Fstrong>: เซิร์ฟเวอร์จะต้องสามารถบันทึกข้อความที่ส่งจากผู้ใช้และจัดเก็บลงในฐานข้อมูล\u003C\u002Fli>\u003Cli>\u003Cstrong>การอัปเดตฐานข้อมูล\u003C\u002Fstrong>: เราจะเพิ่มตารางสำหรับเก็บข้อความทั้งหมดที่ถูกส่งในห้องแชท โดยเก็บข้อมูลต่างๆ เช่น ผู้ส่งข้อความ, เนื้อหาข้อความ, เวลา และสถานะการส่งข้อความ\u003C\u002Fli>\u003Cli>\u003Cstrong>การส่งข้อมูลการบันทึกไปยังผู้ใช้\u003C\u002Fstrong>: เมื่อมีการบันทึกข้อความใหม่ในห้องแชท ระบบจะต้องแจ้งให้ผู้ใช้ที่เชื่อมต่อได้ทราบ\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>การสร้าง UI ให้ผู้ใช้สามารถดูประวัติการสนทนา\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>เพื่อให้ผู้ใช้สามารถเข้าถึงประวัติการสนทนาได้อย่างสะดวก เราจะเพิ่มฟีเจอร์ในการดึงข้อมูลประวัติการสนทนาใน UI ของแอปพลิเคชัน\u003C\u002Fp>\u003Ch3>\u003Cstrong>ส่วนประกอบของ UI:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>การแสดงปุ่ม \"ดูประวัติ\" หรือ \"History\"\u003C\u002Fstrong>: ในห้องแชทจะมีปุ่มให้ผู้ใช้คลิกเพื่อดูประวัติการสนทนาก่อนหน้า\u003C\u002Fli>\u003Cli>\u003Cstrong>แสดงข้อความใน UI\u003C\u002Fstrong>: ข้อความที่ถูกบันทึกไว้ในฐานข้อมูลจะถูกดึงขึ้นมาแสดงใน UI และเรียงลำดับตามเวลา\u003C\u002Fli>\u003Cli>\u003Cstrong>การกรองข้อมูล\u003C\u002Fstrong>: ผู้ใช้สามารถกรองประวัติการสนทนาได้ตามประเภทของข้อความหรือช่วงเวลาที่ต้องการ\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>การทดสอบฟีเจอร์การบันทึกประวัติการสนทนา\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>หลังจากการพัฒนาและเพิ่มฟีเจอร์การบันทึกประวัติการสนทนาแล้ว การทดสอบเป็นสิ่งสำคัญที่จะช่วยให้มั่นใจว่า ฟีเจอร์ทำงานได้ถูกต้อง\u003C\u002Fp>\u003Ch3>\u003Cstrong>การทดสอบที่ควรทำ:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>ทดสอบการบันทึกข้อความ\u003C\u002Fstrong>: ทดสอบว่าเมื่อผู้ใช้ส่งข้อความ ข้อความนั้นจะถูกบันทึกในฐานข้อมูลหรือไม่\u003C\u002Fli>\u003Cli>\u003Cstrong>ทดสอบการแสดงผลประวัติการสนทนา\u003C\u002Fstrong>: ตรวจสอบว่า UI จะแสดงประวัติการสนทนาได้ถูกต้องและเรียงลำดับตามเวลา\u003C\u002Fli>\u003Cli>\u003Cstrong>การทดสอบการกรองข้อมูล\u003C\u002Fstrong>: ทดสอบว่าเมื่อผู้ใช้กรองข้อมูล ข้อมูลที่แสดงใน UI จะถูกกรองได้อย่างถูกต้อง\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \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=\"\">chat_history\u003C\u002Fcode> ในฐานข้อมูลเพื่อเก็บประวัติการสนทนา\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-sql\">CREATE TABLE chat_history (\n    id SERIAL PRIMARY KEY,\n    sender VARCHAR(255),\n    content TEXT,\n    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\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 ChatMessage struct {\n    Sender  string `json:\"sender\"`\n    Content string `json:\"content\"`\n}\n\nvar (\n    clients   = make(map[*websocket.Conn]bool)\n    broadcast = make(chan ChatMessage)\n    mu        sync.Mutex\n    db        *sql.DB\n)\n\nfunc handleChat(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 message ChatMessage\n        err := conn.ReadJSON(&message)\n        if err != nil {\n            delete(clients, conn)\n            break\n        }\n\n        \u002F\u002F บันทึกข้อความลงในฐานข้อมูล\n        _, err = db.Exec(\"INSERT INTO chat_history (sender, content) VALUES ($1, $2)\", message.Sender, message.Content)\n        if err == nil {\n            broadcast <- message\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\", handleChat)\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>เพิ่มฟีเจอร์ในการแสดงประวัติการสนทนาใน UI\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.createElement(\"p\");\n    messageElement.innerText = `${data.sender}: ${data.content}`;\n    chatContainer.appendChild(messageElement);\n};\n\nfunction displayHistory() {\n    fetch('\u002Fhistory')\n        .then(response => response.json())\n        .then(messages => {\n            messages.forEach(msg => {\n                const messageElement = document.createElement(\"p\");\n                messageElement.innerText = `${msg.sender}: ${msg.content}`;\n                chatContainer.appendChild(messageElement);\n            });\n        });\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>\u003Cstrong>ท้าให้ลอง!\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp>ลองเพิ่มฟีเจอร์ \u003Cstrong>การกรองประวัติการสนทนา\u003C\u002Fstrong> เพื่อให้ผู้ใช้สามารถค้นหาข้อความสำคัญในประวัติการสนทนาได้อย่างรวดเร็ว!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>EP ถัดไป:\u003C\u002Fstrong>\u003Cbr>ใน EP ถัดไป เราจะมาดู \u003Cstrong>การเพิ่มฟีเจอร์การควบคุมการเข้าถึงห้องแชท (Access Control)\u003C\u002Fstrong> เพื่อให้ผู้ดูแลสามารถควบคุมการเข้าถึงห้องแชทได้!\u003C\u002Fp>","83_11zon_griu6h9g9y.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fjikh2olx219vzu0\u002F83_11zon_griu6h9g9y.webp","2026-03-04 08:48:42.139Z","",{"keywords":15,"locale":68,"school_blog":78},[16,23,28,33,38,43,48,53,58,63],{"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:41.296Z","yp5nm5cxdv83ffw","โปรแกรมมิ่ง","2026-04-10 16:13:52.263Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:44:48.724Z","s6xhnfomy7n5ycp","WebSocket Server","2026-04-10 16:12:50.171Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:48:40.623Z","8jqwrmnr2t6ww6n","message storage","2026-04-10 16:13:52.170Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:45:13.969Z","pyniezbvfdbyuyc","real-time notifications","2026-04-10 16:12:56.096Z",{"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:37.396Z","7rautg2afwgj00c","ฟีเจอร์ WebSocket","2026-04-10 16:13:51.129Z",{"collectionId":17,"collectionName":18,"created":54,"created_by":13,"id":55,"name":56,"updated":57,"updated_by":13},"2026-03-04 08:48:40.444Z","m4s1ps57epl88o3","real-time chat history","2026-04-10 16:13:52.083Z",{"collectionId":17,"collectionName":18,"created":59,"created_by":13,"id":60,"name":61,"updated":62,"updated_by":13},"2026-03-04 08:48:39.993Z","cvqrwxwzdsgoz1u","Message History","2026-04-10 16:13:52.011Z",{"collectionId":17,"collectionName":18,"created":64,"created_by":13,"id":65,"name":66,"updated":67,"updated_by":13},"2026-03-04 08:48:39.616Z","0tt9oz9nx3711ge","WebSocket chat history","2026-04-10 16:13:51.878Z",{"code":69,"collectionId":70,"collectionName":71,"created":72,"flag":73,"id":74,"is_default":75,"label":76,"updated":77},"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":79,"collectionId":80,"collectionName":81,"expand":82,"id":96,"views":97},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":83},{"blogIds":84,"collectionId":85,"collectionName":86,"created":87,"created_by":13,"id":79,"image":88,"image_alt":13,"image_path":89,"label":90,"name":91,"priority":92,"publish_at":93,"scheduled_at":13,"status":94,"updated":95,"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":91,"th":91},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","50e85mmgv40xlhv",286,"jikh2olx219vzu0",[20,25,30,35,40,45,50,55,60,65],"2025-06-26 02:14:57.075Z","เรียนรู้วิธีเพิ่มฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Chat เพื่อให้ผู้ใช้สามารถเข้าถึงประวัติการพูดคุยได้ในภายหลังและเก็บบันทึกการสนทนาสำคัญ","chat-history-websocket","2026-04-22 07:10:13.684Z",{"th":102}]