前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序使用WebSokcet实现相关请求

微信小程序使用WebSokcet实现相关请求

原创
作者头像
疯狂的小程序
发布2018-01-26 16:26:52
1.9K0
发布2018-01-26 16:26:52
举报
文章被收录于专栏:疯狂的小程序疯狂的小程序

以前做小程序为了应急找了个插件去链接WebSokcet,文章传送门。

回过头在新项目中再次使用时出现了些许问题,不一一赘述。遂决定好好用一下原生的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

代码语言:javascript
复制
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 = '';

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

代码语言:javascript
复制
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

代码语言:javascript
复制
globalData: {
  socketConnectFail: false
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、说明
  • 二、实际例子:
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档