websocket-浅析

jiezi

5 年前

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 JS 中创建 WebSocket 后，会有一个 HTTP 请求发向浏览器以发起请求。在取得服务器响应后，建立的连接会使用 HTTP 升级将 HTTP 协议转换为 WebSocket 协议。

ajax 轮询和 websocket 连接示意图

WebSocket 是应用层协议，是 TCP/IP 协议的子集，通过 HTTP/1.1 协议的 101 状态码进行握手。
WebSocket 协议的建立需要先借助 HTTP 协议，在服务器返回 101 状态码之后，就可以进行 websocket 全双工双向通信了。

web 端的请求头部：

1. 首先浏览器发送 http 的 get 请求
客户端端口 60992 服务端端口 8181

2. 紧接着服务端返回 101

字段说明

Connection 必须设置 Upgrade。
Upgrade 字段必须设置 Websocket。
Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA- 1 的信息摘要。把“Sec-WebSocket-Key”加上一个特殊字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA- 1 摘要，之后进行 BASE-64 编码，将结果做为“Sec-WebSocket-Accept”头的值，返回给客户端。如此操作，可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。
Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均应当弃用。
Origin 字段是可选的，通常用来表示在浏览器中发起此 Websocket 连接所在的页面，类似于 Referer。但是，与 Referer 不同的是，Origin 只包含了协议和主机名称。
其他一些定义在 HTTP 协议中的字段，如 Cookie 等，也可以在 Websocket 中使用。

客户端向服务端发送消息 nick 999

客户端代码：
简单的创建 websocket 连接，连接成功后发送一条消息，内容为 nick 999

    var nick = getQueryString('nick')||'江芊'
    var url = 'ws://localhost:8181/'
      var Socket = new WebSocket(url);
      Socket.onopen = function(evt) {console.log('open', evt)
        Socket.send('nick' + nick)
      }
      Socket.onclose = function(evt){console.log('close', evt)
      }
      Socket.onmessage = function(evt){console.log('message', evt)
        var data = JSON.parse(evt.data)
        console.log(data)
        updataMsg(data)
      }
      Socket.onerror = function(evt){console.log('error', evt)
      }

服务端向客户端发送消息 {“type”:”nick”,”message”:”346226260347224250346210267:999″}
服务端代码：
通过 node 起的 websocket 服务，端口为 8181，在接收到客户端的消息后，发送一条消息给客户端：{“type”:”nick”,”message”:”346226260347224250346210267:999″}

var WebSocketServer = require('ws').Server;

var wss = new WebSocketServer({port: 8181});
var clients = []
var id = 0
wss.on('connection', function (ws) {console.log('client connected');
  clients.push({
    id: ++id,
    ws: ws
  })

  ws.on('message', function (message) {console.log('message', message);
    if(message.indexOf('nick') === 0) {let nickname_array = message.split(' ');
      if(nickname_array.length >= 2) {broadcastSend("nick", '新用户:'+nickname_array[1]);
      }
    } else if(message.indexOf('PRIVMSG') === 0) {var msglist = message.split(' ')
        broadcastSend("message", msglist[1]);
    }
  });
  function broadcastSend(type, message) {clients.forEach(function(v, i) {if(v.ws.readyState === ws.OPEN) {
            v.ws.send(JSON.stringify({
                "type": type,
                "message": message
            }));
        }
    })
  }
});

可以看出在 websocket 发送消息的连接传输中，客户端端口还是为 60992，服务端还是为 8181，一直保持链接没有断开。

属性

readyState
只读属性 readyState 表示连接状态，可以是以下值：

0 – 表示连接尚未建立。

1 – 表示连接已建立，可以进行通信。
2 – 表示连接正在进行关闭。
3 – 表示连接已经关闭或者连接不能打开

bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数

事件

open – 连接建立时触发
message – 客户端接收服务端数据时触发
error – 通信发生错误时触发
close – 连接关闭时触发

方法

send – 使用连接发送数据
close – 关闭连接

1、websocket 只有一次握手，且是基于 http 的 get 请求实现。
2、websocket 客户端和服务端传输消息只能是字符串。
3、websocket 为长连接，需要手动断开，业务上处理聊天时，可以通过添加心跳来更新有效的连接。
4、ws 连接为 tcp 连接，wss 为 tls 连接。

websocket-浅析

概述

握手连接

字段说明

传输消息

api 说明

属性

事件

方法

浏览器支持情况

小结