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.

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.

Steps to add a delete message feature to WebSocket Chat:

1. Update the database to support message deletion
2. Add code to the WebSocket Server to handle message deletion
3. Create a delete button UI on the Frontend
4. Test the system

Code example for the delete message feature in WebSocket Chat

1. Database Update

Update the database to support message deletion by adding a deleted column to track the status of deleted messages:

ALTER TABLE chat_messages ADD COLUMN deleted BOOLEAN DEFAULT FALSE;

2. Code for WebSocket Server (Backend)

Add code to the WebSocket Server to handle message deletion and notify all connected clients:

package main

import (
    "database/sql"
    "encoding/json"
    "fmt"
    "net/http"
    "sync"

    "github.com/gorilla/websocket"
    _ "github.com/lib/pq"
)

type DeleteRequest struct {
    MessageID int    `json:"messageID"`
    Sender    string `json:"sender"`
}

type DeleteResponse struct {
    MessageID int  `json:"messageID"`
    Deleted   bool `json:"deleted"`
}

var (
    clients   = make(map[*websocket.Conn]bool)
    broadcast = make(chan DeleteResponse)
    mu        sync.Mutex
    db        *sql.DB
)

func handleDeleteMessage(w http.ResponseWriter, r *http.Request) {
    conn, _ := upgrader.Upgrade(w, r, nil)
    defer conn.Close()
    clients[conn] = true

    for {
        var request DeleteRequest
        err := conn.ReadJSON(&request)
        if err != nil {
            delete(clients, conn)
            break
        }

        // Delete the message from the database
        _, err = db.Exec("UPDATE chat_messages SET deleted = TRUE WHERE id = $1 AND sender = $2", request.MessageID, request.Sender)
        if err == nil {
            broadcast <- DeleteResponse{MessageID: request.MessageID, Deleted: true}
        }
    }
}

func notifyClients() {
    for {
        msg := <-broadcast
        for client := range clients {
            err := client.WriteJSON(msg)
            if err != nil {
                client.Close()
                delete(clients, client)
            }
        }
    }
}

func main() {
    http.HandleFunc("/ws", handleDeleteMessage)
    go notifyClients()
    fmt.Println("WebSocket Server Running on Port 8080")
    http.ListenAndServe(":8080", nil)
}

3. Frontend Code (Client)

Create a delete button UI and send a request to the WebSocket Server to delete the message:

const socket = new WebSocket("ws://localhost:8080/ws");
const chatContainer = document.getElementById("chat-container");

socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.deleted) {
        const messageElement = document.getElementById(`msg-${data.messageID}`);
        messageElement.innerText = `${messageElement.innerText} (Deleted)`;
    }
};

function sendDeleteRequest(messageID) {
    socket.send(JSON.stringify({ messageID, sender: "JohnDoe" }));
}

function displayMessage(id, sender, content) {
    const msgElement = document.createElement("p");
    msgElement.id = `msg-${id}`;
    msgElement.innerText = `${sender}: ${content}`;
    
    const deleteButton = document.createElement("button");
    deleteButton.innerText = "Delete";
    deleteButton.onclick = () => {
        if (confirm("Are you sure you want to delete this message?")) {
            sendDeleteRequest(id);
        }
    };
    
    msgElement.appendChild(deleteButton);
    chatContainer.appendChild(msgElement);
}

Challenge:

Try adding a message confirmation before deletion so that users must confirm before deleting a message!

Next EP:
In the next episode, we’ll explore adding a reply to message feature in WebSocket Chat, which allows users to directly reply to specific messages!