Méthode d'implémentation native de WebSokcet pour la reconnexion par déconnexion et l'épissage des données

Le protocole WebSocket est un nouveau protocole HTML5. Il implémente une communication full-duplex entre le navigateur et le serveur. Cet article partage principalement avec vous que l'applet WeChat utilise WebSokcet natif pour réaliser la reconnexion par déconnexion et l'épissage des données. J'espère que cela pourra aider tout le monde.

1. Description

1. Le WebSokcet natif du mini programme n'a pas de mécanisme de déconnexion et de reconnexion.

2. La nouvelle bibliothèque de versions du mini programme prend déjà en charge plusieurs connexions WebSokcet.

Description officielle : Avant Basic Library 1.7.0, une applet WeChat ne pouvait avoir qu'une seule connexion WebSocket à la fois. Si une connexion WebSocket existe actuellement, la connexion sera automatiquement fermée et une nouvelle connexion WebSocket sera établie. créé. La version 1.7.0 et ultérieure de la bibliothèque de base prend en charge plusieurs connexions WebSokcet, et chaque appel réussi à wx.connectSocket renverra une nouvelle SocketTask.

Adresse officielle du document : https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-socket.html#wxclosesocket

2. Exemples pratiques :

Vous avez d'abord besoin de l'url de l'adresse du socket : let url = 'wss://http://xxx.xxx.com/?xxx=xxx'

Remarque : 1. Ajoutez le socket dans le arrière-plan de gestion du mini programme Le port ne peut pas apparaître dans le nom de domaine ; 2. Si appID est utilisé, le protocole doit être wss ; 3. Le port mappé par le serveur socket ne prend en charge que 80 et 443, ce qui est le même que le compte officiel.

L'exemple suivant est :

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('../../config/socket.js');
const app = getApp();
data: {
  motto: 'Hello World',
  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}

Recommandations associées. :

Articles recommandés sur la déconnexion et la reconnexion

Explication détaillée du problème de déconnexion et de reconnexion de la connexion à la base de données Spring Boot en Java

Les objets et les chaînes Json sont convertis les uns aux autres, l'épissage des données JSON et l'utilisation de JSON sont présentés en détail (résumé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!