[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-push-notification-websocket-chat-all--*":3,"academy-blog-translations-j7h3wxlxac9s4z4":94},{"data":4,"page":82,"perPage":82,"totalItems":82,"totalPages":82},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":89,"keywords":90,"locale":64,"published_at":91,"scheduled_at":13,"school_blog":86,"short_description":92,"status":84,"title":6,"updated":93,"updated_by":13,"slug":87,"views":88},"EP.58 การเพิ่มฟีเจอร์การแจ้งเตือนแบบพุช (Push Notification) ใน WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>ฟีเจอร์การแจ้งเตือนแบบพุชใน WebSocket Chat ช่วยให้ผู้ใช้ได้รับการแจ้งเตือนแบบเรียลไทม์เมื่อมีข้อความใหม่หรือการอัปเดตสำคัญในห้องแชท ฟีเจอร์นี้ช่วยเพิ่มประสิทธิภาพในการสื่อสาร โดยผู้ใช้ไม่ต้องรอตามข้อความในห้องแชทและสามารถตอบสนองได้ทันทีเมื่อล็อกอินหรือเปิดแอปพลิเคชัน\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>ทำไมต้องมีฟีเจอร์การแจ้งเตือนแบบพุช?\u003C\u002Fh2>\u003Cp>การแจ้งเตือนแบบพุชเป็นฟีเจอร์สำคัญที่ช่วยให้ผู้ใช้ไม่พลาดข้อมูลสำคัญในห้องแชท การแจ้งเตือนทันทีเมื่อมีข้อความใหม่หรือการอัปเดตจะทำให้ผู้ใช้สามารถตอบสนองได้ทันที โดยไม่ต้องเสียเวลาในการตรวจสอบด้วยตนเอง นอกจากนี้ยังช่วยในการสื่อสารอย่างรวดเร็วในห้องแชทที่มีการอัปเดตตลอดเวลา\u003C\u002Fp>\u003Ch3>ข้อดีของการแจ้งเตือนแบบพุช:\u003C\u002Fh3>\u003Cul>\u003Cli>ไม่พลาดข้อมูลสำคัญ: ผู้ใช้จะได้รับการแจ้งเตือนทันทีเมื่อมีการส่งข้อความใหม่\u003C\u002Fli>\u003Cli>เพิ่มประสิทธิภาพในการสื่อสาร: ผู้ใช้สามารถตอบกลับได้ทันทีโดยไม่ต้องรอให้ข้อความถูกเห็น\u003C\u002Fli>\u003Cli>สะดวกและรวดเร็ว: ช่วยให้ผู้ใช้ไม่ต้องคอยเปิดแอปพลิเคชันตลอดเวลา\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>โครงสร้างของระบบการแจ้งเตือนแบบพุชใน WebSocket Chat\u003C\u002Fh2>\u003Cp>การแจ้งเตือนแบบพุชจะทำงานร่วมกับ WebSocket Server โดยการส่งข้อมูลการแจ้งเตือนจากเซิร์ฟเวอร์ไปยังผู้ใช้ที่เชื่อมต่ออยู่ในห้องแชท โดยอาศัยการตั้งค่าผ่าน Push Notification API เพื่อส่งข้อความแจ้งเตือนไปยังอุปกรณ์ของผู้ใช้\u003C\u002Fp>\u003Ch3>ส่วนประกอบหลักของระบบการแจ้งเตือนแบบพุช:\u003C\u002Fh3>\u003Cul>\u003Cli>การตั้งค่าการแจ้งเตือนใน WebSocket Server: เซิร์ฟเวอร์จะรับและส่งข้อมูลการแจ้งเตือนเมื่อมีข้อความใหม่หรือการอัปเดตในห้องแชท\u003C\u002Fli>\u003Cli>การใช้ Push Notification API: ใช้บริการ Push Notification API ที่ให้บริการส่งการแจ้งเตือนไปยังอุปกรณ์ผู้ใช้\u003C\u002Fli>\u003Cli>การแสดงผลการแจ้งเตือนใน UI: ผู้ใช้สามารถเห็นการแจ้งเตือนผ่านการแสดงผลใน UI ของแอปพลิเคชัน\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>วิธีการเพิ่มฟีเจอร์การแจ้งเตือนแบบพุชใน WebSocket Server\u003C\u002Fh2>\u003Cp>การอัปเดต WebSocket Server เพื่อรองรับการส่งการแจ้งเตือนแบบพุชและการจัดการการแจ้งเตือนที่เกี่ยวข้องกับห้องแชท\u003C\u002Fp>\u003Ch3>ขั้นตอนที่ต้องทำ:\u003C\u002Fh3>\u003Cul>\u003Cli>การเชื่อมต่อ WebSocket Server กับ Push Notification API: เซิร์ฟเวอร์จะต้องเชื่อมต่อกับ Push Notification API ที่ให้บริการการส่งการแจ้งเตือน\u003C\u002Fli>\u003Cli>การส่งข้อมูลการแจ้งเตือน: เมื่อมีข้อความใหม่หรือการอัปเดตในห้องแชท เซิร์ฟเวอร์จะส่งการแจ้งเตือนไปยังผู้ใช้ที่เชื่อมต่อ\u003C\u002Fli>\u003Cli>การจัดการการแจ้งเตือน: เมื่อการแจ้งเตือนถูกส่งออกไปแล้ว ผู้ใช้จะได้รับการแจ้งเตือนทันที\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>การสร้าง UI สำหรับการแสดงการแจ้งเตือนใน WebSocket Chat\u003C\u002Fh2>\u003Cp>เพื่อให้ผู้ใช้สามารถรับการแจ้งเตือนแบบพุช เราจะเพิ่มฟังก์ชันแสดงการแจ้งเตือนใน UI ของแอปพลิเคชัน โดยแสดงการแจ้งเตือนในรูปแบบป๊อปอัพหรือในมุมมองที่สะดวก\u003C\u002Fp>\u003Ch3>ส่วนประกอบของ UI:\u003C\u002Fh3>\u003Cul>\u003Cli>การแสดงป๊อปอัพการแจ้งเตือน: เมื่อมีข้อความใหม่ ระบบจะส่งป๊อปอัพแจ้งเตือนไปยังผู้ใช้ที่เชื่อมต่อ\u003C\u002Fli>\u003Cli>การแสดงข้อความแจ้งเตือนใน UI: เมื่อการแจ้งเตือนมาถึง จะมีข้อความแสดงใน UI เพื่อให้ผู้ใช้สามารถตอบกลับได้ทันที\u003C\u002Fli>\u003Cli>การตั้งค่าให้ผู้ใช้สามารถเปิดหรือปิดการแจ้งเตือน: ผู้ใช้สามารถเลือกเปิดหรือปิดการแจ้งเตือนตามต้องการ\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>ตัวอย่างโค้ดสำหรับการแจ้งเตือนแบบพุชใน WebSocket Chat\u003C\u002Fh2>\u003Col>\u003Cli>\u003Ch3>การอัปเดต WebSocket Server (Backend)\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>การเชื่อมต่อกับ Push Notification API และการส่งการแจ้งเตือน\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 PushNotificationRequest struct {\n    Message string `json:\"message\"`\n    UserID  string `json:\"user_id\"`\n}\n\nvar (\n    clients   = make(map[*websocket.Conn]bool)\n    broadcast = make(chan PushNotificationRequest)\n    mu        sync.Mutex\n    db        *sql.DB\n)\n\nfunc sendPushNotification(message string, userID string) {\n    \u002F\u002F Call your Push Notification API to send notifications\n    fmt.Printf(\"Sending push notification to %s: %s\\n\", userID, message)\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 PushNotificationRequest\n        err := conn.ReadJSON(&message)\n        if err != nil {\n            delete(clients, conn)\n            break\n        }\n\n        \u002F\u002F Send push notification\n        sendPushNotification(message.Message, message.UserID)\n\n        broadcast <- message\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=\"2\">\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.createElement(\"p\");\n    messageElement.innerText = `${data.message}`;\n    chatContainer.appendChild(messageElement);\n\n    \u002F\u002F Display notification\n    new Notification(\"New message\", { body: data.message });\n};\n\nfunction sendMessage(message) {\n    socket.send(JSON.stringify({ message }));\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>ท้าให้ลอง!\u003C\u002Fh3>\u003Cp>ลองเพิ่มฟีเจอร์ \u003Cstrong>การแสดงผลการแจ้งเตือนแบบพุชใน UI\u003C\u002Fstrong> เพื่อให้ผู้ใช้สามารถเห็นการแจ้งเตือนได้ทันทีที่มีข้อความใหม่!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>EP ถัดไป:\u003C\u002Fstrong>\u003Cbr>ใน EP ถัดไป เราจะมาดู \u003Cstrong>การทำให้ WebSocket Server รองรับการสเกล (Scalability) ด้วย Redis\u003C\u002Fstrong> เพื่อให้สามารถรองรับการขยายขนาดของแอปพลิเคชันได้ดีขึ้น!\u003C\u002Fp>","87_11zon_gd2zq24qse.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fee16b1lv755io0i\u002F87_11zon_gd2zq24qse.webp","2026-03-04 08:48:38.351Z","",{"keywords":15,"locale":58,"school_blog":68},[16,23,28,33,38,43,48,53],{"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:35.607Z","rsvzi74wxb7fgkg","Push notification WebSocket","2026-04-10 16:13:50.376Z",{"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:48:35.998Z","k12bqrgg1jktbeq","WebSocket chat push notifications","2026-04-10 16:13:50.533Z",{"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:47:08.604Z","qgbhpvuawt0d7sv","real-time alerts","2026-04-10 16:13:24.200Z",{"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:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":54,"created_by":13,"id":55,"name":56,"updated":57,"updated_by":13},"2026-03-04 08:48:36.895Z","ccyxp32uzuvwz0s","push notification service","2026-04-10 16:13:50.935Z",{"code":59,"collectionId":60,"collectionName":61,"created":62,"flag":63,"id":64,"is_default":65,"label":66,"updated":67},"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":69,"collectionId":70,"collectionName":71,"created":13,"expand":72,"id":86,"slug":87,"updated":13,"views":88},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":73},{"blogIds":74,"collectionId":75,"collectionName":76,"created":77,"created_by":13,"id":69,"image":78,"image_alt":13,"image_path":79,"label":80,"name":81,"priority":82,"publish_at":83,"scheduled_at":13,"status":84,"updated":85,"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":81,"th":81},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","j7h3wxlxac9s4z4","push-notification-websocket-chat",244,"ee16b1lv755io0i",[20,25,30,35,40,45,50,55],"2025-06-30 02:15:56.769Z","เรียนรู้วิธีการเพิ่มฟีเจอร์การแจ้งเตือนแบบพุชใน WebSocket Chat เพื่อให้ผู้ใช้สามารถรับการแจ้งเตือนแบบเรียลไทม์เมื่อมีข้อความใหม่หรือการอัปเดตในห้องแชท","2026-04-22 07:10:13.077Z",{"th":87,"en":87}]