1.首先是别人封装的sinalR(二次处理,可以自定义绑定接受消息和发送消息的方法名)
var signalR = (function() {
let recordCode = 0x1e;
let recordString = String.fromCharCode(recordCode);
let isConnectioned = false;
let _events = new Array();
_events['send'] = function(obj) {
console.log(obj);
};
_events['ReceiveMessage'] = function(message) {
console.log('消息接收事件', message);
};
_events['connection'] = function() {
console.log('连接事件', message);
};
_events['close'] = function() {
console.log('连接已经关闭');
};
_events['error'] = function(ex) {
console.log('连接异常', ex);
};
return {
on: function(eventName, eventMethod) {
_events[eventName] = eventMethod;
},
connection: function(url) {
console.log('开始链接:', url)
let self = this;
wx.connectSocket({
url: url,
});
wx.onSocketOpen(function() {
console.log('WebSocket连接已打开!')
let handshakeRequest = {
protocol: 'json',
version: 1
};
let senddata = `${JSON.stringify(handshakeRequest)}${recordString}`;
self.isConnectioned = true;
wx.sendSocketMessage({
data: senddata,
});
_events['connection']();
});
wx.onSocketClose(function() {
console.log('WebSocket连接已关闭!')
self.isConnectioned = false;
_events['close']();
});
wx.onSocketMessage(function(res) {
try {
let jsonstr = String(res.data).replace(recordString, '');
if (jsonstr.indexOf('{}{') > -1) {
jsonstr = jsonstr.replace('{}', '');
}
let obj = JSON.parse(jsonstr);
console.log('接收数据:', obj);
if (obj.type == 1) {
_events[obj.target](obj.arguments);
}
} catch (ex) {
console.log('异常:' + ex);
console.log('收到服务器内容:' + res.data);
}
});
wx.onSocketError(function(ex) {
console.log('WebSocket连接打开失败,请检查!')
self.isConnectioned = false;
_events['error'](ex);
});
},
abortConnection: function() {
console.log(String(this.abortConnection.name));
wx.closeSocket();
},
sendMessage: function(data,sendFun) {
let self = this;
if (!self.isConnectioned) {
_events['error']('未连接');
return;
}
let body = {
arguments: data,
target:sendFun,
type: 1,
Headers: null
};
console.log('发送的参数:', body)
let senddata = `${JSON.stringify(body)}\u001e`;
wx.sendSocketMessage({
data: senddata,
success: function(res) {
console.log('发送成功')
_events['send'](res);
},
fail: function(ex) {
console.log(ex);
}
});
}
}
});
module.exports = {
signalR: signalR
}
2.在页面调用onload 或者onshow也可以但是要onhide时候断开链接
import signalR from '@/commjs/signalR.js';
data() {
return {
con: new signalR.signalR(),
};
},
onload(){
this.createSing()
},
onUnload(){
console.log('页面卸载-断开 连接');
this.con.abortConnection()
},
onHide(){
console.log('页面卸载-断开 连接');
this.con.abortConnection()
},
methods: {
createSing: function() {
this.con.on('ReceiveSeatingChart', this.ReceiveSeatingChart);
this.con.on('connection', () => {
this.con.sendMessage([1], 'RegisterRoom');
});
this.con.connection(url);
}
}
3.效果
