websocket-浅析

概述

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

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

ajax轮询和 websocket 连接示意图

image.png

握手连接

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

web端的请求头部：

web端websocket请求链接头部

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

image.png

2. 紧接着服务端返回 101

image.png

字段说明

• 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)
      }

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

服务端向客户端发送消息 {"type":"nick","message":"\346\226\260\347\224\250\346\210\267:999"}
服务端代码：
通过node 起的websocket服务，端口为8181，在接收到客户端的消息后，发送一条消息给客户端： {"type":"nick","message":"\346\226\260\347\224\250\346\210\267: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
            }));
        }
    })
  }
});

image.png

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

api说明

属性

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

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

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

事件

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

方法

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

浏览器支持情况

image.png

小结

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