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

Question

如果标题不清楚（如果不是很抱歉），基本上目前我从 DOM 发送到服务器以及从服务器发送回 DOM 的消息都是蓝色气泡（右侧）。 因此，即使我是消息的接收者（应该是左侧的灰色气泡），我也会在右侧收到它。

如何区分这两者，以便当我发送消息时它是蓝色的，而当我收到它时它是灰色的（例如，参见图片）？

如果这是一个愚蠢的问题，我很抱歉，但我才刚刚开始使用 NodeJs，有时它仍然让我有点困惑。

JS服务器端

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前端

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

我解决了！ （太开心了）也许这不是最干净的方式，所以请感觉给出你的答案！

基本上在捕获从服务器上的 DOM 发送的消息后，我创建了两个不同的发出：

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

然后我使用两个不同的函数在前端 JS 上捕获它们：

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

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

现在它起作用了！