Maison > Applet WeChat > Développement de mini-programmes > Méthode d'implémentation native de WebSokcet pour la reconnexion par déconnexion et l'épissage des données

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

小云云
Libérer: 2018-01-27 10:43:24
original
3543 Les gens l'ont consulté

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
}
Copier après la connexion

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)
}
}
Copier après la connexion
3、app.js
globalData: {  socketConnectFail: false}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal