vue项目中websocket使用方法

WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输，接下来请查看下列使用websocket整体代码流程；

websocket整体使用代码：

mounted(){
	this.sleepSocket();
},
methods:{
	//连接websocket
	sleepSocket() {
	  if ("WebSocket" in window) {
	    var ws = "wss://localhost:8080/sleepsocket";//替换您socket连接地址
	    this.websock = new WebSocket(ws);
	    this.websock.onopen = this.websocketonopen;//连接成功后执行的send发送数据的方法
	    this.websock.onerror = this.websocketonerror;//连接失败执行方法
	    this.websock.onmessage = this.websocketonmessage;//接收到服务器发送的数据
	    this.websock.onclose = this.websocketclose;//关闭socket连接
	    this.websocketonopen();
	  } else {
	    // 浏览器不支持 WebSocket
	    console.log("您的浏览器不支持 WebSocket!");
	    this.openNotificationWithIcon(
	      "error",
	      "浏览器",
	      "您的浏览器不支持显示消息请更换",
	      1,
	      1
	    );
	  }
	},
	//  连接建立之后执行send方法发送数据
	websocketonopen() {
	  console.log("sleepwebsocket连接成功");
	  //例子1（发送一段文字）:
	  //this.websocketsend('啦啦啦');
	  //例子2（发送json格式）:
	  var jsonObj = JSON.stringify({
	    id: 1,
		text:'啦啦啦'
	  });
	  this.websocketsend(jsonObj);
	}, 
	//数据接收
	websocketonmessage(e) {
	  console.log("服务器返回:" + e.data);
	  var str = e.data;
	  var strObj = JSON.parse(str);
	  console.log(strObj,'解析服务器的数据格式')
	},
	//数据发送
	websocketsend(Data) {
	  this.websock.send(Data);
	  console.log(`数据发送` + Data);
	},
	//连接失败重新连接
	websocketonerror() {
	    console.log("连接失败重新连接");
	    this.reconnectOne();
	},
	reconnectOne() {
	    //重新连接
		console.log("重新连接");
		var that = this;
		//data中定义lockReconnect为false;
		if (that.lockReconnect) {
		  return;
		}
		that.lockReconnect = true;
		//没连接上会一直重连，设置延迟避免请求过多
		that.timeoutnum && clearTimeout(that.timeoutnum);
		that.timeoutnum = setTimeout(function () {
		  //新连接
		  that.sleepSocket();
		  that.lockReconnect = false;
		  console.log("重新连接");
		}, 10000);
	},
	//关闭连接
	websocketclose(e) {
	  //在这里也可以重新连接
	  console.log("断开连接", e);
	},
	close() {
		this.websock.close(); //关闭websocket
		this.websock.onclose = function (e) {
		  console.log(e); //监听关闭事件
		};
	},
},