uni小程序使用scoket配合后端sinalR(个人笔记)

380 阅读1分钟

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);
	};
	//消息接收事件 ReceiveMessage
	_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) {
			// if (_events[eventName] != null && _events[eventName] != undefined) { //取消判断,否则自定义绑定方法名需要一个一个添加
				_events[eventName] = eventMethod;
			// }
		},
		//连接方法
		connection: function(url) {
			console.log('开始链接:', url)
			let self = this;
                        //这里可以携带登录信息去验证链接 这里可以去拿缓存的用户凭证
                        //wx.connectSocket({
			//		url: url,
			//		header: {
				//		'Authorization': `Bearer ${userInfo.token}`
				//	},
			//	});
			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);
					//当收到返回消息type=1(调用方法)
					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 args = new Array();
			// args.push(data);
			let body = {
				arguments: data, //SignalR服务端接收时必须为数组参数
				target:sendFun, //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定义
data() {
    return {
        con: new signalR.signalR(),
    };
},
onload(){
    this.createSing()
},
onUnload(){
    console.log('页面卸载-断开 连接');
    this.con.abortConnection()
},
onHide(){
    console.log('页面卸载-断开 连接');
    this.con.abortConnection()
},
methods: {
//创建链接方法
    createSing: function() {
        // 接受消息 第一个参数是对应后端的方法名,第二个是method里面定义的方法 接受一个回调参数
        this.con.on('ReceiveSeatingChart', this.ReceiveSeatingChart);
        // 首次链接发送消息
        this.con.on('connection', () => {
        //这里调用发送消息时候,第一个参数是数值,只能是数组类型 第二个是方法名,对应后端的方法
            this.con.sendMessage([1], 'RegisterRoom');
        });
        this.con.connection(url); //连接url 是地址
    }
}

3.效果

image.png