原生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 = #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;
 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}

相关推荐：

有关断线重连的文章推荐

java 中Spring boot 数据库连接断线重连问题详解

Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)

以上就是原生WebSokcet实现断线重连及数据拼接实现方法的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。