微信小程序websocket
发布时间:2021-09-16 09:12:50作者:顺晟科技点击:
websocket也就是长连接,使用长连接后服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,那么就可以通过这个技术做一些及时性的功能
例如:聊天室,饭店多人同时点餐等等。
前端在小程序上实现的方式很简单,如下: 代码可以放在app.js里面,通过this.globalData.socketStatus状态来判断是否开启socket
onLaunch(){
if(this.globalData.socketStatus == \'closed\'){
this.openSocket();
}
}
微信小程序websocket方法基本就在这块js里面,不懂得仔细看注释或者去官方文档查看 https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/wx.sendSocketMessage.html
// websocket
openSocket() {
// 打开信道
wx.connectSocket({
url: this.globalData.socketUrl, //后台给你的长连接地址,定义在globalData中
header:{\'content-type\': \'application/json\'},
})
//打开时的动作
wx.onSocketOpen(() => {
console.log(\'WebSocket 已连接\');
this.globalData.socketStatus = \'connected\'; //将状态更换成已连接
let msg = {
user: \'张三\'
}
if (this.globalData.socketStatus === \'connected\') {
//自定义的发给后台识别的参数
console.log("sendMsg:",msg)
wx.sendSocketMessage({
data: JSON.stringify(msg)
})
}
})
//断开时的动作
wx.onSocketClose(() => {
console.log(\'WebSocket 已断开\');
this.globalData.socketStatus = \'closed\';
})
//报错时的动作
wx.onSocketError(error => {
console.error(\'socket error:\', error)
})
// 监听服务器推送的消息
wx.onSocketMessage(message => {
//把JSONStr转为JSON
message = message.data.replace(" ", "");
if (typeof message != \'object\') {
message = message.replace(/\ufeff/g, ""); //重点,后台返回来的数据类型需要转成字符串然后再JOSN.parse转成json
var msg = JSON.parse(message);
message = msg;
}
var pages = getCurrentPages().pop(); //获取到当前页面
if (pages.onMessage){ //当前页面是否有onMessage方法,如果有就执行,实时获取后台返回的数据
pages.onMessage(message);
}
})
},
index.js中可通过onMessage方法获取实时数据
onMessage(message){
console.log(\'getMsg:\',message)
},
index.js中发送数据使用 wx.sendSocketMessage方法
// webscoket发送数据
sendMessage() {
let msg = {
name: \'李四\'
}
if (app.globalData.socketStatus === \'connected\') {
//自定义的发给后台识别的参数
console.log("sendMsg:",msg)
wx.sendSocketMessage({ //发送
data: JSON.stringify(msg)
})
}
},
- 上一篇 : 微信小程序开发总结
- 下一篇 : 微信小程序--form表单消息推送


