搜尋
首頁微信小程式小程式開發原生WebSokcet實現斷線重連及資料拼接實作方法

WebSocket protocol 是HTML5一種新的協定。它實作了瀏覽器與伺服器全雙工通訊(full-duplex)。本文主要和大家分享微信小程式使用原生WebSokcet實現斷線重連及資料拼接,希望能幫助大家。

一、說明

1.小程式原生的WebSokcet沒有斷線重連機制,這個是他的不足之處。

2.小程式新的版本庫已經支援存在多個 WebSokcet 連線。

官方說明:基礎庫 1.7.0 之前,一個微信小程式同時只能有一個 WebSocket 連接,如果目前已存在一個 WebSocket 連接,會自動關閉該連接,並重新建立一個 WebSocket 連接。基礎庫版本 1.7.0 及以後,支援存在多個 WebSokcet 連接,每次成功調用 wx.connectSocket 會傳回一個新的 SocketTask。

官方文件地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-socket.html#wxclosesocket

二、實際範例:

首先你需要socket位址url: let url = 'wss://http://xxx.xxx.com/?xxx=xxx'

#注意:1.小程式管理後台新增socket網域名稱的時候不能出現連接埠;2.如果使用了appID,協定必須是wss;3.socket服務端映射的連接埠僅支援80 和443,和公眾號一個尿性。

接下來放範例:

1、socket.js

const app = getApp();
let url = 'wss://xxx.xxx.com/?xxx=xxx'
export const connect = function (cb) { // 定义一个方法
  wx.connectSocket({ // 创建一个 WebSocket 连接
      url: url,
      fail (err) {
if (err) {
              console.log('%cWebSocket连接失败', 'color:red', err)
              app.globalData.socketConnectFail = true // 定义一个全局变量,当链接失败时改变变量的值
}
}
})

  wx.onSocketOpen(function (res) { // 监听WebSocket连接打开事件。
      console.log('WebSocket打开成功');
      wx.sendSocketMessage({ // 通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。
          data: String2Base64(), // 用于订阅的参数,视具体情况而定
          success (data) {
              console.log('WebSocket发送消息:', data.errMsg)
},
          fail (err) {
              console.log('Err', err)
}
})

})

  wx.onSocketMessage(function (res) { // 监听WebSocket接受到服务器的消息事件。
      console.log('WebSocket接收到消息:', ArryBuffer2Json(res.data));
      cb(ArryBuffer2Json(res.data)); // 将接收到的消息进行回调,如果是ArryBuffer,需要进行转换
})

  wx.onSocketError(function (res) { // 监听WebSocket错误。
      console.log('WebSocket连接打开失败')
})

  wx.onSocketClose(function (res) { // 监听WebSocket关闭。
      console.log('WebSocket关闭');
})
};

function ArryBuffer2Json (data) { // ArryBuffer转换成Json
try {
var encodedString = String.fromCharCode.apply(null, new Uint8Array(data));
var decodedString = decodeURIComponent(atob(encodedString));
return JSON.parse(decodedString);
} catch (err) {
      console.log(err);
return false;
}
}


function String2Base64 () { // 用于订阅的参数,视具体情况而定
var packet = {};
  packet["cmd"] = "subscribe";
  packet["reqNo"] = "" + new Date().getTime();
  packet["params"] = {token: token, channelId: 'xcx', columnIds: "1"};
return stringToUint(JSON.stringify(packet))
}

function stringToUint (string) {
var string = base64_encode(encodeURIComponent(string)),
      charList = string.split(''),
      uintArray = [];
for (var i = 0; i < charList.length; i++) {
      uintArray.push(charList[i].charCodeAt(0));
}
return new Uint8Array(uintArray);
}

function base64_encode (str) { // base64转码
var c1, c2, c3;
var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var i = 0, len = str.length, string = &#39;&#39;;

while (i < len) {
      c1 = str.charCodeAt(i++) & 0xff;
if (i == len) {
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt((c1 & 0x3) << 4);
string += "==";
break;
}
      c2 = str.charCodeAt(i++);
if (i == len) {
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
string += base64EncodeChars.charAt((c2 & 0xF) << 2);
string += "=";
break;
}
      c3 = str.charCodeAt(i++);
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
string += base64EncodeChars.charAt(c3 & 0x3F)
}
return string
}

2、index.js

let openSocket = require(&#39;../../config/socket.js&#39;);
const app = getApp();
data: {
  motto: &#39;Hello World&#39;,
  articleData: []
},
onLoad: function () {
let that = this;
  openSocket.connect(function (data) { // WebSocket初始化连接
let result = data.data
if (result) {
          that.setData({articleData: [result].concat(that.data.articleData)}) // 将获得的socket推送消息拼接到当前文章列表的最前面
}
});
if (app.globalData.socketConnectFail) { // WebSocket断线重连
      setInterval(() => {
          openSocket.connect(function (data) {
let result = data.data
if (result) {
                  that.setData({articleData: [result].concat(that.data.articleData)})
}
});
}, 1000)
}
}
3、app.js
globalData: {  socketConnectFail: false}

相關推薦:

#有關斷線重連的文章推薦

java 中Spring boot 資料庫連接斷線重連問題詳解

Json物件和字串互相轉換json資料拼接與JSON使用方式詳細介紹(小結)

#

以上是原生WebSokcet實現斷線重連及資料拼接實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。