526互联

客户端简单使用socket.io---vue3全局挂载

发布时间 2023-10-09 15:03:58作者: IT丶Hatcher

socket.io官网：https://socket.io/
使用前要先安装socket.io

npm i socket.io

socketIO.js

import io from 'socket.io-client'
export default {
    install: (app) => {
      if(window.localStorage.getItem('access_token')){
        const socket = io(process.env.VUE_APP_SOCKETURL, {
          query: {
            "authorization": window.localStorage.getItem('access_token'),
            "accesskeyid": ""
          },
          transports: ["websocket"],
          reconnection:false 
        })
        socket.on('connect', data => {
          console.log("连接成功", data);
        });
        socket.on('connecting', data => {
          console.log("正在连接", data);
        });
        socket.on('disconnect', data => {
          console.log("断开连接", data);
        });
        socket.on('connect_failed', data => {
          console.log("连接失败", data);
        });
        socket.on('error', data => {
          console.log("错误", data);
        });
        socket.on('reconnect_failed', data => {
          console.log("重连失败", data);
        });
        socket.on('reconnect', data => {
          console.log("成功重连", data);
        });
        socket.on('reconnecting', data => {
          console.log("正在重连", data);
        });
        socket.pingInterval = 60000;
      app.config.globalProperties.$socket = socket
      app.provide('socket', socket)
      }

    }
}

main.js

import socketIO from './libs/socketIO'
//在登录之后
app.use(socketIO)

组件中使用:

import  { inject } from "vue"

setup(){
const socket = inject('socket')
}

就可以正常使用-socket了