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

【问题标题】：NodeJs, Express, Socket.io chat application, how to emit two different types of messages for sender and receivers?NodeJs、Express、Socket.io 聊天应用程序，如何为发送者和接收者发出两种不同类型的消息？
【发布时间】：2021-03-01 01:07:44
【问题描述】：

如果标题不清楚（如果不是很抱歉），基本上我从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);
}

【问题讨论】：

通常你会在登录时分配用户名，你有 User 和 User2 （硬编码？）当它设置时它会是其中的一部分。然后当你在你寻找的 UI 中发出/广播消息时用户名和/或socket.id，然后显示蓝色或灰色，当您添加getUsers事件时您会弄清楚，目前，由于您没有登录或跟踪用户服务器端，因此无法发送DM

标签： javascript node.js sockets chat

【解决方案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);
});

现在可以了！

【讨论】：