UNI-APP_WebSocket长连接封装

socket.js

import {
	VUE_APP_WS_URL
} from "@/utils/index.js";
const Socket = function() {

	// this.ws.close(this.close.bind(this));
};


// #ifdef H5
function wss(wsSocketUrl) {
	let ishttps = document.location.protocol == 'https:';
	if (ishttps) {
		return wsSocketUrl.replace('ws:', 'wss:');
	} else {
		return wsSocketUrl.replace('wss:', 'ws:');
	}
}
// #endif



Socket.prototype = {
	// close() {
	//   clearInterval(this.timer);
	//   this.ws.close();
	// },
	onSocketOpen: function(my) {
		uni.$emit('socketOpen', my)
	},
	init: function() {
		var that = this;
		this.timer = setInterval(function() {
			that.send({
				type: "ping"
			});
		}, 10000);
	},
	send: function(data) {
		let datas = JSON.stringify(data)
		return uni.sendSocketMessage({
			data: datas
		});
	},
	onMessage: function(res) {
		const {
			type,
			data = {}
		} = JSON.parse(res.data);
		uni.$emit(type, data)
	},

	onClose: function() {
		uni.closeSocket()
		clearInterval(this.timer);
		uni.$emit("socket_close");
	},
	onError: function(e) {
		uni.$emit("socket_error", e);
	},
	close: function() {
		uni.closeSocket();
	},
	onStart: function(token, form_type) {
		let wssUrl = `${VUE_APP_WS_URL}`
		this.ws = uni.connectSocket({
			url: wssUrl + '?type=user&token=' + token + '&form_type=' + form_type,
			header: {
				'content-type': 'application/json'
			},
			method: 'GET',
			success: (res) => {}
		});
		this.ws.onOpen(this.onSocketOpen.bind(this))
		this.ws.onError(this.onError.bind(this));
		this.ws.onMessage(this.onMessage.bind(this))
		this.ws.onClose(this.onClose.bind(this));
	}
};

Socket.prototype.constructor = Socket;
export default Socket;

兼容支付宝小程序版

import {
	VUE_APP_WS_URL
} from '@/config/app.js'
const Socket = function() {

	// this.ws.close(this.close.bind(this));
};


// #ifdef H5
function wss(wsSocketUrl) {
	let ishttps = document.location.protocol == 'https:';
	if (ishttps) {
		return wsSocketUrl.replace('ws:', 'wss:');
	} else {
		return wsSocketUrl.replace('wss:', 'ws:');
	}
}
// #endif



Socket.prototype = {
	// close() {
	//   clearInterval(this.timer);
	//   this.ws.close();
	// },
	onSocketOpen: function(my) {
		uni.$emit('socketOpen', my)
	},
	init: function() {
		var that = this;
		this.timer = setInterval(function() {
			that.send({
				type: "ping"
			});
		}, 10000);
	},
	send: function(data) {
		let datas = JSON.stringify(data)
		// #ifdef MP-ALIPAY
		return this.ws.send({
			data: datas
		})
		// #endif
		// #ifndef MP-ALIPAY
		return uni.sendSocketMessage({
			data: datas
		});
		// #endif
	},
	onMessage: function(res) {
		const {
			type,
			data = {}
		} =
		// #ifdef MP-ALIPAY
		JSON.parse(res.data.data);
		// #endif
		// #ifndef MP-ALIPAY
		JSON.parse(res.data);
		// #endif
		uni.$emit(type, data)
	},

	onClose: function() {
		uni.closeSocket()
		clearInterval(this.timer);
		uni.$emit("socket_close");
	},
	onError: function(e) {
		uni.$emit("socket_error", e);
	},
	close: function() {
		uni.closeSocket();
	},
	onStart: function(token, form_type) {
		let wssUrl = `${VUE_APP_WS_URL}`
		this.ws = uni.connectSocket({
			url: wssUrl + '?type=login&token=' + token,
			header: {
				'content-type': 'application/json'
			},
			method: 'GET',
			// #ifdef MP-ALIPAY
			multiple: true,
			// #endif
			success: (res) => {}
		});
		this.ws.onOpen(this.onSocketOpen.bind(this))
		this.ws.onError(this.onError.bind(this));
		this.ws.onMessage(this.onMessage.bind(this))
		this.ws.onClose(this.onClose.bind(this));
	}
};

Socket.prototype.constructor = Socket;
export default Socket;

main.js

import socket from './libs/socket.js'
Vue.prototype.$socket = new socket();

使用

onLoad(options) {
	uni.showLoading({
		title: '客服连接中...'
	});
},
onUnload() {
	this.$socket.onClose();
	uni.$off()
},
onReady() {
	//链接长连接
	this.$socket.onStart(this.$store.state.app.token, form_type);
	// 链接成功
	uni.$once('success', () => {
		console.log('连接成功')
		this.$socket.init();
	});
	uni.$once('socketOpen', () => {
		// 	登录
		this.$socket.send({
			data: this.$store.state.token,
			type: 'login'
		});
		this.$nextTick(e => {
			this.getChatList();
		})
	});


	// 发送消息
	this.$socket.send({
		data: {
			token: this.$store.state.token,
		},
		type: 'login'
	});
	uni.$on('socket_error', () => {
		this.$util.Tips({
			title: '连接失败'
		});
	});
	// 消息接收
	uni.$on('login', data => {
		console.log('res::', data);
	});
}