websocket + vue 实现实时通信

websocket原理

目前，我们有许多数据需要实时获取，由于数据不断改变，之前我使用的方法是通过 setInterval去定时请求，但是由于服务器请求过来的数据需要一定的时间，导致一个请求还没有完成，定时器又开始了另外一个请求，导致请求堆积，然后这个请求就一直处于pending状态（可能就挂掉了），好吧，既然这种不行，那就换一种方法，采用了setTimeout在当前请求数据返回后，再发起新的请求，但是，实时性不是那么强了，最后再采取的websocket。

上图可以对比一下两个请求之间的区别，ajax轮循使用的是一问一答，每次建立请求后发送或者接收数据后，连接通道就自动关闭了，这样轮询次数多了，比较浪费带宽资源。

ws是H5提供的在单个TCP协议上进行的全双工协议，就是服务器和客户端可以互相进行通信。ws只需要在完成一次握手以后，两者间久可建立持久的连接，并进行双向数据传输。

vue+websocket 客户端的实现

	mounted(){ 
		this.initWebSocket(); //页面渲染的时候，对ws进行初始化
	},
		methods:{
			initWebSocket () { 
				this.websock = new WebSocket('ws://localhost:8081');//这个连接ws://固定，后面的根据自己的IP和端口进行改变，我设置监听的就是8081
				this.websock.onmessage = this.websocketonmessage
				this.websock.onerror = this.websocketonerror
				this.websock.onopen = this.websocketonopen
				this.websock.onclose = this.websocketclose
			},
			websocketonopen () { // 连接建立之后执行send方法发送数据，这个和自己的后端沟通好需要传什么数据，我的是要进行token验证
				let token = sessionStorage.getItem('token'); 
				let data = {
					type: "REGISTER",
					data: {token:token}
				}
               // this.websock.send(JSON.stringify(data));
               this.websock.send("connection");
			},
			websocketonerror () { //连接错误
				console.log( 'WebSocket连接失败')
			},
			websocketonmessage (e) { // 数据接收
				console.log(JSON.parse(e.data));
			},
			websocketclose (e) {  // 关闭连接
				console.log('已关闭连接', e)
			},
		},
		destroyed () {
			this.websock.close() // 页面销毁后断开websocket连接
		}

websocket 服务端的实现

因为我们项目是前后端分离开发的，所以有些接口就需要自己来测试啦，这里就自己建立一个服务器端，来进行数据推送吧。

创建一个server.js

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8081 });//设置端口

wss.on('connection', function connection(ws) {//对‘conntection’这个串进行监听，当收到这个后，执行下面的操作
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });
    
  //下面是我写的测试数据，按需取吧
  let i = 0;
  let j = 0;
  setInterval(()=>{ //因为模拟实时推送数据，所以用了一个定时器推送
    if(++i >= 5){
      i = i%5;
    }
    let x = parseInt(Math.random()*5+1);
    let data = {"pos_y":400+x,"pos_z":0,"pos_x":300+x,"is_online":true,"team":"红队","userName":"测试00"+i,"userid":"1"+i};
     let datas = {"msg":"成功","code":"000000","data":data,"type":"LOCATION"};
    }     
    ws.send(JSON.stringify(datas)); //发送数据
  },1000);
 
});

然后要启动服务，记得安装ws的包哦，

$ npm install websocket

然后启动服务就可以了：

​ node server.js

这样在连接创建成功后，就可以收到服务器推送的数据了。

最后，最重要的是：我用setInterval定时器请求接口，有时候接口请求的时间会越来越长，最后就处于 pending的状态的
个人理解是对服务器端造成负担导致没有数据返回，但是个中原理还不是很明白，要是有知道的，可以一起讨论一下