分布式WebSocket-上篇

最新推荐文章于 2024-09-12 14:25:32 发布

蓝天/zachary

最新推荐文章于 2024-09-12 14:25:32 发布

阅读量773

点赞数 3

分类专栏：分布式架构文章标签： websocket 双向传输通讯分布式直播

本文链接：https://blog.csdn.net/qaz7225277/article/details/113361888

版权

本文介绍了WebSocket作为双向传输技术的选择，以及在直播场景中的应用。通过单机WebSocket的实现，包括配置、集成步骤、心跳检测、异常处理、消息补偿和断开重连机制。最后讨论了Nginx配置，并预告了下篇将探讨分布式WebSocket的实现。

摘要由CSDN通过智能技术生成

单机WebSocket落地-生产验证

众所周知，教育分线下和线上，随着疫情的发展，线上教育慢慢普及，直播作为互动及体检的重要环节，其必不可少。那么在直播过程中必然需要双向传输等核心技术体系支撑。

技术选型：

目前较为主流双向传输技术，如：websocket、mqtt
websocket开源简单，集成快，开发成本低、论坛活跃
Kong网关支持众多插件，方便维护

考虑到开发成本、使用场景、维护等多方面因素，我们采用WebSocket方案进行集成，由于我们开发周期紧，人员短缺，为了快速实现产品，最初我们采用单点WebSocket方案进行实现，关于双向传输，接下来将通过实例分析说明。

单机WebSocket：

所谓单机WebSocket，是指单台服务器采用WebSocket架构部署并运行，结构如下：
socket
具备特性(直播场景)：

多渠道支持同时观看直播，如：手机/电脑/pad等
心跳检测（客户端和服务器确认的一种方式）
异常补发 (发送失败的消息会重新发送)

前后端契约：

业务数据传输格式定义

{
   "event":"SPEAK","data":json,"code":0}
event：事件，如交互时根据业务场景特定而出
data：事件对应的json数据，用于交互
code: 状态码，用于对错分离

心跳检测数据格式定义（用于维持socket链接不被nginx和kong关闭，同时客户端可以主动检测当前链接是否正常）

{
   "event":"HEART","data":code,"code":0}
code: 如：客户端发出2，服务端回应3

应用集成步骤如下：

Client:


<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
   
        //23是一个ID ，chat是要订阅的话题
        websocket = new WebSocket("ws://localhost:8091/demo/websocket/345/THE/452784/20201210162113114000eaf319eaeef4/pc");

    } else {
   
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
   
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
   
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
   
        console.log(event.data)
        setMessageInnerHTML(event.data );
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
   
        setMessageInnerHTML("WebSocket连接关闭的回调方法，后台已经关闭了这个连接");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
   
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
   
        console.log(innerHTML)
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
   
        websocket.close();
        setMessageInnerHTML("WebSocket连接关闭");
    }


    //open WebSocket连接
    function openWebSocket