WebSocket在Client的基本使用

Websocket是一种网络通信协议，建立浏览器和服务器双向互通的渠道实现实时数据传输，解决了轮询的鸡肋。

//new一个websocket实例，即打开连接
const ws = new WebSocket('ws://localhost:8080/可以带请求参数');
//ws的基本回调函数
ws.onopen = function(){};//连接成功
ws.onerror = function(){};//连接出现错误
ws.onmessage = function(event){ console.log(event.data) };//接收到数据，注意数据类型
ws.onclose= function(){};//连接关闭
//若要同时回调多个函数，使用监听ws.addEventListener
ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
  ws.send('I am client');
});
//关闭连接
ws.close();

// 发送数据ws.send()

//websocket发送数据
//普通格式数据
ws.send('your message');

//发送blob文件
const file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);

//发送 ArrayBuffer 对象的例子
const img = canvas_context.getImageData(0, 0, 400, 320);
const binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

// ws.bufferedAmount属性

//ws.bufferedAmount属性，用于判断当前二进制数据是否发送完毕
if(ws.bufferedAmount===0){
	 console.log('发送完毕')
}

// ws.readyState 用于判断当前状态
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

若要在全局使用websockt

1. 建立一个global.js文件，并暴露出来

export default {
  ws: {},
  setWs: function(newWs) {
    this.ws = newWs
    this.ws.onmessage = this.websocketOnmessage
  },
  websocketOnmessage(event) {
    console.log(event)
  },
}

2. 在main.js引入该文件并挂载到全局

import global from './assets/js/global.js'
Vue.prototype.global = global

3. 在页面中使用

that.global.setApp(ws);

参考文章：阮一峰 websocket教程