[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-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 Adding a Push Notification Feature in WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>The Push Notification feature in WebSocket Chat allows users to receive real-time notifications when new messages or important updates are posted in the chat room. This feature improves communication efficiency by ensuring users can respond immediately without needing to constantly check the chat.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>Why is the Push Notification Feature Necessary?\u003C\u002Fh2>\u003Cp>The Push Notification feature is essential to ensure users never miss important updates in a chat room. Real-time notifications help users respond quickly to new messages or updates without having to manually check the chat. This feature also improves communication in chat rooms with frequent updates.\u003C\u002Fp>\u003Ch3>Benefits of Push Notifications:\u003C\u002Fh3>\u003Cul>\u003Cli>Never miss important information: Users receive notifications immediately when a new message is sent.\u003C\u002Fli>\u003Cli>Improved communication efficiency: Users can respond immediately without waiting for messages to be seen.\u003C\u002Fli>\u003Cli>Convenient and quick: Users don’t have to constantly monitor the chat or app.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>Structure of the Push Notification System in WebSocket Chat\u003C\u002Fh2>\u003Cp>The Push Notification feature works alongside the WebSocket Server by sending notification data from the server to connected users in the chat room using the Push Notification API.\u003C\u002Fp>\u003Ch3>Key components of the push notification system:\u003C\u002Fh3>\u003Cul>\u003Cli>Setting up notifications in the WebSocket Server: The server will handle and send notifications when a new message or update occurs in the chat room.\u003C\u002Fli>\u003Cli>Using the Push Notification API: The server will send notifications to users’ devices via the Push Notification API.\u003C\u002Fli>\u003Cli>Displaying notifications in the UI: Users will be able to see the notification in the app UI.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>How to Add the Push Notification Feature in the WebSocket Server\u003C\u002Fh2>\u003Cp>We will update the WebSocket Server to support push notifications, allowing it to send notifications when new messages or updates are posted.\u003C\u002Fp>\u003Ch3>Steps to implement:\u003C\u002Fh3>\u003Cul>\u003Cli>Connect the WebSocket Server with the Push Notification API: The server needs to be connected to the Push Notification API that will send notifications.\u003C\u002Fli>\u003Cli>Sending notification data: When a new message or update is posted in the chat room, the server will send a push notification to the users.\u003C\u002Fli>\u003Cli>Managing notifications: Once the notification is sent, users will receive real-time alerts.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>Creating a UI for Push Notifications in WebSocket Chat\u003C\u002Fh2>\u003Cp>To ensure users can receive push notifications, we will add UI features to display notifications within the app. This will include popup alerts or on-screen notifications when new messages arrive.\u003C\u002Fp>\u003Ch3>UI components:\u003C\u002Fh3>\u003Cul>\u003Cli>Display notification popups: When a new message is posted, the system will send a notification popup to connected users.\u003C\u002Fli>\u003Cli>Display message notification in the UI: Once the notification arrives, it will show up in the UI so users can immediately respond.\u003C\u002Fli>\u003Cli>Allow users to toggle notifications: Users will be able to turn push notifications on or off in the settings.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>Testing the Push Notification Feature\u003C\u002Fh2>\u003Cp>Testing the push notification feature is essential to ensure that users receive notifications in real-time when new messages or updates are posted.\u003C\u002Fp>\u003Ch3>Testing steps:\u003C\u002Fh3>\u003Cul>\u003Cli>Test sending push notifications: Verify that when a new message is posted, the system sends a push notification to users.\u003C\u002Fli>\u003Cli>Test displaying notifications in the UI: Ensure that the UI displays the push notification correctly and immediately.\u003C\u002Fli>\u003Cli>Test user interaction: Test that when a user clicks the notification, it correctly shows the message in the chat room.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>Example Code for Push Notification in WebSocket Chat\u003C\u002Fh2>\u003Col>\u003Cli>\u003Ch3>Updating the WebSocket Server (Backend)\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Connect to the Push Notification API and send notifications.\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 Code (Client)\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Add notification handling and display in the 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>Challenge for Next EP!\u003C\u002Fh3>\u003Cp>Try adding \u003Cstrong>message filtering\u003C\u002Fstrong> so users can search chat history more easily and find important messages!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>Next EP:\u003C\u002Fstrong>\u003Cbr>In the next episode, we will explore \u003Cstrong>making the WebSocket Server scalable (Scalability) using Redis\u003C\u002Fstrong> to improve performance and handle large numbers of connections efficiently!\u003C\u002Fp>","88_11zon_473ix1xt8z.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fl4i4imdcgexzgct\u002F88_11zon_473ix1xt8z.webp","2026-03-04 08:48:38.007Z","",{"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:36.198Z","2bk87nwjgolgc4t","Chat App Development","2026-04-10 16:13:50.662Z",{"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:36.524Z","e4ajo6uxyr7u8et","WebSocket Feature","2026-04-10 16:13:50.796Z",{"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},"en","pbc_1989393366","locales","2026-01-22 11:00:02.726Z","twemoji:flag-united-states","qv9c1llfov2d88z",false,"English","2026-04-10 15:42:46.825Z",{"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,"l4i4imdcgexzgct",[20,25,30,35,40,45,50,55],"2025-06-30 02:15:52.749Z","Learn how to add a Push Notification feature in WebSocket Chat to allow users to receive real-time notifications when new messages or updates are sent in the chat room.","2026-05-06 08:38:21.797Z",{"th":87,"en":87}]