【Websocket】、【vue】封装websocket并将方法注入window中

背景：在vue中使用websocket其实非常简单，建立对话，发送消息，断开连接，如果连接失败需要接收错误信息并断开连接。

那么先来简单介绍一下在vue中使用websocket的代码片，然后再介绍如何将websocket封装到外部在window中全局调用。

一、websokcet简介

1.websocket是一个基于在TCP的全双工通信协议，它的协议为ws或者wss，即对应http协议和https协议。
2.websocket只需要建立一次连接，即可收发消息，直到断开连接。

二、在vue中使用websocket

在一个.vue文件中，定义方法

handleWebsocket(){
	let ws = new WebSocket("ws://xxx.xxx.x.xxx:9090")//ws根据需要更改
	//打开websocket
	ws.onopen = (e) => {
		console.log('open------------------',e)
		//打开后发送数据，需要写在open里，否则在对话没有打开之前无法执行send
		let data = {
			'op':'message'
		}
		ws.send(JSON.stringify(data)) //send括号中的内容可以根据实际情况进行更改
	}
	//接收消息，e为接收到的消息，一般是存在e.data中，可以打印出来看一下e中有什么
	ws.onmessage = (e) => {
		console.log('message----------------',e)
		console.log(JSON.parse(e.data))
	}
	//错误回调，如遇到错误则让连接自动关闭
	ws.onerror = (e) => {
		ws.close()
		console.log('建立连接失败--------------',e)
	}
}

三、将websocket封装在js中并保存与window中，在.vue页面中调用

1.在项目中新建一个工具文件，我是存放于src下新建的util的文件夹中，起名为websocket.js

websocket.js

	var websocketStore = {}  //定义一个空的对象
	websocketStore.data = ""//存放接收到数据
	websocketStore.ws = "" //存储ws
	// 初始化建立连接
	websocketStore.initWebsocket = () => {
    	websocketStore.ws = new WebSocket("ws://xxx.xxx.x.xxx:9090");
    	websocketStore.ws.onopen = function (event) {
        	console.log("open...------------------------------------------");
        	console.log(event);
        	let a = {
            	"op": "subscribe"
        	}
        	websocketStore.ws.send(JSON.stringify(a))
    	};

    	websocketStore.ws.onmessage = (e) => {
        	console.log("message===============")
        	let data = e.data
        	data = JSON.parse(data)
        	websocketStore.data = data
    	}
    	websocketStore.ws.onerror = function (event) {
        	console.log("建立连接--失败");
        	//关闭连接
        	websocketStore.ws.close();
    	};
	}
	//发送消息并接受（这里是如果有多个消息需要发送才去定义的一个方法）
	websocketStore.sendMsg = (e) => {
    	websocketStore.ws.send(e)
    	websocketStore.ws.onmessage = (e) => {
        	console.log("message...");
        	console.log(e)
    	}
	}
	//断开连接（如果需要在某个实际情况下需要手动断开连接，比如页面销毁，页面关闭等需要去触发一次点开连接定义的方法）
	websocketStore.handleOff = () => {
    	websocketStore.ws.close();
    	console.log("close-=-=--=-=-=-=-=-=")
    	websocketStore.data=""
	}
	export default websocketStore;

2.在index.vue中将webswocket.js注册到window中

即在项目最开始初始化的时候注册
1.在script中引入websocket

import websocketStore from '../utils/websocket';

2.在index.vue的created中写下如下代码

created() {
  window.websocketStore = websocketStore;
},

3.使用websocket

在需要使用websocket的.vue页面使用，代码如下

//点击按钮连接
connectLine(){
	window.websocketStore.initWebsocket(); //建立websocket连接并发送消息，initWebsocket方法在websocket.js文件中定义，可以根据自己的需求进行修改
	let data = window.websocket.data // data为websocket中请求回来返回的data
}
//手动断开连接
turnOffLine(){
	window.websocketStore.handleOff()
}

注意：
服务端如果在建立连接后轮询发消息，那么在websocket.js中onmessage方法中可以打印出轮询的消息，如果需要在页面中使用，可以在.vue页面中使用定时器轮询拿onmessage存储的消息，或者直接在.vue页面中使用websocket，无需再声明一个js文件。如何使用，根据你的情况而定。