一文探究web实时通讯方案并深刻websocket原理与应用

背景

在最近的项目中，有一个灯态数据展现的需求，要求是实时展现各组灯的灯色与倒计时。在技术层面就是延时要控制到很是低。

对于实时类信息获取，咱们通常会有4种方案：

• 轮询，浏览器的定时器发起http请求
• 长轮询(Comet)，http1.1支持的由浏览器发起的长轮询
• websocket，浏览器与后端服务器创建websocket链接，双工（双向）通讯
• SSE（Server-Sent Events），基于HTTP的html5新特性，服务器推送，半双工通讯模型

ps：http2.0中有一个服务器推送不是实时需求的方案，这个特性是服务端根据客户端的请求，提早返回多个响应，推送额外的资源给客户端。若是一个请求是由你的主页发送的，服务器可能会响应主页内容、logo以及样式表，由于他知道客户端会用到这些东西。这样不但减轻了数据传送冗余步骤，也加快了页面响应的速度，提升了用户体验。

基于 Flash的socket实现逐渐淘汰，不在考虑范围内。

如下文字版本demo是参考知乎用户@Ovear的回答，推荐你们看下原文，顺便看下该问题的其余回答：www.zhihu.com/question/20…

轮询

轮询是指客户端定时向服务器发送ajax请求，服务器接到请求后立刻返回响应信息并关闭链接。

这个是基于“分布式、无状态、基于TCP的请求/响应式”的http协议的。

文字demo

客户端：啦啦啦，有没有新信息(Request)
服务端：没有（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：没有。。（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：你好烦啊，没有啊。。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：好啦好啦，有啦给你。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：。。。。。没。。。。没。。。没有（Response） ---- loop
复制代码

代码demo

<script type="text/javascript">
    //前端Ajax持续调用服务端，称为Ajax轮询技术
    var getting = {
        url:'server.php',
        dataType:'json',
        success:function(res) {
            console.log(res);
            $.ajax(getting); //关键在这里，回调函数内再次请求Ajax
        }        
        //当请求时间过长（默认为60秒），就再次调用ajax长轮询
        error:function(res){
            $.ajax($getting);
        }
    };
    $.ajax(getting);
</script>
复制代码

Comet长轮询，一种hack技术

客户端向服务器发送Ajax请求，服务器接到请求后hold住链接，直到有新消息才返回响应信息并关闭链接，客户端处理完响应信息后再向服务器发送新的请求。

Comet的实现主要有两种方式，基于Ajax的长轮询（long-polling）方式和基于 Iframe 及 htmlfile 的流（http streaming）方式。

Ajax的长轮询:

基于Iframe的流:

在页面中嵌入一个隐藏的iframe,而后让这个iframe的src属性指向咱们请求的一个服务端地址，而且为了数据更新，咱们将页面上数据更新操做封装为一个js函数，将函数名当作参数传递到这个地址当中。

服务端收到请求后解析地址取出参数（客户端js函数调用名），每当有数据更新的时候，返回对客户端函数的调用，而且将要跟新的数据以js函数的参数填入到返回内容当中，例如返回“<script type="text/javascript">update("data")</script>”这样一个字符串，意味着以data为参数调用客户端update函数进行客户端view更新。

文字demo

客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
服务端：额。。 等待到有消息的时候。。来 给你（Response）
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop
复制代码

代码demo

<script type="text/javascript">
    //前端Ajax持续调用服务端，称为Ajax轮询技术
    var getting = {
        url:'server.php',
        dataType:'json',
        success:function(res) {
            console.log(res);
            $.ajax(getting); //关键在这里，回调函数内再次请求Ajax
        }        
        //当请求时间过长（默认为60秒），就再次调用ajax长轮询
        error:function(res){
            $.ajax($getting);
        }
    };
    $.ajax(getting);
</script>
复制代码

websocket

文字demo

客户端：啦啦啦，我要创建Websocket协议，须要的服务：chat，Websocket协议版本：17（HTTP Request）
服务端：ok，确认，已升级为Websocket协议（HTTP Protocols Switched）
客户端：麻烦你有信息的时候推送给我噢。。
服务端：ok，有的时候会告诉你的。
服务端：balabalabalabala
服务端：balabalabalabala
服务端：哈哈哈哈哈啊哈哈哈哈
客户端：麻烦你有信息的时候推送给我噢。。
服务端：笑死我了哈哈哈哈哈哈哈
复制代码

代码demo

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function (evt) {
    console.log("Connection open ...");
    ws.send("Hello WebSockets!");
};

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

