前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WebSocket系列之如何建立和维护可靠的连接

WebSocket系列之如何建立和维护可靠的连接

作者头像
黄Java
发布2018-09-18 16:59:23
3.1K0
发布2018-09-18 16:59:23
举报
文章被收录于专栏:黄Java的地盘

概述

通过前四篇博客,相信读者对于WebSocket的使用和数据(不论是ArrayBuffer还是String)传输都有了一个深刻的了解。现在我们来介绍下,我在使用WebSocket时,连接相关模块遇到的一些共性问题,以及我们如何解决这些问题。

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

  • WebSocket建立连接共性问题
  • WebSocket维护连接共性问题

通过这篇博客,读者能够了解在WebSocket线上生产环境遇到的常见连接问题以及对应的解决方案,从而在自己遇到相关问题时可以快速解决。

本文不涉及任何前端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相关的连接问题,给大家提供一些经验的总结合参考。

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 建立连接共性问题
    • 如何使用加密的WebSocket(WSS)
      • 不支持WebSocket的环境下如何降级
      • 维持连接共性问题
        • 如何维持长连接不断开
          • 如何处理断网或者后端异常情况
            • 如何快速的恢复连接
            • 总结
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档