切断再接続とデータスプライシングのためのネイティブWebSokcet実装方法-ミニプログラム開発-php.cn

切断再接続とデータスプライシングのためのネイティブWebSokcet実装方法

小云云

リリース： 2018-01-27 10:43:24

オリジナル

3529 人が閲覧しました

WebSocketプロトコルはHTML5の新しいプロトコルです。ブラウザとサーバー間の全二重通信を実装します。この記事では主に、WeChat アプレットがネイティブ WebSokcet を使用して切断再接続とデータスプライシングを実現することについて説明します。これが皆様のお役に立てれば幸いです。

1. 説明

1. ミニプログラムのネイティブ WebSokcet には、切断と再接続のメカニズムがありません。

2. ミニプログラムの新しいバージョンのライブラリは、すでに複数の WebSokcet 接続をサポートしています。

公式説明: Basic Library 1.7.0 より前では、WeChat アプレットは同時に 1 つの WebSocket 接続しか持てませんでした。現在 WebSocket 接続が存在する場合、その接続は自動的に閉じられ、新しい WebSocket 接続が作成されます。基本ライブラリバージョン 1.7.0 以降は複数の WebSokcet 接続をサポートしており、wx.connectSocket への呼び出しが成功するたびに新しい SocketTask が返されます。

公式ドキュメントのアドレス: https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-socket.html#wxclosesocket

2 番目の実際的な例:

まず、ソケットアドレスの URL が必要です。 let url = 'wss://http://xxx.xxx.com/?xxx=xxx'

注: 1. ミニプログラム管理バックグラウンドでソケットドメイン名を追加する場合、ポートは表示されません。使用される場合、プロトコルは wss 3 である必要があります。ソケットサーバーによってマッピングされるポートは、公式アカウントと同じ 80 と 443 のみをサポートします。

以下の例:

1、socket.js

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

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

})

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

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

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

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: &#39;xcx&#39;, columnIds: "1"};
return stringToUint(JSON.stringify(packet))
}

function stringToUint (string) {
var string = base64_encode(encodeURIComponent(string)),
      charList = string.split(&#39;&#39;),
      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}

ログイン後にコピー