GOFLY在线客服-使用reconnect-websocket.js实现断线自动重连机制-GO语言实现开源独立部署客服系统

开发websocket应用，最难处理的就是断线后的自动重连

现在GOFLY在线客服使用reconnect-websocket.js就可以非常简单轻松的实现断线重连

 

reconnect-websocket.js的机制是，当连接websocket服务的过程中，如果连不上，会自动进行指定次数的重试

如果连接成功后回调onOpen方法以后，会把重试次数清空，因此如果是连接已经成功，但是后端主动关闭连接，这个库会不断的进行连接

这个问题也一并处理了下

 

核心代码在下面，是cdn引入的vue以及element-ui ，GOFLY也是这样的前端架构

 

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- Import style -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
    />
    <!-- Import Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <!-- Import component library -->
    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
</head>
<body>
<div id="app">
    <el-button>${ message }</el-button>
</div>
<script src="../../js/reconnect-websocket.js"></script>
<script>
    const App = {
        compilerOptions: {
            delimiters: ['${', '}'],
            comments: true
        },
        data() {
            return {
                message: "Hello Element Plus",
                apiHost:"ws://gofly.sopans.com/ws_visitor?visitor_id=efccd385-cdfe-41ed-8dfd-ab1faa732996&to_id=taoshihan",
                websocket:null,
                websocketOpenNum:0,
                websocketMaxOpenNum:20,
                websocketClosed:true,
            };
        },
        methods: {
            //初始化websocket连接
            initWebsocketConn() {
                this.websocket = new ReconnectingWebSocket(this.apiHost,null,{
                    debug:true
                });//创建Socket实例
                this.websocket.onmessage = this.onMessage;
                this.websocket.onopen = this.onOpen;
                this.websocket.onerror = this.onError;
                this.websocket.onclose = this.onClose;
            },
            onOpen(){
                console.log("ws:onOpen");
                if(this.websocketOpenNum>=this.websocketMaxOpenNum){
                    this.websocket.close();
                }
                this.websocketOpenNum++;
                this.websocketClosed=false;
                this.ping();
            },
            onMessage(){
                console.log("ws:onMessage");
            },
            onError(){
                console.log("ws:onError");
            },
            onClose(){
                console.log("ws:onClose");
                this.websocketClosed=true;
            },
            //心跳包
            ping(){
                var _this=this;
                setInterval(function () {
                    if(!_this.websocketClosed){
                        _this.websocket.send("ping");
                    }
                },10000);
            },
        },
        //属性初始化
        created(){
            this.initWebsocketConn();
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>

 

posted @ 2021-10-23 17:47  唯一客服系统开发笔记  阅读(351)  评论(0)  编辑  收藏  举报