uniapp中的websocket前后端交互
时间: 2023-11-23 12:56:49 浏览: 51
在uniapp中使用websocket进行前后端交互,可以按照以下步骤进行操作:
1. 在main.js中引入websocket.js,并挂载到vue原型上,具体操作如下:
```javascript
// 本人是将websocket.js放在utils文件夹下
import websocket from 'utils/websocket.js';
Vue.prototype.$ws = websocket;
```
2. 用户登陆成功后,调用websocket.js中的connectWebsocket函数,传入必要参数(连接地址、传给后端的参数、成功回调函数、失败回调函数、其他自定义参数),并重写websocket对象的onopen、onmessage、onclose、onerr函数,并填入自己的业务逻辑,建立websocket连接。具体操作如下:
```javascript
// 在页面中调用connectWebsocket函数
this.$ws.connectWebsocket(url, params, successCallback, failCallback, otherParams);
// 在websocket.js中定义connectWebsocket函数
function connectWebsocket(url, params, successCallback, failCallback, otherParams) {
let ws = new WebSocket(url);
ws.onopen = function() {
// websocket连接成功后的逻辑
successCallback();
};
ws.onmessage = function(evt) {
// 接收到websocket消息后的逻辑
let received_msg = evt.data;
// 具体业务逻辑处理
};
ws.onclose = function() {
// websocket连接关闭后的逻辑
};
ws.onerror = function() {
// websocket连接错误后的逻辑
failCallback();
};
}
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)