webSocket使用总结

WebSocket是HTML5下一种新的协议，可实现浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。

原理：

1. websocket约定了一个通信的规范，通过握手机制，客户端和服务器之间建立一个类似tcp的连接，从而实现双方通讯
2. websocket不属于http无状态协议，是一种协议名为"ws"的协议

封装的webSocket.js源码

const webSocket = null;
const socketOpen = false;
const websocktUrl = null;
// 发送消息
export const doSend = (message) => {
  if (socketOpen) {
    webSocket.send(message)
  }
}
// WS数据接收统一处理
export function onmessageWS(e) {
  window.dispatchEvent(new CustomEvent('onmessageWS', {//发送接收数据回调，方便监听
    detail: {
      data: e
    }
  }))
}

// WS重新连接成功
export function onOpenWS(e) {
  console.log("连接成功！", e);
  socketOpen = true
  window.dispatchEvent(new CustomEvent('onOpenWS', {
    detail: {
      data: e
    }
  }))
}

// 初始化websocket
export const contactSocket = (url) => {
  websocktUrl = url;
  if ("WebSocket" in window) {
    webSocket = new WebSocket(websocktUrl);
    webSocket.onopen = function () {
      console.log("连接成功！");
      socketOpen = true
    };//链接成功
    // 接收信息
    webSocket.onmessage = onmessageWS;
    webSocket.onclose = function () {
      console.log("连接关闭！");
      webSocket = new WebSocket(websocktUrl);
      webSocket.onopen = onOpenWS;
    };
    webSocket.onerror = function () {
      console.log("连接异常！");
    };
  }
}

在使用的页码引入使用

import { contactSocket, doSend } from '@/utils/websocket';


// 初始化websocket
contactSocket(this.$http.ws("/ws"))//传入通讯链接，进行连接初始化
// 发送消息内容
setTimeout(() => {
  doSend('data:' + '发送服务器')
}, 1000)//加一定的延时，因初始化需要时间


//进入页面监听封装js中dispatch的方法
window.addEventListener('onmessageWS', this.getDataFunc)//监听接受消息
window.addEventListener('onOpenWS', this.getDataFunc)//监听重新连接成功

//离开页面时移除监听
window.removeEventListener('onmessageWS', this.getDataFunc)
window.removeEventListener('onOpenWS', this.getDataFunc)