websocket 浅析

概述

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

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

ajax轮询和 websocket 连接示意图
websocket 浅析

握手连接

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

web端的请求头部:
websocket 浅析

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

2. 紧接着服务端返回 101
websocket 浅析

字段说明
  • 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)
      }

websocket 浅析

服务端向客户端发送消息 {"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 浅析

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

api说明

属性

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

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

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

事件
  • open - 连接建立时触发
  • message - 客户端接收服务端数据时触发
  • error - 通信发生错误时触发
  • close - 连接关闭时触发
方法
  • send - 使用连接发送数据
  • close - 关闭连接

浏览器支持情况

websocket 浅析

小结

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

相关推荐