八问WebSocket协议：为你快速解答WebSocket热门疑问

栏目: Html5 · 发布时间: 5年前

内容简介：WebSocket是一种比较新的协议，它是伴随着html5规范而生的，虽然还比较年轻，但大多主流浏览器都已经支持。它使用方面、应用广泛，已经渗透到前后端开发的各种场景中。对http一问一答中二式流程（就是从所周之的“长轮询”技要啦）的不满，催生了支持双向通信的WebSocket诞生。WebSocket是个不太干净协议。本文将从8个常见的疑问入手，为还不了解WebSocket协议的开发者快速普及相关知识，从而节省您学习WebSocket的时间。

一、引言

WebSocket是一种比较新的协议，它是伴随着html5规范而生的，虽然还比较年轻，但大多主流浏览器都已经支持。它使用方面、应用广泛，已经渗透到前后端开发的各种场景中。

对http一问一答中二式流程（就是从所周之的“长轮询”技要啦）的不满，催生了支持双向通信的WebSocket诞生。WebSocket是个不太干净协议。

本文将从8个常见的疑问入手，为还不了解WebSocket协议的开发者快速普及相关知识，从而节省您学习WebSocket的时间。

另外，如果您对Web端的即时通讯技术还完全不了解，那么《新手入门贴：详解Web端即时通讯技术的原理》、《 Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE 》这两篇文章请您务必抽时间读一读。

学习交流：

- 即时通讯/推送技术开发交流4群： 101279154 [推荐]

- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM 》

（本文同步发布于： http://www.52im.net/thread-2488-1-1.html ）

二、参考文章

三、更多资料

Web端即时通讯新手入门贴：

《新手入门贴：详解Web端即时通讯技术的原理》

Web端即时通讯技术盘点请参见：

《 Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE 》

关于Ajax短轮询：

找这方面的资料没什么意义，除非忽悠客户，否则请考虑其它3种方案即可。

有关Comet技术的详细介绍请参见：

《 Comet技术详解：基于HTTP长连接的Web端实时通信技术》

《 WEB端即时通讯：HTTP长连接、长轮询（long polling）详解》

《 WEB端即时通讯：不用WebSocket也一样能搞定消息的即时性》

《开源Comet服务器iComet：支持百万并发的Web端即时通讯方案》

更多WebSocket的详细介绍请参见：

《新手快速入门：WebSocket简明教程》

《 Socket.IO介绍：支持WebSocket、用于WEB端的即时通讯的框架》

《 socket.io和websocket 之间是什么关系？有什么区别？》

有关SSE的详细介绍文章请参见：

《 SSE技术详解：一种全新的HTML5服务器推送事件技术》

四、1问WebSocket：WebSocket协议只能浏览器发起么？

不是。目前此协议的受众的也不仅仅是web开发者。

WebSocket只是一种协议，它和http协议一样，使用类似okhttp的组件，可以在任何地方进行调用，甚至可以借助WebSocket实现RPC框架。

八问WebSocket协议：为你快速解答WebSocket热门疑问

五、2问WebSocket：WebSocket和HTTP什么关系？

WebSocket和http一样，都是处于OSI模型中的最高层：应用层。

八问WebSocket协议：为你快速解答WebSocket热门疑问

WebSocket借助http协议进行握手，握手成功后，就会变身为TCP通道，从此与http不再相见。

使用netstat或者ss，能够看到对应的连接，它与处于抽象层的socket，在外观上没有区别。

更多WebSocket和HTTP的关系，以及与Socket的区别，可进一步阅读以下文章：

《 WebSocket详解（四）：刨根问底HTTP与WebSocket的关系(上篇) 》

《 WebSocket详解（五）：刨根问底HTTP与WebSocket的关系(下篇) 》

《 WebSocket详解（六）：刨根问底WebSocket与Socket的关系》

六、3问WebSocket：WebSocket和长轮询有什么区别？

长轮询，就是客户端发送一个请求，服务端将一直在这个连接上等待（当然有一个超长的超时时间），直到有数据才返回，它依然是一个一问一答的模式。比如著名的comted。

WebSocket在握手成功后，就是全双工的TCP通道，数据可以主动从服务端发送到客户端，处于链接两端的应用没有任何区别。