ws.onclose = function (evt) {
    console.log("Connection closed.");
};
复制代码

SSE(Server-Sent Event)

所谓SSE，就是浏览器向服务器发送一个HTTP请求，而后服务器不断单向地向浏览器推送“信息”（message）。这种信息在格式上很简单、固定，就是“信息”加上前缀“data: ”，而后以“\n\n”结尾。

SSE 是一种仅使用 HTTP 传送异步消息的 HTML5 标准。不一样于 WebSocket，SSE 不须要在后端建立服务器套接字。

后端响应需加入头信息：response.headers["Content-Type"] = "text/event-stream"。

支持的事件有：

onopen 当通往服务器的链接被打开
onmessage 当接收到消息
onerror 当发生错误
复制代码

EventSource.close()来关闭链接。

兼容性：developer.mozilla.org/zh-CN/docs/… IE全系不支持。

文字demo

SSE是单向通道， 只能服务端向浏览器发送数据。特别适用于客户端只需接收从服务器传入的更新的应用程序。

客户端：啦啦啦，我要创建SSE
服务端：ok，有的时候会告诉你的。
服务端：来了来了，有消息了
服务端：balabalabalabala
服务端：哈哈哈哈哈啊哈哈哈哈
服务端：笑死我了哈哈哈哈哈哈哈
复制代码

代码demo

if (typeof (EventSource) !== "undefined") {
    var source = new EventSource("server.php");
    source.onopen = function () {
        console.log("Connection to server opened.");
    };
    source.onmessage = function (event) {

        document.getElementById("result").innerHTML += event.data + "<br>";
    };
    source.onerror = function () {
        console.log("EventSource failed.");
    };
} else {
    document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";
}
复制代码

选择

目前，咱们已经积累了较为丰富轮询请求经验。可是，轮询、长轮询已经没法知足此次需求。主要缘由是：灯态数据是500ms上报一次，频次很是高，轮询不适合，有请求丢失和异步跳秒的风险。并且，通常而言轮询都有无谓请求、浪费带宽、效率低下的问题。因此须要从SSE、WebSocket方案中选择。SSE、WebSocket优劣比较以下：

	SSE	WebSocket
通讯类型	半双工（单向）	全双工（双向）
浏览器支持	目前在 Microsoft 浏览器中不可用。	可用于全部主要浏览器。
开发工做量	小：只需发送一条包含特定标头的 HTTP 消息。	中等：须要创建并维护 TCP 套接字通讯。在服务器端还须要一个监听器套接字。
扩展性	较弱	较强，支持数据的双向通讯

为了后期更好的扩展性，选择了websocket的方案。

深刻websocket

简单理解

WebSocket 协议在2008年诞生，2011年成为国际标准。全部现代浏览器都已经支持了。

它的最大特色就是，服务器能够主动向客户端推送信息，客户端也能够主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

特色：

1. 创建在 TCP 协议之上，服务器端的实现比较容易。

2. 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，而且握手阶段采用 HTTP 协议，所以握手时不容易屏蔽，能经过各类 HTTP 代理服务器。

3. 数据格式比较轻量，性能开销小，通讯高效。

4. 能够发送文本，也能够发送二进制数据。

5. 没有同源限制，客户端能够与任意服务器通讯。

6. 协议标识符是ws（若是加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path
复制代码

客户端实现与API简介

包括ie在内的全部主流浏览器都支持websocket。

• 构造函数 WebSocket(url[, protocols]) 返回一个 WebSocket 对象
• 属性
  • WebSocket.binaryType 使用二进制的数据类型链接 blob（Blob 对象表示一个不可变、原始数据的类文件对象。）、arrayBuffer
  • WebSocket.bufferedAmount 只读 未发送至服务器的字节数
  • WebSocket.extensions 只读 服务器选择的扩展
  • WebSocket.onclose 用于指定链接关闭后的回调函数
  • WebSocket.onerror 用于指定链接失败后的回调函数
  • WebSocket.onmessage 用于指定当从服务器接受到信息时的回调函数
  • WebSocket.onopen 用于指定链接成功后的回调函数
  • WebSocket.protocol 只读 服务器选择的下属协议
  • WebSocket.readyState 只读 当前的连接状态
  • WebSocket.url 只读 WebSocket 的绝对路径
• 方法
  • WebSocket.close([code[, reason]]) 关闭当前连接
  • WebSocket.send(data) 向服务器发送数据

浏览器客户端示例代码：

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function (evt) {
    console.log("Connection open ...");
    ws.send("Hello WebSockets!");
};

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

ws.onclose = function (evt) {
    console.log("Connection closed.");
};
复制代码

服务端的实现

几乎各类后端语言都有对应的实现方法，支持度较好。

经常使用的 Node 实现有如下三种。

• µWebSockets
• Socket.IO
• WebSocket-Node

代码略过，直接到以上项目的GitHub中查看便可。

nginx的支持

在配置 HTTP、HTTPS 域名位置加入以下配置：

location /websocket {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}
复制代码

Nginx 自从 1.3 版本就开始支持 WebSocket 了，而且能够为 WebSocket 应用程序作反向代理和负载均衡。

WebSockets 受到 Nginx 缺省为60秒的 proxy_read_timeout 的影响。这意味着，若是你有一个程序使用了 WebSocket，但又可能超过60秒不发送任何数据的话，那你要么须要增长超时时间，要么实现一个 ping 的消息（心跳报文）以保持联系。使用 ping 的解决方法有额外的好处，能够发现链接是否被意外关闭。

深刻理解

websocket究竟是什么？

概念：

HTTP是运行在TCP协议传输层上的应用协议，而WebSocket是经过HTTP协议协商如何链接，而后独立运行在TCP协议传输层上的应用协议。

WebSocket仅仅是利用了HTTP协议作链接请求。WebSocket至关于一个简化版的TCP传输子层（实际上WebSocket也是应用层协议）。

WebSocket之因此能持久链接缘由是它运行在TCP协议上，TCP协议自身是长链接协议，因此WebSocket固然能够长链接。为何HTTP不是长链接，缘由是早期的HTTP在发起每一个请求，响应完成后就会关闭Socket。可是后来加了多路复用KeepAlive协议后HTTP协议已经能够实现长链接了，能够处理长链接事务了。

因此，Websocket是一个持久化的协议。

特别地：

WebSocket 不是 HTML5 的东西。

WebSocket 是一个协议，归属于 IETF。WebSocket API 是一个 Web API，归属于 W3C。两个规范是独立发布的。

广义上的 HTML5 是一个很宽广的概念，是对大量新 API 的总称， 里面包含的是 WebSocket API，并非 WebSocket。简单的说，能够把 WebSocket 当成 HTTP，WebSocket API 当成 Ajax。

原理及运行机制

wesocket协议流程图:

Websocket借用HTTP的协议来完成一部分握手。

典型的Websocket的http握手部分：

1.请求部分

GET ws://xxx.xx.xx.xx:8000/v2x-omp/websocket HTTP/1.1
Host: xxx.xx.xx.xx:8000
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
Origin: http://xxx.xx.xx.xx:8000
Sec-WebSocket-Version: 13
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Cookie: __guid=120070472.2101968800548691200.1551342012289.0847; xx_xxow=_QP5elb46q2pqak9IgU_V0scW3xDh9Qm; monitor_count=1
Sec-WebSocket-Key: Uk07fY3CxNYoq2N5Fl9l1A==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
复制代码

和通常http协议不一样的主要有：

(1)

Upgrade: websocket
Connection: Upgrade
复制代码

这个是Websocket的核心，告诉Apache、Nginx等服务器：这边发起的是Websocket协议，请用相应的后端来处理。

(2)

Sec-WebSocket-Key: Uk07fY3CxNYoq2N5Fl9l1A==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Version: 13
复制代码

Sec-WebSocket-Key 是一个Base64 encode的值，这个是浏览器随机生成的，用于验证交互的服务器。

Sec-WebSocket-Version 是告诉服务器所使用的Websocket Draft（协议版本），避免因版本不一样出现兼容性问题。

2.响应部分

服务器会响应以下，成功创建Websocket。

HTTP/1.1 101 Switching Protocols
Server: nginx
Date: Tue, 02 Apr 2019 08:11:57 GMT
Connection: upgrade
Upgrade: websocket
Sec-WebSocket-Accept: khI5KCJzpRnpR8H2sOx+nnGCDAY=
Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15
复制代码

至此，HTTP已经完成它全部工做了--链接握手成功，接下来就是彻底按照Websocket协议进行了。

websocket传输帧协议：

参考文档

developer.mozilla.org/zh-CN/docs/…

www.ruanyifeng.com/blog/2017/0…

www.zhihu.com/question/20…

blog.51cto.com/kusorz/2058…

zhuanlan.zhihu.com/p/21595082