[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-notification-for-new-pinned-messages-websocket-chat-all--*":3,"academy-blog-translations-zgjvdrp774yi358":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.55 การเพิ่มฟีเจอร์การแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่ใน WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>ฟีเจอร์การแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่ใน WebSocket Chat ช่วยให้ผู้ใช้ได้รับการแจ้งเตือนทันทีเมื่อมีข้อความสำคัญหรือประกาศใหม่ถูกปักหมุดในห้องแชท ฟีเจอร์นี้จะทำให้ผู้ใช้ไม่พลาดข้อมูลสำคัญที่ถูกปักหมุดและช่วยให้การสื่อสารในแอปพลิเคชันมีประสิทธิภาพมากยิ่งขึ้น\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>ทำไมต้องมีฟีเจอร์การแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่?\u003C\u002Fh2>\u003Cp>ฟีเจอร์การแจ้งเตือนช่วยให้ผู้ใช้สามารถรับรู้ถึงข้อความที่สำคัญในห้องแชทได้ทันทีที่มีการปักหมุดข้อความ ฟีเจอร์นี้มีความสำคัญเพราะ:\u003C\u002Fp>\u003Cul>\u003Cli>ลดโอกาสที่ผู้ใช้จะพลาดข้อความสำคัญ: เมื่อข้อความถูกปักหมุด ผู้ใช้จะได้รับการแจ้งเตือนทันทีเพื่อให้ไม่พลาดข้อมูลที่สำคัญ\u003C\u002Fli>\u003Cli>เพิ่มประสิทธิภาพในการสื่อสาร: การแจ้งเตือนทันทีเมื่อมีการปักหมุดจะช่วยให้ผู้ใช้สามารถตอบสนองต่อข้อความสำคัญได้ทันที\u003C\u002Fli>\u003Cli>การแจ้งเตือนที่เรียลไทม์: ฟีเจอร์นี้จะทำให้ผู้ใช้สามารถรับข้อมูลที่ถูกปักหมุดอย่างรวดเร็วและไม่ต้องค้นหาหรือเสียเวลาในการรอ\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>โครงสร้างการแจ้งเตือนการปักหมุดใน WebSocket Chat\u003C\u002Fh2>\u003Cp>การเพิ่มการแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่ใน WebSocket Chat จำเป็นต้องมีโครงสร้างที่รองรับการส่งการแจ้งเตือนแบบเรียลไทม์ไปยังผู้ใช้ที่เชื่อมต่อในห้องแชท\u003C\u002Fp>\u003Ch3>ส่วนประกอบของระบบการแจ้งเตือนการปักหมุด:\u003C\u002Fh3>\u003Cul>\u003Cli>การเก็บข้อมูลการแจ้งเตือนในฐานข้อมูล: เราต้องเก็บข้อมูลเกี่ยวกับการปักหมุดข้อความในฐานข้อมูล พร้อมสถานะการแจ้งเตือน\u003C\u002Fli>\u003Cli>การส่งการแจ้งเตือนให้ผู้ใช้ในห้องแชทแบบเรียลไทม์: เมื่อข้อความถูกปักหมุด, ระบบจะส่งการแจ้งเตือนไปยังผู้ใช้ทุกคนในห้องแชททันที\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>วิธีการเพิ่มฟีเจอร์การแจ้งเตือนใน WebSocket Server\u003C\u002Fh2>\u003Cp>ในการเพิ่มฟีเจอร์การแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่ เราจะต้องอัปเดตโค้ดใน WebSocket Server เพื่อรองรับการส่งการแจ้งเตือนไปยังผู้ใช้ที่เชื่อมต่ออยู่ในห้องแชท\u003C\u002Fp>\u003Ch3>ขั้นตอนที่ต้องทำ:\u003C\u002Fh3>\u003Cul>\u003Cli>การอัปเดต WebSocket Server เพื่อรองรับการส่งการแจ้งเตือน: เซิร์ฟเวอร์ต้องสามารถจัดการคำขอการปักหมุดข้อความและส่งการแจ้งเตือนให้ผู้ใช้ในห้องแชท\u003C\u002Fli>\u003Cli>การเก็บข้อมูลการแจ้งเตือนในฐานข้อมูล: เราต้องเก็บข้อมูลที่เกี่ยวข้องกับข้อความที่ปักหมุดและการแจ้งเตือนนั้นในฐานข้อมูล\u003C\u002Fli>\u003Cli>การส่งการแจ้งเตือนแบบเรียลไทม์: เมื่อข้อความถูกปักหมุด ข้อมูลจะต้องถูกส่งไปยังผู้ใช้ทุกคนในห้องแชททันที\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>การสร้าง UI สำหรับแสดงการแจ้งเตือน\u003C\u002Fh2>\u003Cp>เพื่อให้การแจ้งเตือนการปักหมุดมีความสะดวกและเด่นชัด เราจะเพิ่มการแสดงการแจ้งเตือนใน UI ของแอปพลิเคชัน โดยอาจใช้การแสดงป๊อปอัพหรือการแสดงข้อความแจ้งเตือนในมุมหน้าจอ\u003C\u002Fp>\u003Ch3>ส่วนประกอบของ UI:\u003C\u002Fh3>\u003Cul>\u003Cli>การแสดงป๊อปอัพการแจ้งเตือน: เมื่อมีข้อความปักหมุดใหม่, UI จะสามารถแสดงป๊อปอัพการแจ้งเตือนที่มุมหน้าจอ\u003C\u002Fli>\u003Cli>การแสดงข้อความแจ้งเตือนในแชท: ในห้องแชท, การแจ้งเตือนสามารถแสดงเป็นข้อความใต้ข้อความปักหมุดที่บอกว่า \"New pinned message\" หรือ \"ข้อความใหม่ปักหมุด\"\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>การทดสอบฟีเจอร์การแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่\u003C\u002Fh2>\u003Cp>หลังจากการพัฒนาและเพิ่มฟีเจอร์การแจ้งเตือนการปักหมุดแล้ว, การทดสอบจะช่วยให้มั่นใจได้ว่า ฟีเจอร์นี้ทำงานได้ถูกต้อง\u003C\u002Fp>\u003Ch3>การทดสอบที่ควรทำ:\u003C\u002Fh3>\u003Cul>\u003Cli>ทดสอบการแจ้งเตือนเมื่อข้อความถูกปักหมุด: ทดสอบว่าเมื่อข้อความถูกปักหมุด, ผู้ใช้ทุกคนที่เชื่อมต่อจะได้รับการแจ้งเตือน\u003C\u002Fli>\u003Cli>ทดสอบการแสดงผลการแจ้งเตือนใน UI: ตรวจสอบว่า UI จะแสดงการแจ้งเตือนอย่างถูกต้องและเด่นชัด\u003C\u002Fli>\u003Cli>การทดสอบเรียลไทม์: ทดสอบว่าเมื่อข้อความถูกปักหมุด, การแจ้งเตือนจะถูกส่งให้ผู้ใช้ทุกคนทันทีในห้องแชท\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>ตัวอย่างโค้ดสำหรับการแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่\u003C\u002Fh2>\u003Col>\u003Cli>\u003Ch3>การอัปเดตฐานข้อมูล (Database)\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>เพิ่มคอลัมน์ \u003Ccode inline=\"\">notification_sent\u003C\u002Fcode> เพื่อเก็บข้อมูลสถานะการส่งการแจ้งเตือน\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-sql\">ALTER TABLE chat_messages ADD COLUMN notification_sent BOOLEAN DEFAULT FALSE;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Col start=\"2\">\u003Cli>\u003Ch3>โค้ดใน WebSocket Server (Backend)\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 PinMessageRequest struct {\n    MessageID int  `json:\"messageID\"`\n    IsPinned  bool `json:\"isPinned\"`\n}\n\ntype PinMessageResponse struct {\n    MessageID int  `json:\"messageID\"`\n    IsPinned  bool `json:\"isPinned\"`\n}\n\nvar (\n    clients   = make(map[*websocket.Conn]bool)\n    broadcast = make(chan PinMessageResponse)\n    mu        sync.Mutex\n    db        *sql.DB\n)\n\nfunc handlePinMessage(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 PinMessageRequest\n        err := conn.ReadJSON(&request)\n        if err != nil {\n            delete(clients, conn)\n            break\n        }\n\n        \u002F\u002F อัปเดตสถานะการปักหมุดในฐานข้อมูลและส่งการแจ้งเตือน\n        _, err = db.Exec(\"UPDATE chat_messages SET is_pinned = $1, notification_sent = TRUE WHERE id = $2\", request.IsPinned, request.MessageID)\n        if err == nil {\n            broadcast <- PinMessageResponse{MessageID: request.MessageID, IsPinned: request.IsPinned}\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\", handlePinMessage)\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>โค้ดใน Frontend (Client)\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.getElementById(`msg-${data.messageID}`);\n    if (data.isPinned) {\n        messageElement.innerHTML = `${data.sender}: ${data.newContent} (Pinned)`;\n        alert(\"New pinned message!\");\n    }\n};\n\nfunction sendPinMessageRequest(messageID, isPinned) {\n    socket.send(JSON.stringify({ messageID, isPinned }));\n}\n\nfunction displayMessage(id, sender, content, isPinned) {\n    const msgElement = document.createElement(\"p\");\n    msgElement.id = `msg-${id}`;\n    msgElement.innerText = `${sender}: ${content}`;\n    \n    const pinButton = document.createElement(\"button\");\n    pinButton.innerText = isPinned ? \"Unpin\" : \"Pin\";\n    pinButton.onclick = () => {\n        sendPinMessageRequest(id, !isPinned);\n    };\n    \n    msgElement.appendChild(pinButton);\n    chatContainer.appendChild(msgElement);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>ท้าให้ลอง!\u003C\u002Fh3>\u003Cp>ลองเพิ่มฟีเจอร์ \u003Cstrong>การแสดงข้อความปักหมุดใหม่\u003C\u002Fstrong> ให้ชัดเจนใน UI เพื่อให้ผู้ใช้สามารถเห็นข้อความที่ถูกปักหมุดได้อย่างรวดเร็ว!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>EP ถัดไป:\u003C\u002Fstrong>\u003Cbr>ใน EP ถัดไป เราจะมาดู \u003Cstrong data-start=\"310\" data-end=\"370\">การเพิ่มฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Chat\u003C\u002Fstrong> เพื่อให้ผู้ใช้สามารถเข้าถึงประวัติการสนทนาในภายหลังได้\u003C\u002Fp>","81_11zon_yi1smxoe20.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Ftei1ws1kz2trtd5\u002F81_11zon_yi1smxoe20.webp","2026-03-04 08:48:46.920Z","",{"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:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"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":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:37.086Z","lyvc6m6wy8i75nq","การพัฒนาแอปพลิเคชันแชท","2026-04-10 16:13:51.062Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:45:13.578Z","qwq1kseajvv4cne","notification system","2026-04-10 16:12:55.954Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:48:37.396Z","7rautg2afwgj00c","ฟีเจอร์ WebSocket","2026-04-10 16:13:51.129Z",{"collectionId":17,"collectionName":18,"created":49,"created_by":13,"id":50,"name":51,"updated":52,"updated_by":13},"2026-03-04 08:48:44.667Z","dnoo2qks6za2zly","real-time chat updates","2026-04-10 16:13:53.376Z",{"collectionId":17,"collectionName":18,"created":54,"created_by":13,"id":55,"name":56,"updated":57,"updated_by":13},"2026-03-04 08:48:45.418Z","so81vnxshuuiu6h","Pinned Messages","2026-04-10 16:13:53.685Z",{"collectionId":17,"collectionName":18,"created":59,"created_by":13,"id":60,"name":61,"updated":62,"updated_by":13},"2026-03-04 08:48:44.051Z","3oixkwxs34xk3ml","WebSocket notifications","2026-04-10 16:13:53.166Z",{"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","zgjvdrp774yi358",240,"tei1ws1kz2trtd5",[20,25,30,35,40,45,50,55,60],"2025-06-23 10:41:50.840Z","เรียนรู้วิธีเพิ่มฟีเจอร์การแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่ใน WebSocket Chat เพื่อให้ผู้ใช้สามารถรับทราบทันทีเมื่อข้อความสำคัญถูกปักหมุดในห้องแชท โดยไม่พลาดข้อมูลสำคัญจากการสนทนา","notification-for-new-pinned-messages-websocket-chat","2026-04-22 07:10:14.903Z",{"th":97}]