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

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了

posted on   IT丶Hatcher  阅读(1027)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示