使用uniapp封装webSocket请求
大同小异,vue封装也差不多
request.js文件
const socketBaseUrl = 'wss://test.com/xxxxxdfjksdjfl' //后端给你的socket接口
export function webSocket(url, data, readCB, messageCB, finishedCB) {
//开始连接webSocket
const socketTask = uni.connectSocket({
url: socketBaseUrl + url + data.id //socket接口和地址和后端需要你传的内容
success: res => console.log(res), //请求成功
fail: e => console.log(e) //请求失败
})
//webSocket 连接打开事件
socketTask.onOpen(res => {
//连接后发送数据
socketTask.send({
data: data.dataStr
})
//返回
readCB(res, socketTask)
})
//webSocket 接收到服务器的消息事件
socketTask.onMessage(res => {
//返回
messageCB(res, socketTask)
})
//webSocket 错误事件
socketTask.onError(e => {
console.log('socket error: ', e)
})
}
//导出接口
export const sendAPI = (data, readCB , messageCB ,finishedCB) => webSocket('/message/', data, readCB, messageCB, finishedCB)
使用:
例:test.js
import { sendAPI } from '@/request.js';
export default{
data(){
return{
socketTask:'',
}
},
methods:{
handle(){
//传给后端的数据
let info = {id:5,dataStr:'test'}
//调接口
sendAPI(
info,
(_, socketTask) => {
//调取赋值socket,用于后面关闭连接
this.socketTask = socketTask;
},
(res) => {
try {
//解析返回数据
const socketRes = JSON.parse(res.data)
//打印返回数据
console.log(socketRes)
//接收返回的数据后,关闭socket
this.socketTask.close();
} catch (e) {
// 返回异常,关闭socket
this.socketTask.close();
}
}
)
};
}
}