uni-app中使用websocket

最近在项目中有用到websocket实现聊天对话功能，所以这里我就记录下我在项目中如何使用的。🙃

我在此封装了一个websocket的Mixin之后用直接引入调方法就可以完成，简直就是一步到位😁。

实现思路

websocket实现聊天功能无非就是简单的几个步骤：

1. 连接websocket

2. 监听websocket

3. 发送消息..

4. 关闭websocket连接

 websocket的mixin实现

/**
 *  WebSocket的Mixin
 */
import { wss } from '这边引入wss地址';

// webSocket 的对象
let socketTask = null;

// 定义一个mixin对象
const webSocketMixin = {
	/** 销毁之前 */
	beforeDestroy() {
		this.handleCloseWebSocket();
	},
    methods: {
       /**
		* 创建一个 WebSocket 连接
		* @param {number|string} id 连接的对象id
		*/
		handleConnectWebSocket(id) {
			return new Promise(resolve => {
				// 连接 WebSocket
				socketTask = uni.connectSocket({ url: wss + id.toString(), complete: ()=> {} });
				// 监听 WebSocket 的打开事件
				socketTask.onOpen(() => {
					// 通过返回的socketTask的onMessage事件 - 监听 WebSocket 接受到服务器的消息事件
					resolve(socketTask);
				});
			});
		},
		
		/**
		 * 关闭 WebSocket 连接
		 */
		handleCloseWebSocket() {
			if(socketTask) {
				socketTask.close();
				socketTask = null;
			}
		},
		
		/**
		 * 处理 WebSocket 发送消息
		 * @param {string|object} message 发送的消息内容
		 */
		handleSendSocketMessage(message) {
			return new Promise(resolve => {
				let data = message;
				// 判断message的类型
				if(typeof message === 'object') {
					data = JSON.stringify(data);
				}
				socketTask.send({ data, success: () => resolve() });
			});
		},
    }
}


// 导出...
export default webSocketMixin;

如何使用？

在需要用到的页面引入mixin，下面直接上代码

<template>
	<view>
		
	</view>
</template>

<script>
import webSocketMixin from '@/mixins/webSocket.js';
export default {
	mixins: [webSocketMixin],
	data() {
		return {

		}
	},
	async onLoad() {
		// 传入一个连接对象的id
		const socketTask = await this.handleConnectWebSocket(连接的对象id);
		// socket打开成功后
		socketTask.onMessage(res => {
			// 监听...
			console.log(res);
		});
		
		// 这边可以手动调用方法关闭连接 - 由于mixin中在beforeDestroy生命周期中调用了关闭连接的方法，所以不手动关闭也可以的
		this.handleCloseWebSocket();
	},
};
</script>

<style scoped lang="scss">
	
</style>