WebSocket创建的连接和Http的长连接是不一样的。由于Http长连接底层依然是Http协议，所以它还是一问一答，只是Hold住了一条命长点的连接而已。

长轮询和Http长连接是阻塞的I/O，但WebSocket可以是非阻塞的（具体是多路复用）。

八问WebSocket协议：为你快速解答WebSocket热门疑问

这方面更深入的资料，请进一步学习：

《 Comet技术详解：基于HTTP长连接的Web端实时通信技术》

《 WEB端即时通讯：HTTP长连接、长轮询（long polling）详解》

七、4问WebSocket：如何创建一个WebSocket连接？

WebSocket的连接创建是借助Http协议进行的。这样设计主要是考虑兼容性，在浏览器中就可以很方便的发起请求，看起来比较具有迷惑性。

下图是一个典型的由浏览器发起的ws请求，可以看到和http请求长的是非常相似的。

但是，它只是请求阶段长得像而已：

八问WebSocket协议：为你快速解答WebSocket热门疑问

请求的地址，一般是：ws://\*\*\*，或者是使用了SSL/TLS加密的安全协议wss:，用来标识是WebSocket请求。

1）首先，通过Http头里面的Upgrade域，请求进行协议转换。如果服务端支持的话，就可以切换到WebSocket协议。简单点讲：连接已经在那了，通过握手切换成ws协议，就是切换了连接的一个状态而已。

2）Connection域可以认为是与Upgrade域配对的头信息。像nginx等代理服务器，是要先处理Connection，然后再发起协议转换的。

3）Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。如此操作，可以尽量避免普通 HTTP 请求被误认为 WebSocket 协议。

其他的，像Sec-WebSocket*字样的头信息，表明了客户端支持的子协议以及其他信息。像loT中很流行的mqtt，就可以作为WebSocket的子协议。

八问WebSocket协议：为你快速解答WebSocket热门疑问

使用javascript，可以很容易连接一个WebSocket服务端：

<script>
  varws = newWebSocket('ws://localhost:80');
  ws.onopen = function() {
    console.log('ws onopen');
    ws.send('from client: hello');
  };
  ws.onmessage = function(e) {
    console.log('ws onmessage');
    console.log('from server: '+ e.data);
  };
  ...
</script>

更详细的资料，请阅读：《 WebSocket详解（三）：深入WebSocket通信协议细节》。

八、5问WebSocket：WebSocket如何处理数据？

WebSocket是通过事件通知的方式运行的。它包含四个事件和两个动作（发送和关闭）。

WebSocket的事件：

八问WebSocket协议：为你快速解答WebSocket热门疑问

数据可直接通过Socket.send()方法进行传输。

通过chrome的Inspect->Network->WS，可以看到页面上的WebSocket连接。

如图Opcode为2，表明它是一个二进制帧：

八问WebSocket协议：为你快速解答WebSocket热门疑问

WebSocket有类似tcp协议的帧格式，在此不做过多解释。（可以详细阅读：《理论联系实际：从零理解WebSocket的通信原理、协议格式、安全性》）

参考： https://tools.ietf.org/html/rfc6455#section-5.1 。

九、6问WebSocket：如何使用Nginx做WebSocket的负载均衡？

nginx官网已经给出了例子。主要是Upgrade和Connection头的设置。

Nginx的中的配置如下：

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''close;
}
 
location /chat/{
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

需要注意的是，nginx做负载均衡，不需要配置ip_hash等参数，nginx天然支持。由于ip_hash仅使用ip地址的前三个数字做hash，还有可能造成服务端的不均衡。

特别注意：

在IM聊天系统场景下，Nginx提供给WebSocket的这种所谓的“负载均衡”，只能解决传统分布系统中的SLB服务器要做的事。

通俗地说，Nginx只能帮助完成引导WebSocket客户连接到哪一个WebSocket服务端实例，在IM集群情况下，如果两个用户处于不同的WebSocket实例下时，它们之间的跨实例通信，Nginx是没有办法实现的，这一块的逻辑还是得IM开发者自已来实现。

总而言之，Nginx提供给WebSocket的所谓“负载均衡”，并不是IM开发者认为的那种全功能集群！