[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-delete-message-websocket-chat-all--*":3,"academy-blog-translations-tiecpb1o0kmdpwr":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.51 Adding a Delete Message Feature to WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>In this article, we’ll discuss adding a delete message feature to WebSocket Chat that enables users to delete messages they’ve already sent in real-time. This feature will be implemented both server-side and client-side.\u003C\u002Fp>\u003Cp>The steps to implement this feature include updating the database, writing code in the WebSocket Server to handle the deletion, creating a UI delete button on the frontend, and testing the system.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>Steps to add a delete message feature to WebSocket Chat:\u003C\u002Fh2>\u003Col>\u003Cli>Update the database to support message deletion\u003C\u002Fli>\u003Cli>Add code to the WebSocket Server to handle message deletion\u003C\u002Fli>\u003Cli>Create a delete button UI on the Frontend\u003C\u002Fli>\u003Cli>Test the system\u003C\u002Fli>\u003C\u002Fol>\u003Cp> \u003C\u002Fp>\u003Ch2>Code example for the delete message feature in WebSocket Chat\u003C\u002Fh2>\u003Col>\u003Cli>\u003Ch3>Database Update\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Update the database to support message deletion by adding a \u003Ccode inline=\"\">deleted\u003C\u002Fcode> column to track the status of deleted messages:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-sql\">ALTER TABLE chat_messages ADD COLUMN deleted BOOLEAN DEFAULT FALSE;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Col start=\"2\">\u003Cli>\u003Ch3>Code for WebSocket Server (Backend)\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Add code to the WebSocket Server to handle message deletion and notify all connected clients:\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 DeleteRequest struct {\n    MessageID int    `json:\"messageID\"`\n    Sender    string `json:\"sender\"`\n}\n\ntype DeleteResponse struct {\n    MessageID int  `json:\"messageID\"`\n    Deleted   bool `json:\"deleted\"`\n}\n\nvar (\n    clients   = make(map[*websocket.Conn]bool)\n    broadcast = make(chan DeleteResponse)\n    mu        sync.Mutex\n    db        *sql.DB\n)\n\nfunc handleDeleteMessage(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 DeleteRequest\n        err := conn.ReadJSON(&request)\n        if err != nil {\n            delete(clients, conn)\n            break\n        }\n\n        \u002F\u002F Delete the message from the database\n        _, err = db.Exec(\"UPDATE chat_messages SET deleted = TRUE WHERE id = $1 AND sender = $2\", request.MessageID, request.Sender)\n        if err == nil {\n            broadcast <- DeleteResponse{MessageID: request.MessageID, Deleted: true}\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\", handleDeleteMessage)\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>Create a delete button UI and send a request to the WebSocket Server to delete the message:\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    if (data.deleted) {\n        const messageElement = document.getElementById(`msg-${data.messageID}`);\n        messageElement.innerText = `${messageElement.innerText} (Deleted)`;\n    }\n};\n\nfunction sendDeleteRequest(messageID) {\n    socket.send(JSON.stringify({ messageID, sender: \"JohnDoe\" }));\n}\n\nfunction displayMessage(id, sender, content) {\n    const msgElement = document.createElement(\"p\");\n    msgElement.id = `msg-${id}`;\n    msgElement.innerText = `${sender}: ${content}`;\n    \n    const deleteButton = document.createElement(\"button\");\n    deleteButton.innerText = \"Delete\";\n    deleteButton.onclick = () => {\n        if (confirm(\"Are you sure you want to delete this message?\")) {\n            sendDeleteRequest(id);\n        }\n    };\n    \n    msgElement.appendChild(deleteButton);\n    chatContainer.appendChild(msgElement);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>Challenge:\u003C\u002Fh3>\u003Cp>Try adding a \u003Cstrong>message confirmation before deletion\u003C\u002Fstrong> so that users must confirm before deleting a message!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>Next EP:\u003C\u002Fstrong>\u003Cbr>In the next episode, we’ll explore \u003Cstrong>adding a reply to message feature\u003C\u002Fstrong> in WebSocket Chat, which allows users to directly reply to specific messages!\u003C\u002Fp>","74_11zon_j7akk4q6yw.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fnbbdvniheo1b9ga\u002F74_11zon_j7akk4q6yw.webp","2026-03-04 08:48:51.944Z","",{"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:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:46:14.782Z","v0mhensk18fofru","WebSocket Chat","2026-04-10 16:13:10.563Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:48:51.522Z","2jlqt2u73fp1rx3","Delete Messages","2026-04-10 16:13:55.108Z",{"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:48:36.524Z","e4ajo6uxyr7u8et","WebSocket Feature","2026-04-10 16:13:50.796Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:20:33.316Z","ln1ntwattzmxo0o","programming","2026-04-10 16:07:27.299Z",{"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:44:53.062Z","puutdnxuitnxxgq","Backend","2026-04-10 16:12:51.264Z",{"collectionId":17,"collectionName":18,"created":59,"created_by":13,"id":60,"name":61,"updated":62,"updated_by":13},"2026-03-04 08:48:46.903Z","wqd5lairiftowzr","Frontend","2026-04-10 16:13:54.137Z",{"code":64,"collectionId":65,"collectionName":66,"created":67,"flag":68,"id":69,"is_default":70,"label":71,"updated":72},"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":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","tiecpb1o0kmdpwr",265,"nbbdvniheo1b9ga",[20,25,30,35,40,45,50,55,60],"2025-06-17 08:09:31.303Z","Learn how to add a delete message feature to WebSocket Chat that allows users to delete messages they’ve already sent. The code provided will cover both server-side and client-side implementations, with examples that you can directly use.","delete-message-websocket-chat","2026-04-22 07:10:15.989Z",{"en":97}]