WebSocket系列之如何创建和维护可靠的链接

概述

经过前四篇博客，相信读者对于WebSocket的使用和数据（不管是ArrayBuffer仍是String）传输都有了一个深入的了解。如今咱们来介绍下，我在使用WebSocket时，链接相关模块遇到的一些共性问题，以及咱们如何解决这些问题。

本文做为WebSocket系列的第五篇文章，它的内容不只仅限于前端的WebSocket致使的问题，而是结合一整套长链接方案可能遇到的问题来进行说明。其主要内容为：

• WebSocket创建链接共性问题
• WebSocket维护链接共性问题

经过这篇博客，读者可以了解在WebSocket线上生产环境遇到的常见链接问题以及对应的解决方案，从而在本身遇到相关问题时能够快速解决。 本文不涉及任何前端WebSocket使用方法或教程，只是做为相关经验的总结博客。若是读者对WebSocket相关使用尚未具体的认识，能够阅读前四篇博客。

• WebSocket系列之基础知识入门篇
• WebSocket系列之JavaScript中数字数据如何转换为二进制数据
• WebSocket系列之字符串如何与二进制数据进行转换
• WebSocket系列之二进制数据设计与传输

创建链接共性问题

如何使用加密的WebSocket（WSS）

若是咱们须要使用加密的WebSocket时，咱们须要配置证书，如下几点须要注意:

• WebSocket地址不能使用IP，必须使用域名。由于证书是针对域名来进行配置的。
• 证书必须符合新Chrome规范，不然会出现NET::ERR_CERT_COMMON_NAME_INVALID错误，具体详情见Chrome帮助。若是从新签署后海是出现此问题，须要按下证书中的DNS地址是否包含使用的域名。
• 若是是开发环境的自签证书，须要配置到本地证书库中，不然会出现NET::ERR_CERT_AUTHORITY_INVALID错误。

不支持WebSocket的环境下如何降级

部分IE或者低版本Android手机的浏览器环境不支持WebSocket，同时Firefox38-41的部分版本WebSocket也不支持传输ArrayBuffer数据。所以，在出现不支持WebSocket或者WebSocket链接失败的状况时，咱们须要制定相关的降级策略：

• 根据浏览器进行判断，若是是不支持WebSocket的浏览器或者低版本Android的WebView，直接切换到长轮询方案。
• 若是WebSocket链接失败（初始化后当即触发了close事件），则当即降级到长轮询方案。

维持链接共性问题

如何维持长链接不断开

当前浏览器对WebSocket创建的长链接都有节能策略，即持续一段时间内没有数据传输时，浏览器会主动断开长链接，根据当前测试的数据（仅供参考）来看，Chrome浏览器的主动断开时间为300秒左右，而Firefox在120秒左右。

所以，咱们若是须要维持长链接长时间不断开，须要设计特定的心跳来维持这条WebSocket链接。在一个特定的时间间隔中，客户端向后端发送一条数据，同时后端也回复相关的数据（后端回复是用来检测网络和后端是否正常工做）。

我目前使用的心跳间隔为45秒，即间隔45秒就像后端发送一个心跳包。固然，这个时间和相关的后端服务设置以及应用场景相关。

与此同时，后端服务的Nginx中也有相关的长链接维持时长设置。若是你遇到前端创建的WebSocket链接在间隔比较短的时间就被后端主动断开（即触发close事件），而前端没有触发任何关闭操做，能够检查下后端相关的时间配置项。在生产环境中，我遇到过因为Nginx的配置参数proxy_read_timeout时间设置小于心跳间隔致使的后端主动断开链接。

如何处理断网或者后端异常状况

在浏览器网络断开的状况下，WebSocket是不会收到任何的事件的。因为WebSocket在断网时的表现和在线时无消息收发的状态没法区分，咱们须要用其余的方法来进行判断和区分。具体的方法有以下几种：

• 使用心跳包。咱们在发送心跳包后，会收到相关的返回数据。若是咱们没法收到此数据，就认为目前网络或者后端异常。
• offline事件。浏览器会在断网后给页面发送一个offline事件（不许确，能够做为参考），咱们能够根据此事件来断开长链接，对用户进行相关提示。

如何快速的恢复链接

根据上面的操做方案，咱们会在网络异常时断开链接。可是，当网络恢复时，咱们须要快速的恢复长链接。咱们能够根据如下几个方案，来恢复咱们的WebSocket链接。

• 递增重试的时长。当咱们短卡网络时，咱们当即设置一个递增的时长（如[1,2,3,5,10,20]秒）来尝试恢复长链接。
• online事件重置重试的时长。在浏览器网络恢复时，会发送一个online事件（一样不许确）。在监听到online事件时，咱们只须要重置这个时长，当即尝试恢复便可（由于online事件触发时，网络仍然有可能处于抖动状态）。
• 检测休眠重置重试的时长。当浏览器休眠时，JavaScript不会执行。当电脑被唤醒时，若是online事件没有触发，那么重试的时长有可能因为屡次尝试变成一个较大的值。所以咱们在检测到休眠被唤醒后，须要当即重置重试的时长。具体方法为：设置一个setInterval，每次判断上次执行与本次执行时长间隔。由于休眠时JavaScript不会执行，所以，若是间隔时长较大（超过设置阈值），咱们就认为电脑休眠被唤醒了。

总结

本文经过总结我在线上生产环节中遇到的WebSocket相关的链接问题，给你们提供一些经验的总结合参考。

若是你们遇到相关的问题或者难题，能够根据上面方案进行尝试，同时也欢迎留言或者私信进行探讨。