极简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事件，当接收到新消息时，在页面上更新聊天消息列表或对话框。

前端代码：

<template>
  <div class="chat-box">
    <h2>websocket-chat</h2>
    <ul>
      <li
        v-for="(message, index) in messages"
        :key="index"
        :style="{ background: '#' + message.bgColor }"
        class="message-item"
      >
        <p>{{ message.sender }}:{{ message.text }}</p>
      </li>
    </ul>

    <div class="chat-btn">
      <van-field
        v-model="newMessage"
        center
        clearable
        placeholder="请随意输入信息"
        @keydown.enter="sendMessage"
      >
        <template #button>
          <van-button type="primary" @click="sendMessage">发送</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
// const randomColor2 = Math.floor(Math.random() * 16777215).toString(16);
export default {
  name: "clockIn",
  data() {
    return {
      messages: [],
      newMessage: "",
      userId: Date.now(),
      randColor: randomColor,
    };
  },
  mounted() {
    // 监听WebSocket的message事件，当接收到新消息时，在页面上更新聊天消息列表或对话框。
    this.$socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
      console.log(this.messages, "this.messages");
    };

    this.$socket.onopen = () => {
      this.$socket.send(JSON.stringify({ action: "getUserId" }));
    };
  },
  methods: {
    sendMessage() {
      const message = {
        id: this.userId,
        text: this.newMessage,
        bgColor: this.randColor,
      };
      // this.messages.push(this.newMessage);
      this.$socket.send(JSON.stringify(message));
      this.newMessage = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.chat-box {
  height: 100vh;
  overflow-y: auto;
  padding: 50px 0;

  h2 {
    position: fixed;
    top: 0;
    background-color: #07c160;
    font-weight: 700;
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
}

.chat-btn {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  ::v-deep .van-cell {
    padding-right: 0;
  }
}

.message-item {
  width: 100%;
  // height: 40px;
  // line-height: 40px;

  // white-space: pre-wrap;
}
</style>

 后端代码

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);
}