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相关的连接问题，给大家提供一些经验的总结合参考。

如果大家遇到相关的问题或者难题，可以根据上面方案进行尝试，同时也欢迎留言或者私信进行探讨。