vue中使用websocket通信接收后台数据

前言：

项目中因为有的数据使用分页后数据加载还是很慢，所以考虑使用websocket来解决。后端获取到数据库数据后就依次返回给前端，这样就不需要等分页数据全部获取后才返回。

websocket封装请看我的另一篇博文：（这个扩展性和可维护性好一些）
封装websocket请求-----vue项目实战（完整版）

1、需求概述

点击按钮后才开启websocket连接，然后发送数据给后端（相当于post请求中也是需要传递数据给后端使用），在websocket实例对象的onmessage 函数中能获取到后端返回的数据进行处理渲染。

2、代码

export default {
	data() {
		return {
			websock: null
		}
	},
	destroyed () {
	    //页面销毁时关闭ws连接
	    if(this.websock){
	    	this.websock.close() // 关闭websocket
	    } 
  	},
 	methods: {
	    //初始化weosocket
	    initWebSocket(){
	      if(typeof(WebSocket) === "undefined"){
	        alert("您的浏览器不支持WebSocket")
	        return false
	      }
	      const wsuri = 'ws://*.*.*.*:8081/dns-monitor' // websocket地址
	      this.websock = new WebSocket(wsuri)
	      this.websock.onopen = this.websocketonopen
	      this.websock.onmessage = this.websocketonmessage
	      this.websock.onerror = this.websocketonerror
	      this.websock.onclose = this.websocketclose
	    },
	    //连接成功
	    websocketonopen(){ 
	      console.log('WebSocket连接成功')
	    },
	    //接收后端返回的数据
	    websocketonmessage(e){ 
	      let dataJson = JSON.parse(e.data)
	      console.log(dataJson)
	      // 在这里使用后端返回的数据，对数据进行处理渲染
	    },
	    //连接建立失败重连
	    websocketonerror(e){
	      console.log(`连接失败的信息：`, e)
	      this.initWebSocket() // 连接失败后尝试重新连接
	    },
	    //关闭连接
	    websocketclose(e){ 
	      console.log('断开连接',e)
	    },
	    // 点击按钮
	  	btnClick () {
	  	    // 因为需求是每次点击都是发起不同ws连接，拿到的数据也不一致，所以连接前要先断开上次的连接
	  		if(this.websock){
	       		this.websock.close() // 关闭websocket连接
	      	}      
	        this.initWebSocket() // 初始化weosocket，发起连接
	        // 这里使用定时器是为了等待连接后才发送数据，避免错误
	        setTimeout( () => { 
	           //添加状态判断，当为OPEN时，前端发送消息给后端
	           if (this.websock.readyState === 1) {
	           		// 把后台需要的参数数据传过去
	               let obj = {
		               jobId: 111,
		               token: 'xxxxx',
		               message: 'send ok'
	              }
	         	 //发给后端的数据需要字符串化
	         	 this.websock.send(JSON.stringify(obj))
	       		 }
	      	}, 500)
	  	}
	  }
}

websocket接口数据接收示意图：

3、websocket的几个状态

websocket的几个状态。通常在实例化一个websocket对象之后，客户端就会与服务器进行连接。但是连接的状态是不确定的，于是用readyState属性来进行标识。它有四个值，分别对应不同的状态：

CONNECTING：值为0，表示正在连接；
OPEN：值为1，表示连接成功，可以通信了；
CLOSING：值为2，表示连接正在关闭；
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。