websocket-浅析

概述

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，一直保持链接没有断开。

api 说明

属性

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 连接。