使用 vue-3-socket

// 引入相关依赖
import VueSocketIO from "vue-3-socket.io";
import SocketIO from "socket.io-client";

// 创建一个 Socket 连接
const socketio = new VueSocketIO({
  debug: false, // 布尔值，控制是否打印调试信息
  // SocketIO库的客户端连接对象，指定连接服务端的地址和传输方式
  connection: SocketIO("http://localhost:3000", {
    transports: ["websocket"],
  }),
  // 额外添加的请求头信息
  extraHeaders: { "Access-Control-Allow-Origin": "*" },
  // SocketIO库的配置项对象，用于控制自动连接
  options: {
    autoConnect: false,
  },
});

注：“http://localhost:3000”，该地址端口是对应后面配置服务端时所开放的端口。

将 socketio 引入app

const app = createApp(App);
app.use(socketio)

二、完成服务端的配置代码

1、创建一个 node.js 项目

会的直接跳过到下一步

具体如下：

① 先新建一个项目文件夹