摘要：与此同时，后端服务的中也有相关的长连接维持时长设置。如何快速的恢复连接根据上面的操作方案，我们会在网络异常时断开连接。
概述
通过前四篇博客，相信读者对于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相关的连接问题，给大家提供一些经验的总结合参考。
如果大家遇到相关的问题或者难题，可以根据上面方案进行尝试，同时也欢迎留言或者私信进行探讨。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94002.html
摘要：概述本文是系列的第一篇，主要介绍相关的基础协议知识和。客户端收到响应后，立即发起下一次的请求。收到消息通过事件来接收消息。类型则需要传递一个对象作为参数，相关的内容也将在本系列第二篇中进行介绍。 概述 本文是WebSocket系列的第一篇，主要介绍WebSocket相关的基础协议知识和API。由于WebSocket的相关介绍在MDN中分布较乱，初学者不太容易入门，因此通过本文将相关基础...
摘要：帧协议让我们深入了解下帧协议。目前可用的值该帧接续前面一帧的有效载荷。该帧包含二进制数据。帧有以下几类长度表示有效载荷的长度。数据分片有效载荷数据可以被分成多个独立的帧。接收端会缓冲这些帧直到位有值。 原文请查阅这里，略有改动，本文采用知识共享署名 3.0 中国大陆许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原...
摘要：本文作为系列的第四篇内容，将会用一个简单的聊天应用把整个传输二进制数据类型的内容连接起来，让用户对整个传输二进制数据的方法有个了解。如何发送二进制数据通过如何设计一个二进制协议一章，我们知道了如何定义传输的二进制数据格式。 概述 通过前三篇博客，我们能够了解在通过WebSocket发送数据之前，我们需要传递的数据是如何变成ArrayBuffer二进制数据的；在我们收到二进制数据之后，我...
摘要：最后，消息成功抵达并显示在页面上。在中，所有的数据都使用数据报传输层安全性。如果应用知识简单的一对一文件传输，使用不可靠的数据通道将需要设计一定的响应重传协议。目前建议的最大块大小为。 本文翻译自WebRTC data channels 在两个浏览器中，为聊天、游戏、或是文件传输等需求发送信息是十分复杂的。通常情况下，我们需要建立一台服务器来转发数据，当然规模比较大的情况下，会扩展成...
阅读 346·2023-04-26 01:39
阅读 4061·2021-11-16 11:45
阅读 2450·2021-09-27 13:37
阅读 729·2021-09-01 10:50
阅读 3327·2021-08-16 10:50
阅读 1985·2019-08-30 15:55
阅读 2752·2019-08-30 15:55
阅读 2142·2019-08-30 14:07
