vue集成socket.io

 备注：本人socket小白，项目首次用到，不到之处，敬请指正；

---

环境介绍

前端：vue2

前端：socket.io:3.0.10

后端（JAVA）：架包：netty-socketio:1.7.9

一、项目启动触发socket使用步骤（此种网上教程很多）；

可传送至简书大佬写的文章：在vue中使用socket.io - 简书

1、前端包引入：npm  install  socket.io  --S;

2、main.js引入：

import VueSocketIO from 'vue-socket.io'    //引入socket.io

  实例化

 Vue.use(new VueSocketIO({
          debug: true,   //设置为true,控制台可以看到socket.io的状态
          connection:"http://Address:port",

 }));

3、在全局订阅监听;

 this.sockets.subscribe('relogin', (data) => { console.log(data) });

二、单页面触发socket（直接干货）;

        需求还原：本次项目需要使用socket,并且需要在登陆完成后将登录信息传递给后台，如果在全局中使用，无法传递登录参数，导致无法创建通道；自此开始了崩溃之旅，网上教程看了一遍又一遍，大部分都是在main.js中引入，然而并不能满足我现有的需求，经过多方折腾采用以下解决方案；

一、包引入

1、npm  install  socket.io  --S;

2、单页面引入：

​​​​​​​import Vue from "vue";
import VueSocketIO from 'vue-socket.io'

二、单页面中引用（.vue文件中引入）

<script>
    //依赖引入
    import Vue from "vue";
    import VueSocketIO from 'vue-socket.io'
    
    //路由守卫（跟methods同级）；
    beforeRouteEnter (to, from, next) {
		  next();
          //路由守卫无法直接获取到vuex里面存储的userid，需要通过以下方式获取
		  let loginUserId=from.matched[0].instances.default.$store.getters.userid;	
		  console.log(loginUserId);
		  Vue.use(new VueSocketIO({
		    debug: true,
            //此处loginUserId是我需要给后台传递的参数
		    connection: "http://ip:port?loginId="+loginUserId 
		  }));
	},
    
    //sockets（跟methods同级）；    
    sockets:{
		      //连接成功
		      connect: function () {
		        console.log('socket connected')
		      },
			   disconnect(){
			    console.log("断开链接");
			  },
		        //断开重连，直到连接成功
		      reconnect(data){
					this.$socket.emit('connect',1)
				},
		      //连接断开 在此位置会进行多次的重新连接 直到连接成功
		      reconnect(data){
			  	this.$socket.emit('reconnect','')
			  },
		    
		     // 后台定义的事件监听（比如后端给你了一个订阅事件为GetRain） 打印返回数据
		      GetRain(data){
				if(data.code=="200"){
					console.log(data);
				}
		      },
		}
</script>

至此代码部分完成，运行起来就可以监听到socket传送来的数据了。

---