[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-chat-history-websocket-all--*":3,"academy-blog-translations-mo0g2bjpqrrx93p":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.56 Adding a Feature to Log Chat History in WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>The Chat History Logging feature in WebSocket Chat allows users to access past conversation logs, ensuring they can revisit important messages and have a record of the conversation. This feature provides users with an easy way to search and reference important messages without the need to scroll through the chat history manually.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>Why is the Chat History Logging feature necessary?\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>The Chat History Logging feature helps ensure that important information shared during a conversation is not lost once the chat ends. It allows users to revisit past messages, making the chat more organized and providing a reliable record of interactions. By keeping a log of chat messages, users can easily retrieve important data, announcements, or instructions that may need future reference.\u003C\u002Fp>\u003Ch3>\u003Cstrong>Benefits of Chat History Logging:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Store important messages:\u003C\u002Fstrong> The feature helps keep key information available, even after the conversation ends.\u003C\u002Fli>\u003Cli>\u003Cstrong>Quick access to past messages:\u003C\u002Fstrong> Users can search for messages easily without manually scrolling through the entire conversation.\u003C\u002Fli>\u003Cli>\u003Cstrong>Never miss crucial updates:\u003C\u002Fstrong> Important messages stay logged and are always available for reference later.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>Structure of the Chat History Logging Feature in WebSocket Chat\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>The Chat History Logging feature requires a system that can record all chat messages in the database and allow users to retrieve these messages when needed. This involves storing chat messages, indexing them for quick search, and presenting them to users as needed.\u003C\u002Fp>\u003Ch3>\u003Cstrong>Key components of the chat history system:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Storing chat messages in the database:\u003C\u002Fstrong> All chat messages will be stored in a database table.\u003C\u002Fli>\u003Cli>\u003Cstrong>Indexing for efficient search:\u003C\u002Fstrong> We will use indexing to optimize the search functionality for quick retrieval of past messages.\u003C\u002Fli>\u003Cli>\u003Cstrong>Managing search queries through API:\u003C\u002Fstrong> Users will be able to send search queries via an API and view the results in the UI.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>How to Add the Chat History Logging Feature in the WebSocket Server\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>We will update the WebSocket Server to handle the logging of chat history by storing each message sent in the chat room. This also includes making changes to the database to store and retrieve the messages.\u003C\u002Fp>\u003Ch3>\u003Cstrong>Steps to implement:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Updating the WebSocket Server to handle message logging:\u003C\u002Fstrong> The server will need to record each message sent and store it in the database.\u003C\u002Fli>\u003Cli>\u003Cstrong>Updating the database:\u003C\u002Fstrong> A new table will be created to store chat messages, including details such as the sender, message content, timestamp, and the status of the message.\u003C\u002Fli>\u003Cli>\u003Cstrong>Sending logged messages to users:\u003C\u002Fstrong> When a message is logged, it should be available to all connected users in the chat room.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>Creating a UI for Users to View Chat History\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>To ensure users can easily access the chat history, we will create a feature in the UI that allows users to view past messages from the chat.\u003C\u002Fp>\u003Ch3>\u003Cstrong>UI components:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Add a \"View History\" button:\u003C\u002Fstrong> A button will be added to the chat room UI that allows users to view past messages.\u003C\u002Fli>\u003Cli>\u003Cstrong>Display chat messages:\u003C\u002Fstrong> The logged messages will be displayed in the UI, allowing users to see past conversations in chronological order.\u003C\u002Fli>\u003Cli>\u003Cstrong>Filtering options:\u003C\u002Fstrong> Users can filter through the chat history to quickly find specific messages or content.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>Testing the Chat History Logging Feature\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>Once the feature is implemented, we will conduct testing to ensure it works as expected.\u003C\u002Fp>\u003Ch3>\u003Cstrong>Testing steps:\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Test message logging:\u003C\u002Fstrong> Test that every message sent in the chat is successfully logged in the database.\u003C\u002Fli>\u003Cli>\u003Cstrong>Test displaying chat history in the UI:\u003C\u002Fstrong> Verify that the UI displays past messages correctly and in the right order.\u003C\u002Fli>\u003Cli>\u003Cstrong>Test search functionality:\u003C\u002Fstrong> Check that users can filter and search for specific messages accurately within the chat history.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>\u003Cstrong>Example Code for Chat History Logging in WebSocket Chat\u003C\u002Fstrong>\u003C\u002Fh2>\u003Col>\u003Cli>\u003Ch3>\u003Cstrong>Database Update (Database)\u003C\u002Fstrong>\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>We will create a new table in the database to store chat messages.\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-sql\">CREATE TABLE chat_history (\n    id SERIAL PRIMARY KEY,\n    sender VARCHAR(255),\n    content TEXT,\n    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Col start=\"2\">\u003Cli>\u003Ch3>\u003Cstrong>WebSocket Server Code (Backend)\u003C\u002Fstrong>\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>The WebSocket server code will be updated to store messages in the database and notify clients 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 ChatMessage struct {\n    Sender  string `json:\"sender\"`\n    Content string `json:\"content\"`\n}\n\nvar (\n    clients   = make(map[*websocket.Conn]bool)\n    broadcast = make(chan ChatMessage)\n    mu        sync.Mutex\n    db        *sql.DB\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 ChatMessage\n        err := conn.ReadJSON(&message)\n        if err != nil {\n            delete(clients, conn)\n            break\n        }\n\n        \u002F\u002F Log the message to the database\n        _, err = db.Exec(\"INSERT INTO chat_history (sender, content) VALUES ($1, $2)\", message.Sender, message.Content)\n        if err == nil {\n            broadcast <- message\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\", 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=\"3\">\u003Cli>\u003Ch3>\u003Cstrong>Frontend Code (Client)\u003C\u002Fstrong>\u003C\u002Fh3>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>The frontend will have a button to view the chat history and show past 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.createElement(\"p\");\n    messageElement.innerText = `${data.sender}: ${data.content}`;\n    chatContainer.appendChild(messageElement);\n};\n\nfunction displayHistory() {\n    fetch('\u002Fhistory')\n        .then(response => response.json())\n        .then(messages => {\n            messages.forEach(msg => {\n                const messageElement = document.createElement(\"p\");\n                messageElement.innerText = `${msg.sender}: ${msg.content}`;\n                chatContainer.appendChild(messageElement);\n            });\n        });\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>\u003Cstrong>Challenge for Next EP!\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp>Try adding \u003Cstrong>chat message search\u003C\u002Fstrong> so users can search through chat history and find specific messages more easily!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>Next EP:\u003C\u002Fstrong>\u003Cbr>In the next episode, we will explore \u003Cstrong>adding a feature for access control in chat rooms\u003C\u002Fstrong> so that admins can manage user access to chat rooms!\u003C\u002Fp>","84_11zon_3maxdm2euz.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fatwd3uokt6ap39v\u002F84_11zon_3maxdm2euz.webp","2026-03-04 08:48:40.982Z","",{"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:39.616Z","0tt9oz9nx3711ge","WebSocket chat history","2026-04-10 16:13:51.878Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:48:39.993Z","cvqrwxwzdsgoz1u","Message History","2026-04-10 16:13:52.011Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:48:40.444Z","m4s1ps57epl88o3","real-time chat history","2026-04-10 16:13:52.083Z",{"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:48:36.198Z","2bk87nwjgolgc4t","Chat App Development","2026-04-10 16:13:50.662Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"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":49,"created_by":13,"id":50,"name":51,"updated":52,"updated_by":13},"2026-03-04 08:48:40.623Z","8jqwrmnr2t6ww6n","message storage","2026-04-10 16:13:52.170Z",{"collectionId":17,"collectionName":18,"created":54,"created_by":13,"id":55,"name":56,"updated":57,"updated_by":13},"2026-03-04 08:20:33.316Z","ln1ntwattzmxo0o","programming","2026-04-10 16:07:27.299Z",{"collectionId":17,"collectionName":18,"created":59,"created_by":13,"id":60,"name":61,"updated":62,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"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","mo0g2bjpqrrx93p",213,"atwd3uokt6ap39v",[20,25,30,35,40,45,50,55,60,65],"2025-06-26 02:14:53.660Z","Learn how to add a Chat History Logging feature in WebSocket Chat so that users can access past conversation logs easily, helping them track important messages.","chat-history-websocket","2026-04-22 07:10:13.566Z",{"en":102}]