[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-chat-history-websocket-chat-all--*":3,"academy-blog-translations-a4rbks58bdku6jy":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.48 Adding Chat History Display System in WebSocket Chat","sclblg987654321","school_blog_translations","\u003Ch3>\u003Cspan>\u003Cstrong>Why Have a Chat History Feature?\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>The \u003Cstrong>Chat History\u003C\u002Fstrong> feature allows users to view old messages even after closing the chat window. This offers several benefits:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Continuous Conversations:\u003C\u002Fstrong> Users can return to their conversations without losing context.\u003C\u002Fli>\u003Cli>\u003Cstrong>Important Records:\u003C\u002Fstrong> Provides a way to keep evidence or important information from discussions.\u003C\u002Fli>\u003Cli>\u003Cstrong>Enhanced User Experience:\u003C\u002Fstrong> Completes the functionality of the WebSocket Chat application.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>\u003Cspan>\u003Cstrong>Structure of the Chat History System in WebSocket Chat\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cstrong>WebSocket Server:\u003C\u002Fstrong> Responsible for storing and retrieving chat history from the database.\u003C\u002Fli>\u003Cli>\u003Cstrong>Database (PostgreSQL \u002F MongoDB):\u003C\u002Fstrong> Stores the messages that have been sent.\u003C\u002Fli>\u003Cli>\u003Cstrong>Frontend (Client-Side):\u003C\u002Fstrong> Loads and displays old messages as soon as the user logs in.\u003C\u002Fli>\u003C\u002Fol>\u003Ch3>\u003Cspan>\u003Cstrong>Adding the Chat History Feature to the WebSocket Server\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Ch4>\u003Cspan>\u003Cstrong>1. Creating a Database for Storing Messages\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh4>\u003Cp>\u003Cspan>File: \u003C\u002Fspan>\u003Ccode>\u003Cspan>schema.sql\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">CREATE TABLE chat_messages (\n    id SERIAL PRIMARY KEY,\n    sender TEXT NOT NULL,\n    content TEXT NOT NULL,\n    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>\u003Cspan>\u003Cstrong>2. Adding Code to Save Messages to the Database\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh4>\u003Cp>\u003Cspan>File: \u003C\u002Fspan>\u003Ccode>\u003Cspan>websocket_server.go\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">package main\n\nimport (\n    \"database\u002Fsql\"\n    \"encoding\u002Fjson\"\n    \"fmt\"\n    \"net\u002Fhttp\"\n    \"sync\"\n    \"time\"\n\n    \"github.com\u002Fgorilla\u002Fwebsocket\"\n    _ \"github.com\u002Flib\u002Fpq\"\n)\n\ntype Message struct {\n    ID        int       `json:\"id\"`\n    Sender    string    `json:\"sender\"`\n    Content   string    `json:\"content\"`\n    Timestamp time.Time `json:\"timestamp\"`\n}\n\nvar upgrader = websocket.Upgrader{\n    CheckOrigin: func(r *http.Request) bool { return true },\n}\n\nvar (\n    clients   = make(map[*websocket.Conn]bool)\n    broadcast = make(chan Message)\n    mu        sync.Mutex\n    db        *sql.DB\n)\n\nfunc init() {\n    var err error\n    db, err = sql.Open(\"postgres\", \"user=your_user password=your_password dbname=chat_db sslmode=disable\")\n    if err != nil {\n        panic(err)\n    }\n}\n\nfunc handleConnections(w http.ResponseWriter, r *http.Request) {\n    conn, _ := upgrader.Upgrade(w, r, nil)\n    defer conn.Close()\n    clients[conn] = true\n\n    rows, _ := db.Query(\"SELECT id, sender, content, timestamp FROM chat_messages ORDER BY timestamp ASC\")\n    defer rows.Close()\n    \n    for rows.Next() {\n        var msg Message\n        rows.Scan(&msg.ID, &msg.Sender, &msg.Content, &msg.Timestamp)\n        conn.WriteJSON(msg)\n    }\n\n    for {\n        var msg Message\n        err := conn.ReadJSON(&msg)\n        if err != nil {\n            delete(clients, conn)\n            break\n        }\n        \n        db.Exec(\"INSERT INTO chat_messages (sender, content) VALUES ($1, $2)\", msg.Sender, msg.Content)\n        broadcast <- msg\n    }\n}\n\nfunc handleMessages() {\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\", handleConnections)\n    go handleMessages()\n    fmt.Println(\"WebSocket Server Running on Port 8080\")\n    http.ListenAndServe(\":8080\", nil)\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>\u003Cspan>\u003Cstrong>3. Loading Chat History on the Frontend (Client-Side)\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>File: \u003C\u002Fspan>\u003Ccode>\u003Cspan>client.js\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">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    displayMessage(data.sender, data.content, data.timestamp);\n};\n\nfunction displayMessage(sender, content, timestamp) {\n    const msgElement = document.createElement(\"p\");\n    msgElement.innerText = `${sender}: ${content} (${new Date(timestamp).toLocaleTimeString()})`;\n    chatContainer.appendChild(msgElement);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>\u003Cspan>\u003Cstrong>Displaying Chat History on the UI\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>File: \u003C\u002Fspan>\u003Ccode>\u003Cspan>index.html\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\"><div id=\"chat-container\"><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>\u003Cspan>\u003Cstrong>4. Testing the System\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Col data-spread=\"false\">\u003Cli>\u003Cspan>\u003Cstrong>Running the WebSocket Server\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Fol>\u003Cpre>\u003Ccode class=\"language-plaintext\">go run websocket_server.go\u003C\u002Fcode>\u003C\u002Fpre>\u003Col data-spread=\"false\" start=\"2\">\u003Cli>\u003Cspan>\u003Cstrong>Open the Web Page and Try Typing a Message\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan>\u003Cstrong>Refresh the Page and Check Message Persistence\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Fol>\u003Ch3>\u003Cspan>\u003Cstrong>Challenge!\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>Try adding a \u003Cstrong>Chat History Search System\u003C\u002Fstrong> to allow users to easily search for old messages.\u003C\u002Fspan>\u003C\u002Fp>\u003Chr>\u003Ch3>\u003Cspan>\u003Cstrong>Next EP\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>In \u003Cstrong>EP.49\u003C\u002Fstrong>, we will add a \u003Cstrong>Feature to Delete Sent Messages in the WebSocket Chat! 🚀\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fp>","68_11zon_0uqms7iirt.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fwajxjsfvnax9nq8\u002F68_11zon_0uqms7iirt.webp","2026-03-04 08:50:53.677Z","",{"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:50:52.953Z","aqepcyhdmag8vg4","Chat Storage","2026-04-10 16:14:29.336Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:50:49.965Z","ga8fw2l8y3mxjxg","Persistent Chat","2026-04-10 16:14:28.869Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"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":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:48:07.088Z","brfbypclggbbkcx","WebSocket API","2026-04-10 16:13:40.594Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:47:05.949Z","caufix9o52uw4bh","Real-Time Chat","2026-04-10 16:13:23.517Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:20:14.253Z","ah6lvy4x8qe08l5","Golang","2026-04-10 16:07:26.172Z",{"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:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"collectionId":17,"collectionName":18,"created":59,"created_by":13,"id":60,"name":61,"updated":62,"updated_by":13},"2026-03-04 08:50:53.155Z","peza6kmj1144b0x","Chat History","2026-04-10 16:14:29.504Z",{"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","a4rbks58bdku6jy",213,"wajxjsfvnax9nq8",[20,25,30,35,40,45,50,55,60],"2025-03-24 01:52:26.457Z","Learn how to implement a Chat History system in WebSocket Chat using a database and GraphQL API, enabling users to view old messages upon logging in.","chat-history-websocket-chat","2026-04-22 07:10:39.046Z",{"en":97}]