websocket的实践

最近接触到 websocket，由于之前并没有使用过，所以网上百度一番，最后还是看了一遍 websocket的介绍

上面文章原理上的都说的很明白，所以我就提取出我自己要用的小 demo 来，下面分别是属性，事件，方法的介绍，为了方便查看故将上面介绍中的顺便拿过来。

 

属性

readyState (只读属性 readyState 表示连接状态)

0 - 表示连接尚未建立。

1 - 表示连接已建立，可以进行通信。

2 - 表示连接正在进行关闭。

3 - 表示连接已经关闭或者连接不能打开。

事件

Socket.onopen 连接建立时触发

Socket.onmessage 客户端接收服务端数据时触发

Socket.onerror 通信发生错误时触发

Socket.onclose 连接关闭时触发

方法

Socket.send() 使用连接发送数据

Socket.close() 关闭连接

 

这样我们就可以一边看着下面代码，也可以看着这些方法事件等来修改 demo。

 

var ws
var url = "ws://xxxx"
function WebSocketTest() {
  if ("WebSocket" in window) {
    // 打开一个 web socket
    ws = new WebSocket(url);
    ws.onopen = function() {
      // 根据后台要求拼接好对应的 json 数据(不一定是 json, 看后台规定)
      var json={
        "test": "test"
      }
      console.log('WebSocket 第' + n + '次请求')
      // Web Socket 已连接上，使用 send() 方法发送数据
      ws.send(JSON.stringify(json));
      console.log('已连接上 WebSocket')
      // 模拟断开 => 可以开启下面代码模拟服务器断开时重新请求连接的效果
      // setTimeout(function(){
      //   ws.onclose()
      // }, 8000)
    };
    ws.onmessage = function (ev) {
      var json = ev.data;
      console.log('这里是接收到服务器发送的数据：' + json)
    };
    ws.onclose = function() {
      // 关闭 websocket
      console.log("连接已关闭...")
      // 当监听到 websocket 连接断开时,重新连接
      reconnect()
    };
  } else {
     // 浏览器不支持 WebSocket
     alert("您的浏览器不支持 WebSocket!");
   }
}
var timer = null
// 重新连接
function reconnect () {
  try {
    // 将上一次的定时器清除
    timer && clearTimeout(timer)
    // 这里将尝试连接
    WebSocketTest()
  } catch {
    // 当连接失败时延迟3秒后再次重新请求连接
    timer = setTimeout(function (){
      reconnect()
    }, 3000)
  }
}
// 页面关闭时触发
window.onunload = function () {
  if (ws) {
    ws.close()
  }
}
// 页面刷新时触发
window.onbeforeunload = function () {
  if (ws) {
    ws.close()
  }
}