效果

代码

服务端代码：

server.js

初始化node：npm init -y

安装ws：npm install ws

新建文件

命令行输入node server.js启动服务

const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 8080 });

// 用于存储连接的客户端
const clients = new Map();
// 生成唯一标识符
function generateClientId() {
  return Math.random().toString(36).substr(2, 9);
}
// 向特定客户端发送消息
function sendMessageToClient(clientId, message) {
  const client = clients.get(clientId);
  if (client) {
    client.send(message);
  }
}

// 监听连接建立事件
wss.on("connection", (ws) => {
  console.log("与一个新的客户端建立连接");

  // 为客户端分配唯一标识符
  const clientId = generateClientId();
  // 将客户端添加到映射表中
  clients.set(clientId, ws);

  // 监听消息接收事件
  ws.on("message", (message) => {
    console.log("接收信息:", message.toString());

    // 广播消息给所有连接的【其他】客户端 - 不发送给本客户端
    clients.forEach((client, key) => {
      if (client.readyState === WebSocket.OPEN && key !== clientId) {
        client.send(message.toString());
      }
    });
  });

  // 监听连接关闭事件
  ws.on("close", () => {
    console.log("与一个客户端的链接关闭");
    // 从映射表中移除客户端
    clients.delete(clientId);
  });
});

console.log("WebSocket server started on port 8080");

客户端1： client.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Chat Room - User B</h1>
    <div id="chatBox"></div>
    <input type="text" id="messageInput" placeholder="Enter your message" />
    <button onclick="sendMessage()">Send</button>

    <script>
      const socket = new WebSocket("ws://localhost:8080");

      // 监听连接打开事件
      socket.onopen = () => {
        console.log("Connected to server");
      };

      // 监听消息接收事件
      socket.onmessage = (event) => {
        const message = event.data;
        console.log(message);
        displayMessage("接收到信息：" + message);
      };

      // 监听连接关闭事件
      socket.onclose = () => {
        console.log("Disconnected from server");
      };

      // 发送消息给服务器
      function sendMessage() {
        const messageInput = document.getElementById("messageInput");
        const message = messageInput.value;
        socket.send(message.toString());
        messageInput.value = "";
        console.log(111, message);
        displayMessage("User B: " + message);
      }

      // 显示消息在聊天框中
      function displayMessage(message) {
        const chatBox = document.getElementById("chatBox");
        const p = document.createElement("p");
        p.innerHTML = message.toString();
        chatBox.appendChild(p);
      }
    </script>
  </body>
</html>

客户端2： receiver.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Chat Room - User A</h1>
    <div id="chatBox"></div>
    <input type="text" id="messageInput" placeholder="Enter your message" />
    <button onclick="sendMessage()">Send</button>

    <script>
      const socket = new WebSocket("ws://localhost:8080");

      // 监听连接打开事件
      socket.onopen = () => {
        console.log("Connected to server");
      };

      // 监听消息接收事件
      socket.onmessage = (event) => {
        const message = event.data;
        console.log(message)
        displayMessage("接收到信息：" + message);
      };

      // 监听连接关闭事件
      socket.onclose = () => {
        console.log("Disconnected from server");
      };

      // 发送消息给服务器
      function sendMessage() {
        const messageInput = document.getElementById("messageInput");
        const message = messageInput.value;
        socket.send(message.toString());
        messageInput.value = "";
        displayMessage("User A: " + message);
      }

      // 显示消息在聊天框中
      function displayMessage(message) {
        const chatBox = document.getElementById("chatBox");
        const p = document.createElement("p");
        p.textContent = message.toString();
        chatBox.appendChild(p);
      }
    </script>
  </body>
</html>

node+webSocket模拟简单聊天室

效果

代码