vue 封装websocket可设置请求体
时间: 2023-10-31 14:05:34 浏览: 84
vue中使用websocket
5星 · 资源好评率100%
Vue 可以通过封装 WebSocket 实现前端与后端的实时通信。以下是一个简单的封装 WebSocket 的代码示例:
```javascript
class WebSocketService {
constructor(url) {
this.url = url;
this.websocket = null;
}
connect(params) {
this.websocket = new WebSocket(this.url);
this.websocket.onopen = () => {
console.log('WebSocket connected');
// 发送请求体
this.send(params);
};
this.websocket.onmessage = (event) => {
console.log('WebSocket message received:', event.data);
};
this.websocket.onclose = () => {
console.log('WebSocket disconnected');
};
}
send(params) {
if (this.websocket.readyState === WebSocket.OPEN) {
this.websocket.send(JSON.stringify(params));
}
}
close() {
this.websocket.close();
}
}
```
在上述代码中,我们定义了一个 WebSocketService 类,它包含了连接、发送消息和关闭连接等方法。其中,connect 方法用于建立 WebSocket 连接,可以在该方法中设置请求体;send 方法用于发送消息,可以在该方法中动态设置请求体;close 方法用于关闭 WebSocket 连接。使用时,可以先创建一个 WebSocketService 实例,然后调用 connect 方法来建立连接,调用 send 方法来发送消息,调用 close 方法来关闭连接,例如:
```javascript
const ws = new WebSocketService('ws://localhost:8080');
ws.connect({ type: 'login', username: 'user1' });
ws.send({ type: 'message', content: 'Hello, world!' });
ws.close();
```
在上述示例中,我们创建了一个 WebSocketService 实例,然后调用 connect 方法建立连接,并设置了请求体为 { type: 'login', username: 'user1' };接着调用 send 方法发送消息,并动态设置请求体为 { type: 'message', content: 'Hello, world!' };最后调用 close 方法关闭连接。需要注意的是,请求体的格式可以根据具体需求自行定义。
阅读全文