websocket 协议 使用

1、websocket简介

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

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

 

 

WebSocket 使用ws或wss协议（非http协议），Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。

 

 

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需要服务端配置好服务。