socket.io-client vue3实现

// 新建js 以插件形式引入
import io from 'socket.io-client'
export default {
  install: (app, { connection, options }) => {
    var socket = io(connection, options)
    app.config.globalProperties.$socket = socket
    app.provide('socket', socket)
  }
}

// main.js引入新建的js
// 配置
const socketOptions = {
  autoConnect: true,  // 自动连接
  transports: ['websocket'], // 指定为websocket连接
  reconnect: true,
  reconnectionAttempts: 5 // 重连次数
}
app.use(SocketIO, {
  connection: 'ws://127.0.0.1:19967',
  options: socketOptions
})

<script lang="ts" setup>
import { inject } from "vue";
// 使用
// 事件监听
const socket = inject("socket")
socket.on("connect", (res) => {
  console.log("连接成功 ", res);
});
socket.on("msg", (res) => {
  console.log("连接成功 ", res);
});
// 消息推送
socket.emit('msgData', {
  token: 'msgData'
})
// msg, msgData为后台自定义事件
</script >