websocket 协议 使用

1、websocket简介

websocket最主要特点是：服务器可以主动给浏览器发送消息，而不是被动接收浏览器请求。

websock协议可以参考：http://www.ruanyifeng.com/blog/2017/05/websocket.html

2、实现代码

（1）websocket.js

let websock;

// 持续连接
function connection(wsuri) {
  websock = new WebSocket(wsuri);

  // 建立连接
  websock.onopen = function(e) {
    console.log('收到服务器握手包.');
    setInterval(function() {
      let agentData = {'name': 'ping', 'message': 'message'}
      websocketsend(agentData)
    }, 30000)
  }

  // 断开连接
  websock.onclose = function(e) {
    console.log('和服务器断开连接! (' + e.code + ')');
  }

  // 连接发生错误
  websock.onerror = function() {
    console.log('websock连接发生错误');
  }
}

// 业务代码发送数据
function sendSock(agentData) {
  console.log('agentData', agentData)

  // 链接成功，可以通信
  if (websock.readyState === websock.OPEN) {

    websocketsend(agentData);
  } else if (websock.readyState === websock.CONNECTING) {

    // 若是正在链接，则等待1s后重新调用
    setTimeout(function() {
      sendSock(agentData);
    }, 1000);
  } else {

    // 若未开启 ，则等待1s后重新调用
    setTimeout(function() {
      sendSock(agentData);
    }, 1000);
  }
}

// 数据发送
function websocketsend(agentData) {
  websock.send(JSON.stringify(agentData));
}

export {connection, sendSock, websock}

（2）业务代码

//注意修改路径
import * as websocket from 'websocket.js' 
//vue mounted时挂在websocket
mounted() {
    websocket.connection(yourUrl)

    // onmessage 用于指定收到服务器数据后的回调函数。
    websocket.websock.onmessage = (e) => {
     //业务处理
    }
  }
methods：{
handleEvent() {
//发送数据
websocket.sendSock(yourParams)}
}

（3）websockt需要服务端配置好服务。