NodeJs、Express、Socket.io 聊天应用程序，如何为发送方和接收方发出两种不同类型的消息？

Question

If the title is not clear (I'm sorry if it's not), basically at the moment the messages that I send from the DOM to the server and from the server back to the DOM are all blue bubbles (right side). So even when I'm the receiver of the message (which should be a grey bubble on the left), I receive it on the right.

How can I differentiate between the two so that when I send a message it's blue and when I receive it it's grey (see image for example)?

I'm sorry if it's a stupid question, but I'm only getting started with NodeJs and it's still a little confusing to me sometimes.

JS SERVER SIDE

const path = require("path");
const http = require("http");
const express = require("express");
const socketio = require("socket.io");

//RUN EXPRESS SERVER
const app = express();
//RUN SERVER USING HTTP MODULE REQUIRED BY SOCKET.IO
const server = http.createServer(app);
//INIT SOCKET.IO
const io = socketio(server);

// SET STATIC FOLDER
app.use(express.static(path.join(__dirname, "public")));

//RUN WHEN CLIENT CONNECTS
io.on("connection", (socket) => {
    //message only to me when I connect
    socket.emit("message", "Welcome to Chat.io");

    //message to other users when I connect
    socket.broadcast.emit("message", "User has joined the chat");

    //message to other users when I disconnect
    socket.on("disconnect", () => {
        io.emit("message", "User has left the chat");
    });

    socket.on("chatMessage", (msg) => {
        io.emit("message", msg);
    });
});

const PORT = 3000 || process.env.PORT;

server.listen(PORT, () => console.log(`Server running on port ${PORT}`));

JS FRONTEND

const chatForm = document.getElementById("chat-form");

//WE CAN USE THIS BECAUSE OF THE SCRIPT TAG IN chat.html
const socket = io();

//FUNCTION TO CATCH MESSAGES EMITTED FROM SERVER
socket.on("message", (message) => {
    console.log(message);

    outputMessage(message);
});

//MESSAGE SUBMIT
chatForm.addEventListener("submit", (e) => {
    e.preventDefault();

    //get chat message from DOM
    const msg = e.target.elements.msg.value;

    //emit chat message to server
    socket.emit("chatMessage", msg);

    //clear field
    chatForm.reset();
});

//OUTPUT MESSAGE TO DOM FUNCTION
function outputMessage(message) {
    const div = document.createElement("div");
    div.classList.add("chat-row");
    div.innerHTML = `
    <div class="bubble-right--container">
        <div class="chat-bubble chat-bubble--right">
        ${message}
        </div>
        <p class="meta">20.18</p>
    </div>`;

    document.querySelector(".chat-panel").appendChild(div);
}

Answer 1

I solved! (So happy) maybe it's not the cleanest way, so please feel to give your answer!

Basically after catching the message sent from the DOM on the server, I created two different emits:

socket.on("chatMessage", (msg) => {
        socket.broadcast.emit("greyMessage", msg);
        socket.emit("blueMessage", msg);
    });

Then I caught them on the frontend JS using two different functions:

//CATCH GREY MESSAGES
socket.on("greyMessage", (message) => {
    outputGreyMessage(message);
});

//CATCH BLUE MESSAGES
socket.on("blueMessage", (message) => {
    outputBlueMessage(message);
});

Now it works!