vue3封装socket.io全局使用

安装

$ npm i socket.io-client --save

创建socket-io.js

import {ref} from 'vue'
const socket =ref(null)
let global_callback = null
import { io } from "socket.io-client";
export const initWebSocket=(url)=>{
    socket.value = io(url,{ transports: ["websocket"] });
    socket.value.on('message', (e) => {
      socketMessage(e)
    })
    socket.value.on('connection',()=>{
      console.log("连接成功")
    })
    socket.value.on('disconnection',()=>{
      socket.value.close()
    })
}
const socketMessage=(e)=>{
    if(global_callback){
      global_callback(e)
    }
}
//数据发送
//注意：发送格式自己定义
const socketSendMessage=(option)=>{
    socket.value.emit(option.name,option.value);
}
//实际调用的方法
export const send=(option,callback)=>{
    global_callback = callback
    socketSendMessage(option)
}

main.js 引入socket-io，并且初始化，全局挂载

import * as socket from './socket-io'
socket.initWebSocket('ws://127.0.0.1:7001')
app.config.globalProperties.socket = socket

页面中使用socket

<script setup>
import {getCurrentInstance} from 'vue'
const { socket } = getCurrentInstance().appContext.config.globalProperties;
const getMessage=(e)=>{
  console.log(e) 
}
socket.send({name:"ping",value:"消息内容"},getMessage)
</script>