vue3+node.js实现最简单的一对一单聊websocket

首先需要在后端下载ws包，也可以下载其他的websocket包

npm install ws

前端封装websocket

class WebSocketClient {
    constructor(url) {
      this.url = url;  //用于指定 WebSocket 的连接地址
      this.socket = null;  //用于存储 WebSocket 实例
      this.isConnected = false;  //用于标识 WebSocket 是否已连接
      this.onMessageCallback = null;  //用于存储消息回调函数。
    }
  
    connect() {
      return new Promise((resolve, reject) => {
        this.socket = new WebSocket(this.url);
  
        this.socket.onopen = () => {
          console.log('WebSocket 连接成功');
          this.isConnected = true;
          resolve();
        };
  
        this.socket.onmessage = (event) => {
          if (this.onMessageCallback) {
            this.onMessageCallback(event.data);
          }
        };
  
        this.socket.onerror = (error) => {
          console.error('WebSocket 错误:', error);
          reject(error);
        };
  
        this.socket.onclose = () => {
          console.log('WebSocket 连接已关闭');
          this.isConnected = false;
        };
      });
    }
  
    //发送消息
    sendMessage(message) {
      if (this.isConnected) {
        this.socket.send(message);
      } else {
        console.error('WebSocket 连接未建立');
      }
    }
  
    //接收消息回调函数
    onMessage(callback) {
      this.onMessageCallback = callback;
    }
  
    //关闭消息
    close() {
      if (this.isConnected) {
        this.socket.close();
      } else {
        console.error('WebSocket 连接未建立');
      }
    }
  }
  
  export default WebSocketClient;

在模板中使用

import {onMounted, ref} from "vue"
import WebSocketClient from "../socket/websocket"

//连接websocket
const webSocket = new WebSocketClient('ws://localhost:8080');

onMounted(()=>{
    //连接
    webSocket.connect()
    //接收
    webSocket.onMessage(handleReceivedMessage);
})

//接收所有消息
var list = ref([])
const handleReceivedMessage = (data) => {
      list.value = JSON.parse(data)
    };

//发送消息    
var text = ref("")
function fa(){
    var obj = {
        cid:haha.value, //身份的标识符
        text:text.value
      }
    webSocket.sendMessage(JSON.stringify(obj))
    text.value = ""
    webSocket.connect()
}

node.js后端代码

var express = require('express');
var router = express.Router();
const WebSocket = require('ws');
const {indexModel} = require("../mongoose/db")

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


wss.on('connection',async client => {
  console.log("客户端连接成功");
  // 监听客户端有消息发送过来：
  client.on('message',async message => {
    var msg = JSON.parse(message)
    //加入数据库
    indexModel.create(msg)
  })

    var data = await indexModel.find()
    // wsServe.clients中存所有当前连接的客户端，可以用来做广播
    wss.clients.forEach(itemClient => {
       itemClient.send(JSON.stringify(data))
    })
 
})

 ok啦！！！