學習使用js鏈接websocket服務斷線重連的方法

• • 前言
  • 思路
  • 示例代碼

前言

我們在是有websocekt的時候，有的時候由于某些原先websocket會斷開連接，我們需要重現連接，該如何實現呢？這就需要我們仔細研究websocket的api的使用了。

思路

首先我們要熟悉如下幾個api

1、連接websocket的服務器的websocekt函數

2、websocekt斷開后觸發的onclose函數

由上面這兩個函數就可以了，大致思路梳理一下：
1、首先開發一個函數websocketinit，函數主要是websocket的連接邏輯，監聽信息，發送信息
2、監聽onclose事件，onclose觸發后重新執行websocketinit事件

示例代碼

//1.創建websocket客戶端 var host = window.location.host; #IP var ut = "{{ ut }}"; var wsServer = 'wss://' + host + '/notify/wxlogin?ut=' + ut;var timeConnect = 0; webSocketInit(wsServer);//socket初始化 function webSocketInit(service) {var ws = new WebSocket(service);ws.onopen = function () {console.log("已連接TCP服務器");ws.send('Hello WebSockets!');};//接收服務端的消息，根據自己的業務需求，開發對應的功能ws.onmessage = function (evt) {console.log('Received Message: ' + evt.data);data = JSON.parse(evt.data);console.log(data);if (data.status != 0) {alert("掃碼錯誤");ws.close();}//判斷身份，登錄成功 并跳轉到指定的頁面if (data.data.wx_login == 1) {//window.location.href = "http://" + host + "/admin"window.location.href = "/admin"}if (data.data.wx_login == 0) {//alert(data.data.message)$(".qr_code").css("display", "none");$(".tips").text(data.data.message)}console.log(data.data);};ws.onclose = function () {console.log('服務器已經斷開');reconnect(service);}; }// 重連 function reconnect(service) {// lockReconnect加鎖，防止onclose、onerror兩次重連timeConnect++;console.log("第" + timeConnect + "次重連");// 進行重連setTimeout(function () {webSocketInit(service);}, 1000);}// 心跳 * 回應 setInterval(function () {var websocket = new WebSocket(wsServer);websocket.send('');}, 1000 * 100)

總結

以上是生活随笔為你收集整理的学习使用js链接websocket服务断线重连的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。