uniapp写一个封装好的webScoket
时间: 2023-10-10 21:15:50 浏览: 82
好的,我可以为你提供一个简单的WebScoket封装示例,你可以在Uniapp中直接使用。
```javascript
// 创建WebSocket类
class WebSocketClient {
/**
* 构造函数
* @param {String} url WebSocket连接地址
* @param {Object} options WebSocket配置项
*/
constructor(url, options = {}) {
this.url = url;
this.options = options;
this.socket = null;
}
/**
* 连接WebSocket服务器
*/
connect() {
return new Promise((resolve, reject) => {
this.socket = uni.connectSocket({
url: this.url,
...this.options,
success: () => {
resolve(this.socket);
},
fail: (err) => {
reject(err);
},
});
});
}
/**
* 监听WebSocket连接打开事件
* @param {Function} callback 回调函数
*/
onOpen(callback) {
this.socket.onOpen(callback);
}
/**
* 监听WebSocket连接关闭事件
* @param {Function} callback 回调函数
*/
onClose(callback) {
this.socket.onClose(callback);
}
/**
* 监听WebSocket接收到服务器的消息事件
* @param {Function} callback 回调函数
*/
onMessage(callback) {
this.socket.onMessage(callback);
}
/**
* 监听WebSocket错误事件
* @param {Function} callback 回调函数
*/
onError(callback) {
this.socket.onError(callback);
}
/**
* 发送消息到WebSocket服务器
* @param {String/Object/ArrayBuffer} data 发送的消息内容
* @param {Object} options 发送消息的配置项
*/
send(data, options = {}) {
this.socket.send({
data,
...options,
});
}
/**
* 关闭WebSocket连接
* @param {Number} code 关闭的状态码
* @param {String} reason 关闭的原因
*/
close(code = 1000, reason = '') {
this.socket.close({
code,
reason,
});
}
}
export default WebSocketClient;
```
使用时,可以这样调用:
```javascript
import WebSocketClient from '@/utils/websocket-client';
const socket = new WebSocketClient('ws://localhost:3000');
socket.connect().then(() => {
console.log('WebSocket连接成功');
});
socket.onOpen(() => {
console.log('WebSocket连接已打开');
});
socket.onClose(() => {
console.log('WebSocket连接已关闭');
});
socket.onMessage((event) => {
console.log('WebSocket接收到消息', event.data);
});
socket.onError((error) => {
console.error('WebSocket连接发生错误', error);
});
socket.send('Hello WebSocket');
socket.close();
```
这个示例代码中,我们创建了一个WebSocketClient类,用于封装WebSocket的连接、发送、接收等操作。你可以根据自己的需要,对该类进行进一步的扩展和优化。
阅读全文