websocket-客户端快速入门

1,115 阅读3分钟

1.背景介绍

WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

webSocket与http协议对比

http

1.http是半双工通信,同一时刻信息流向只能是单向的,需要频繁进行数据交互场景有弊端

2.通信只能有客户端发起,服务器没有能力给客户端发消息,注定服务器发生数据更改不能及时通知到客户端,一般通过轮询,长轮询等实现但是会有延迟,非常占用服务器资源

3.http建立连接需要三次握手,连接是无状态的服务器不需要保存当前会话信息,每次http请求与响应都会发送冗余信息,cookie,和头数据等

webSocket

1.webSocket是一种基于TCP进行全双工通信的协议,并复用HTTP的握手通道,是一种持久化的网络通信协议

2.客户端请求服务器,服务器可以主动推送消息给客户端

3.客户端跟服务器仅需要一次握手,连接就建立起来了

4.数据格式比较轻量,性能开销小,通信高效支持二进制和文本

5.没有同源限制,客户端可以与任意服务器通信

image.png

2.通信原理

客户端

1.申请协议升级Connection: Upgrade:表示要升级协议

2.Upgrade: websocket:表示要升级到websocket协议。

3.Sec-WebSocket-Key:与后面服务端响应首部的Sec-WebSocket-Accept是配套的,提供基本的防护,比如恶意的连接,或者无意的连接

服务端

1.服务端响应协议升级

2.Sec-WebSocket-Accept根据客户端请求首部的Sec-WebSocket-Key计算出来。

第一次通信借用http发送的握手信息,服务器同意就会建立websocket连接,具体可参见下图:

image.png

3.具体应用

WebSocket构造函数

webSocket对象作为一个构造函数,用于新建webSocket实例,执行完下列语句客户端就会与服务器建立连接。

webSocket.readyState

readyState属性返回实例对象的当前状态,共有四种。

  • CONNECTTING:值为0,表示正在连接
  • OPEN:值为1,表示连接成功,可以通信了
  • CLOSING:值为2,表示连接正在关闭
  • CLOSED:值为3,表示连接已经关闭,或者打开连接失败
switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

webSocket.onopen

实例对象的onopen属性,用于指定连接成功后的回调函数。如果要指定多个回调函数,可以使用addEventListener方法。

ws.onopen = function () {
  ws.send('Hello Server!');
}

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

webSocket.onmessage

实例对象的onmessage属性,用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};

ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
});

webSocket.send()

实例对象的send()方法用于向服务器发送数据

ws.send('your message');

webSocket.onclose

实例对象的onclose属性,用于指定连接关闭后的回调函数。

ws.onclose = function(event) {
  console.log('service onclose')
};

webSocket.onerror

连接错误时会继续尝试发起连接

    websocket.onerror = function (error) {
      console.log('onerror', error)
      closeWebsocket()
      setTimeout(() => {
        new WebSocket("ws://localhost:8080");
      }, 30000)
    }

完整例子

var ws = new WebSocket("ws://localhost:8080");

ws.onopen = function(evt) { 
  console.log("websocket connection ..."); 
  ws.send("hello ws!");
};

ws.onmessage = function(evt) {
  console.log( "received message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("websocket closed");
}; 

心跳检测

在实际使用 WebSocket 中,长时间不通消息可能会出现一些连接不稳定的情况,这些未知情况导致的连接中断会影响客户端与服务端之前的通信,为了防止这种的情况的出现,有一种心跳保活的方法:客户端就像心跳一样每隔固定的时间发送一次 ping ,来告诉服务器,我还活着,而服务器也会返回 pong ,来告诉客户端,服务器还活着。ping/pong 其实是一条与业务无关的假消息,也称为心跳包。如下图所示:

image.png