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/[email protected]"></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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章