先介绍一下vueuse库,它为开发者提供了一系列简单好用的 Hooks,可以帮助我们快速实现各种功能,提高开发效率。
一、什么是 VueUse?
VueUse 是一个基于 Vue 3 Composition API 的高质量 Hooks 库,它提供了许多简单好用的 Hooks,可以帮助开发者快速实现各种功能。VueUse 的 Hooks 覆盖了数据请求、状态管理、视图操作、性能优化等多个方面,使得开发者可以更加专注于业务逻辑的实现。
二、使用useWebSocket
官方文档:https://www.vueusejs.com/core/useWebSocket/
import { useWebSocket } from "@vueuse/core";
/**
* status 是连接的状态值
* data 是 socket 推送过来的消息
* send 是一个方法, 用来发送消息给后台
* close 是一个方法,关闭 socket 连接
* open 如果当前的websocket是活跃的,将会关闭它重新打开一个新的
*/
const { status, data, send, open, close } = useWebSocket(wsUrl, {
onConnected: function (ws) {
console.log('websocket 连接成功!', ws)
},
onDisconnected: function (ws, event) {
console.log('onDisconnected')
},
onError: function (ws, event) {
console.log('onError')
},
onMessage: function (ws, event) {
console.log('event.data', event.data)
if (event.data) {
const info = JSON.parse(event.data)
console.log(info) // 这里就是websocket每次发送的消息
}
},
// 每隔x毫秒发送一次心跳,heartbeat默认为false
// heartbeat: true,
// heartbeat: {
// message: 'ping', // 心跳消息
// responseMessage: '', // 心跳的响应消息,如果未定义,将使用该消息
// interval: 1000, // 间隔(毫秒)
// pongTimeout: 1000, // 心跳响应超时,以毫秒为单位,默认为1000
// },
/*
* 不使用心跳,根据后台实际逻辑来,有时候发送心跳,不会返回任何数据,但是不会断开
* 如果设置为 true,表示需要心跳,发送心跳后,后台一定要返回信息,不然就会断开重连
* */
heartbeat: false,
// autoReconnect: true,
autoReconnect: {
retries: 3,
delay: 2000,
onFailed() {
alert('Failed to connect WebSocket after 3 retires')
},
},
autoClose: true, // 自动关闭连接
})
当然,除了在onMessage里去监听websocket的消息推送,也可以使用watch或者watchEffect来监听data或status,
watchEffect(async () => {
// watch ws发送的消息
if (data.value) {
// 将收到的ws数据转换为 JavaScript 对象
let parsedData = JSON.parse(data.value);
// 这里写对应的业务逻辑
}
if (status.value && status.value === 'CLOSED') {
// ws连接断开
}
});