极简websocket实时聊天

在线体验链接：http://47.242.53.5:888/

项目git地址：https://gitee.com/xiao-ming-1999/websocket-server.git

实现步骤：

1. 在前端创建WebSocket连接：在Vue组件中使用vue-native-websocket库或原生的WebSocket API来创建WebSocket连接。确保连接到服务器的WebSocket地址和端口。

2. 在前端发送消息：在Vue组件中通过WebSocket连接发送用户输入的消息到服务器。可以通过表单提交、按钮点击等方式触发发送操作，并使用WebSocket的send方法将消息发送给服务器。

3. 在后端处理WebSocket连接：在服务器端使用Node.js和Express或其他后端框架来处理WebSocket连接请求，并维护连接状态。

4. 在后端接收和广播消息：在服务器端监听WebSocket连接的message事件，当接收到一条新消息时，将其广播给所有连接的客户端。

5. 在前端接收和显示消息：在Vue组件中监听WebSocket的message事件，当接收到新消息时，在页面上更新聊天消息列表或对话框。

前端代码：

 后端代码

const express = require("express");
const WebSocket = require("ws");

const app = express();

app.get("/", (req, res) => {
  res.send("Hello, World!"); // 发送响应给客户端
});

const server = app.listen(3008, () => {
  console.log("Server is running on http://47.242.53.5:3008");
});

const wss = new WebSocket.Server({ server });
const clients = [];

wss.on("connection", (ws) => {
  // 服务器端监听WebSocket连接的message事件，当接收到一条新消息时，将其广播给所有连接的客户端。
  ws.on("message", (message) => {
    const parsedMessage = JSON.parse(message);
    console.log(message, "message");
    if (parsedMessage.action === "getUserId") {
      ws.userId = generateUserId(); // 分配用户标识符
      //   ws.send(JSON.stringify({ userId: ws.userId }));
      return;
    }

    parsedMessage.sender = ws.userId;
    const broadcastMessage = JSON.stringify(parsedMessage);
    // 广播消息给所有连接的客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(broadcastMessage);
      }
    });
  });

  ws.on("close", () => {
    // 移除关闭的客户端连接
    clients.splice(clients.indexOf(ws), 1);
  });
});
// 生成用户昵称
function generateUserId() {
  return Math.random().toString(36).substr(2, 9);
}