最近在项目中有用到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() {
();
},
methods: {
/**
* 创建一个 WebSocket 连接
* @param {number|string} id 连接的对象id
*/
handleConnectWebSocket(id) {
return new Promise(resolve => {
// 连接 WebSocket
socketTask = ({ url: wss + (), complete: ()=> {} });
// 监听 WebSocket 的打开事件
(() => {
// 通过返回的socketTask的onMessage事件 - 监听 WebSocket 接受到服务器的消息事件
resolve(socketTask);
});
});
},
/**
* 关闭 WebSocket 连接
*/
handleCloseWebSocket() {
if(socketTask) {
();
socketTask = null;
}
},
/**
* 处理 WebSocket 发送消息
* @param {string|object} message 发送的消息内容
*/
handleSendSocketMessage(message) {
return new Promise(resolve => {
let data = message;
// 判断message的类型
if(typeof message === 'object') {
data = (data);
}
({ data, success: () => resolve() });
});
},
}
}
// 导出...
export default webSocketMixin;如何使用？
在需要用到的页面引入mixin，下面直接上代码
<template>
<view>
</view>
</template>
<script>
import webSocketMixin from '@/mixins/';
export default {
mixins: [webSocketMixin],
data() {
return {
}
},
async onLoad() {
// 传入一个连接对象的id
const socketTask = await (连接的对象id);
// socket打开成功后
(res => {
// 监听...
(res);
});
// 这边可以手动调用方法关闭连接 - 由于mixin中在beforeDestroy生命周期中调用了关闭连接的方法，所以不手动关闭也可以的
();
},
};
</script>
<style scoped lang="scss">
</style>