vue3中socket.io使用（取消自动连接）

1、前端下载socket.io：

npm i socket.io-client@4.6.2

官网地址：Socket.IO

2、 vue文件中引入socket.io并与服务端建立连接：

import { io } from "socket.io-client";

const socket = io(import.meta.env.VITE_APP_SOCKET_API, {
  autoConnect: false, // 取消自动连接
  query: {
    auth: '这里可以传递你想要携带的用户信息，字段名可自定义',
  },
});

onMounted(() => {
  socket.connect();
})

3、监听连接成功/失败事件：

// 监听连接成功事件
socket.on("connect", () => {
  if (!socket) {
    socket.disconnect();
    socket.connect();
  }
});

// 监听连接失败事件
socket.on("error", (error) => {
  console.error("Socket连接失败！", error);
  // 在这里调用disconnect方法取消连接
  socket.disconnect();
});

// 监听关闭连接
socket.on("disconnect", () => {
 // 这里根据页面做了监听失败后是否重连的控制，监如果是在index页面则重新连接
  if (route.path === "index") socket.connect();
});

4、成功建立连接后发送&接收消息

// 发送消息
const socketEmits = () => {
    // message是客户端跟服务器端约定的发送消息标识，可以自定义
     socket.emit("message", {
    // 这里是你想要向服务器端发送的内容
    });
});

// （answer同上）接收名为answer的socket消息
socket.on("answer", (data) => {
    console.log(data, "接收到aiAnswer消息");
});