[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-notification-for-new-pinned-messages-websocket-chat-all--*":3,"academy-blog-translations-zihnuqri0sruk0w":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.55 Adding a Feature to Notify Users When a New Message is Pinned in WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>The Notification for New Pinned Messages feature in WebSocket Chat helps users stay informed immediately when an important message is pinned in the chat. This ensures that users don’t miss key updates and messages that need attention. The feature improves communication efficiency, as users are instantly alerted about crucial information.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>Why is the Notification for New Pinned Messages feature necessary?\u003C\u002Fh2>\u003Cp>This feature is essential because it allows users to receive immediate notifications when a message is pinned, ensuring they don't miss any important updates or announcements in the chat. It helps users:\u003C\u002Fp>\u003Cul>\u003Cli>Stay informed about important messages: Users get an instant notification whenever a new message is pinned, which ensures they don't miss out on crucial information.\u003C\u002Fli>\u003Cli>Improve communication efficiency: By being notified immediately, users can quickly react to pinned messages that might require their attention.\u003C\u002Fli>\u003Cli>Reduce the chance of missing critical updates: Without a notification, pinned messages could easily be overlooked in the chat flow. This feature guarantees that users are alerted about these key messages.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>The Structure of the Notification System for Pinned Messages in WebSocket Chat\u003C\u002Fh2>\u003Cp>To implement this feature, we need a system that can send real-time notifications to users whenever a new message is pinned in the chat.\u003C\u002Fp>\u003Ch3>Key components of the notification system:\u003C\u002Fh3>\u003Cul>\u003Cli>Storing notification data in the database: We need to track when a message is pinned and ensure that this information is stored in the database to prevent sending duplicate notifications.\u003C\u002Fli>\u003Cli>Sending real-time notifications to connected users: When a message is pinned, the system must notify all users connected to the chat in real-time, making sure no one misses the pinned message.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>How to Add the Notification Feature for New Pinned Messages in WebSocket Server\u003C\u002Fh2>\u003Cp>To add the New Pinned Message Notification feature, we need to update the WebSocket Server to handle the notification process. This includes updating the database to store the pinning status and broadcasting the notifications in real-time.\u003C\u002Fp>\u003Ch3>Steps to follow:\u003C\u002Fh3>\u003Cul>\u003Cli>Update the WebSocket Server to handle notifications: The server needs to manage requests to pin messages and send notifications to users when a new message is pinned.\u003C\u002Fli>\u003Cli>Update the database: We need to add a column (such as \u003Ccode inline=\"\">notification_sent\u003C\u002Fcode>) in the database to store the pin status of messages and prevent sending the same notification multiple times.\u003C\u002Fli>\u003Cli>Send notifications to users in real-time: When a message is pinned, the server must notify all connected users instantly.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>Creating the UI for Displaying Notifications\u003C\u002Fh2>\u003Cp>To make notifications more visible to users, we will add a mechanism to show notifications whenever a new message is pinned. This could be done through a popup or a notification banner.\u003C\u002Fp>\u003Ch3>UI Components:\u003C\u002Fh3>\u003Cul>\u003Cli>Display a notification popup: When a new message is pinned, we can show a notification popup at the corner of the screen or in a dedicated notifications section of the chat UI.\u003C\u002Fli>\u003Cli>Show pinned message notifications: In the chat room, a banner or message will indicate that a new message has been pinned, such as \"New pinned message!\" or \"Pinned message\".\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>Testing the Notification Feature for New Pinned Messages\u003C\u002Fh2>\u003Cp>Once we have implemented the feature, it's crucial to test it to ensure everything works as expected.\u003C\u002Fp>\u003Ch3>Testing steps:\u003C\u002Fh3>\u003Cul>\u003Cli>Test notifications when a message is pinned: Verify that users receive notifications whenever a new message is pinned in the chat.\u003C\u002Fli>\u003Cli>Test UI display of notifications: Ensure that the UI correctly displays the notification to the user, whether it’s a popup or banner.\u003C\u002Fli>\u003Cli>Test real-time notifications: Test that when one user pins a message, the notification is sent to all other users in the chat room instantly.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>Example Code for New Pinned Message Notifications in WebSocket Chat\u003C\u002Fh2>\u003Col>\u003Cli>\u003Ch3>Database Update (Database)\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>We will add a column \u003Ccode inline=\"\">notification_sent\u003C\u002Fcode> to track the notification status for pinned messages.\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 Code (Backend)\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>The WebSocket server code will be updated to handle pinning messages and sending notifications to users in real-time.\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 Update pin status in the database and send notification\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 Code (Client)\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>The frontend will include a notification display for pinned messages.\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>Challenge for Next EP!\u003C\u002Fh3>\u003Cp>Try adding the \u003Cstrong>Show Pinned Messages in the Correct Order\u003C\u002Fstrong> feature so users can view pinned messages in the proper order of importance!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>Next EP:\u003C\u002Fstrong>\u003Cbr>In the next episode, we will explore \u003Cspan class=\"Y2IQFc\" lang=\"en\">\u003Cstrong>a chat history recording feature to WebSocket Chat\u003C\u002Fstrong> so that users can access the chat history later.\u003C\u002Fspan>\u003C\u002Fp>","82_11zon_c667ixkvib.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Ft26py7udnjlywo4\u002F82_11zon_c667ixkvib.webp","2026-03-04 08:48:46.449Z","",{"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:44.051Z","3oixkwxs34xk3ml","WebSocket notifications","2026-04-10 16:13:53.166Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:48:44.430Z","lkyb0rrs3f3yv4f","pinned messages","2026-04-10 16:13:53.309Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:48:45.061Z","hqqbp31ztfkdnvi","real-time chat notifications","2026-04-10 16:13:53.526Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"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":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:48:45.674Z","6fwioda9049a05k","chat app notifications","2026-04-10 16:13:53.779Z",{"collectionId":17,"collectionName":18,"created":49,"created_by":13,"id":50,"name":51,"updated":52,"updated_by":13},"2026-03-04 08:48:45.956Z","dscwovhaoz9ogcw","real-time WebSocket chat","2026-04-10 16:13:53.960Z",{"collectionId":17,"collectionName":18,"created":54,"created_by":13,"id":55,"name":56,"updated":57,"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":59,"created_by":13,"id":60,"name":61,"updated":62,"updated_by":13},"2026-03-04 08:48:46.168Z","wnien6vafsz72gl","pinned message feature","2026-04-10 16:13:54.039Z",{"collectionId":17,"collectionName":18,"created":64,"created_by":13,"id":65,"name":66,"updated":67,"updated_by":13},"2026-03-04 08:44:48.724Z","s6xhnfomy7n5ycp","WebSocket Server","2026-04-10 16:12:50.171Z",{"code":69,"collectionId":70,"collectionName":71,"created":72,"flag":73,"id":74,"is_default":75,"label":76,"updated":77},"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":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","zihnuqri0sruk0w",225,"t26py7udnjlywo4",[20,25,30,35,40,45,50,55,60,65],"2025-06-23 10:41:47.179Z","Learn how to add a Notification for New Pinned Messages feature in WebSocket Chat, so users are instantly notified when important messages are pinned, ensuring they don't miss critical information in the chat.","notification-for-new-pinned-messages-websocket-chat","2026-04-22 07:10:14.757Z",{"en":102}]