vue使用 vue-socket.io三种方式及踩坑实例解析_vue.js_

npm i vue-socket.io@3.0.10 -S //个人使用了当前版本 

// 全局挂载 // main.js import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true,// 生产环境关闭，打开可在控制台查看socket连接和事件监听的信息 options: { autoConnect: false //创建时是否自动连接，默认关闭，使用时用open开启链接 }, connection: 'http://127.0.0.1:9527' //链接地址 })) 

//1.全局挂载-全局使用 //main.js new Vue({ sockets: { connecting() { console.log('正在连接') }, connect() { console.log('连接成功') }, disconnect() { console.log('断开连接') }, connect_failed() { console.log('连接失败') }, error() { console.log('错误发生，并且无法被其他事件类型所处理') }, reconnecting() { console.log('正在重连') }, reconnect_failed() { console.log('重连失败') }, reconnect() { console.log('重连成功') }, welcome: data => {//全局监听订阅事件，需要与后端约定好 console.log('welcome data', data) } } }) 

//2. 全局挂载-组件内使用 //demo.vue 

 //demo.vue 

//main.js 入口文件全局挂载 // import Vue from 'vue' import router from '@/router' import store from '@/store' import App from './App' import '@/util/socket.js' //使用全局挂载 Vue.config.productionTip = false const saasVue = new Vue({ router, store, i18n, render: h => h(App) }).$mount('#app') window.saasVue = saasVue 

// socket.js 全局方法实现 import Vue from 'vue' import VueSocketIO from 'vue-socket.io' import store from '@/store' import { getHostIp } from '@/api/admin/message' //获取后端动态ip地址 let socketIo, socketListener, socketEmitter if (!getToken()) { const timer = setInterval(() => { console.count() if (!getToken()) return initSocket(getToken()) window.clearInterval(timer) }, 1000) } else { initSocket(getToken()) } function getToken() {//获取登录标识---请修改为自己项目标识 return store.getters.access_token } async function initSocket(token) { const userId = store.getters.userInfo.userId //获取登录标识---请修改为自己项目用户id const ipResult = await getHostIp() if (ipResult.code !== 0) return const { ip, port } = ipResult.data const protocol = window.location.protocol const socketUrl = `${protocol}//${ip}:${port}?userId=${userId}` console.log('socketUrl', socketUrl) //const socketUrl = 'http://127.0.0.1:9527' //本地测试地址---nodejs服务代码放后面 const socket = new VueSocketIO({ debug: process.env.NODE_ENV !== 'production', options: { autoConnect: false //已通过验证，全局使用可默认打开，组件内使用则默认关闭，使用时在打开 }, connection: socketUrl }) const { emitter, io, listener } = socket socketIo = io socketListener = listener socketEmitter = emitter if (process.env.NODE_ENV !== 'production') {// 与socket链接相关全局处理，与后端预定定义事件在组件内订阅使用 io.on('connecting', () => { console.log('socketjs---正在连接') }) io.on('connect', () => { console.log('socketjs---连接成功') }) io.on('disconnect', () => { console.log('socketjs---断开连接') }) io.on('connect_fa
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue中引入路径@的用法及说明_vue.js_
                                                                
下一篇：vue使用websocket概念及示例_vue.js_