分享Web端即时通讯的发展与WebSocket的实践

Posted 2022-08-24 wecloud1314

为什么说Web即时通讯技术这么重要？我们生活在一个实时（real-time）的世界中，因此Web的最终最自然的状态也应当是实时的。用户需要实时的沟通、数据和搜索。我们对互联网信息实时性的要求也越来越高，如果信息或消息延时几分钟后才更新，简直让人无法忍受。

 

Web端即时通讯的发展历史

传统的Web是基于HTTP的请求/响应模型的：即客户端请求一个新页面，服务器将内容发送到客户端，客户端再请求另外一个页面时又要重新发送请求。

后来有人提出了AJAX，AJAX使得页面的体验更加“动态”，可以在后台发起到服务器的请求。但是，如果服务器有更多数据需要推送到客户端，在页面加载完成后是无法实现直接将数据从服务器发送给客户端的。实时数据无法被“推送”给客户端。

为了解决这个问题，有人提出了很多解决方案。最简单（暴力）的方案是用轮询：每隔一段时间都会向服务器请求新数据。这让用户感觉应用是实时的，实际上这会造成延时和性能问题，因为服务器每秒都要处理大量的连接请求，每次请求都会有TCP三次握手并附带HTTP的头信息。尽管现在很多应用仍在使用轮询，但这并不是最理想的解决方案。

后来随着Comet技术的提出，又出现了很多更高级的解决方案。这些技术方案包括永久帧（forever frame）、XHR流（xhr-multipart）、htmlfile，以及长轮询。长轮询是指，客户端发起一个到服务器的XHR连接，这个连接永不关闭，对客户端来说连接始终是挂起状态。当服务器有新数据时，就会及时地将响应发送给客户端，接着再将连接关闭。然后重复整个过程，通过这种方式就实现了“服务器推”（server push）。

Comet技术是非标准的hack技术，正因为此，浏览器端的兼容性就成了问题。首先，性能问题无法解决，向服务器发起的每个连接都带有完整的HTTP头信息，如果你的应用需要很低的延时，这将是一个棘手的问题。当然不是说Comet本身有问题，因为还没有其他替代方案前Comet是我们的唯一选择。

浏览器插件（如Flash）和Java同样被用于实现服务器推。它们可以基于TCP直接和服务器建立socket连接，这种连接非常适合将实时数据推给客户端。问题是并不是所有的浏览器都安装了这些插件，而且它们常常被防火墙拦截，特别是在公司网络中。

现在HTML5规范为我们准备了一个替代方案。但这个规范稍微有些超前，暂时有部分或较近老的浏览器都还不支持，特别是IE，但对于现在很多开发者来说，HTML5的WebSocket必定会是未来的潮流和趋势，值得深入研究和了解。即时通讯聊天软件app开发可以加蔚可云的v：weikeyun24咨询

 

WebSocket 技术实践

WebSocket是HTML5规范的一部分，提供了基于TCP的双向的、全双工的socket连接。这意味着服务器可以直接将数据推送给客户端，而不需要开发者求助于长轮询或插件来实现，这是一个很大的进步。尽管有一些浏览器无法支持WebSocket，对于那些不支持WebSocket的浏览器，可以降级使用笨方法来实现，比如Comet或轮询。

和之前的服务器推的技术相比，WebSocket有着巨大的优势，因为WebSocket是全双工的，而不是基于HTTP的，一旦建立连接就不会断掉。Comet所面对的现实问题就是HTTP的体积太大，每个请求都带有完整的HTTP头信息。而且包含很多没有用的TCP握手，因为HTTP是比TCP更高层次的网络协议。

使用WebSocket时，一旦服务器和客户端之间完成握手，信息就可以畅通无阻地随意往来于两端，而不用附加那些无用的HTTP头信息。这极大地降低了带宽的占用，提高了性能。因为连接一直处于活动状态，服务器一旦有新数据要更新时就可以立即发送给客户端（不需要客户端先请求，服务器再响应了）。另外，连接是双工的，因此客户端同样可以发送数据给服务器，当然也不需要附带多余的HTTP头。

下面这段话出自Google的Ian Hickson，HTML5规范小组负责人，它是这样描述WebSocket的：

将千字节的数据降为2字节……并将延时从150毫秒降为50毫秒，这种优化跨越了不止一个量级，实际上仅这两点优化就足以让Google确信WebSocket会给产品带来非一般的用户体验。

现在我们来看一下都有哪些浏览器支持WebSocket：

    IE >= 10
    Chrome >= 4
    Safari >= 5
    ios >= 4.2
    Firefox >= 4*
    Opera >= 11*

你肯定注意到了我们在实例化一个WebSocket的时候使用了WebSocket特有的协议前缀ws://，而不是http://。WebSocket同样支持加密的连接，这需要使用以wss://为协议前缀的TLS。默认情况下WebSocket使用80端口建立非加密的连接，使用443端口建立加密的连接。你可以通过给URL带上自定义端口来覆盖默认配置。要记住，并不是所有的端口都可以被客户端使用，一些非常规的端口很容易被防火墙拦截。

说到现在，你或许会想，“我还不能在项目中使用WebSocket，因为标准还未成型，而且IE不支持WebSocket”。这样的想法并没有错，幸运的是，我们有解决方案。Web-socket-js是一个基于AdobeFlash实现的WebSocket。用这个库就可以在不支持WebSocket的浏览器中做优雅降级。毕竟几乎所有的浏览器都安装了Flash插件。基于Flash实现的SocketAPI和HTML5标准规范完全一样，因此当WebSocket的浏览器兼容性更好的时候，只需简单地将库移除即可，而不必对代码做任何修改。

尽管客户端的API非常简洁、直接，但在服务器端情况就不同了。WebSocket协议包含两个互不兼容的草案协议：草案75和草案76。服务器需要通过检测客户端使用的连接握手类型来判断使用哪个草案协议。

WebSocket首先向服务器发起一个HTTP“升级”（upgrade）请求。如果你的服务器支持WebSocket，则会执行WebSocket握手并初始化一个连接。“升级”请求中包含了原始域（请求所发出的域名）的信息。客户端可以和任意域名建立WebSocket连接，只有服务器才会决定哪些客户端可以和它建立连接，常用做法是将允许连接的域名做成白名单。

在WebSocket的设计之初，设计者们希望只要初始连接使用了常用的端口和HTTP头字段，就可以和防火墙和代理软件和谐相处。然而理想是丰满的，现实是骨感的。有些代理软件对WebSocket的“升级”请求的头信息做了修改，打破了协议规则。事实上，协议草案的最近一次更新（版本76）也无意中打破了对反向代理和网关的兼容性。为了更好更成功地使用WebSocket，这里给出一些步骤：

    使用安全的WebSocket连接（wss）。代理软件不会对加密的连接胡乱篡改，此外你所发送的数据都是加密后的，不容易被他人窃取。
    在WebSocket服务器前面使用TCP负载均衡器，而不要使用HTTP负载均衡器，除非某个HTTP负载均衡器大肆宣扬自己支持WebSocket。
    不要假设浏览器支持WebSocket，虽然浏览器支持WebSocket只是时间问题。诚然，如果连接无法快速建立，则迅速优雅降级使用Comet和轮询的方式来处理。
那么，如何选择服务器端的解决方案呢？幸运的是，在很多语言中都实现了对WebSocket的支持，比如Ruby、Python和Java。要再次确认每个实现是否支持最新的76版协议草案，因为这个协议是被大多数客户端所支持的。