airi 项目中的 VueUse useOnline一行代码实现响应式在线状态检测【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airiuseOnline是 VueUse 提供的响应式在线状态组合式函数本质是useNetwork的轻量封装返回一个只读的ShallowRefboolean用于实时反映用户是否联网。在 airi 这个同时覆盖 Web / Electron 桌面端 / Capacitor 移动端的开源项目中vueuse/core被广泛引入见 apps/stage-web/package.json、packages/stage-ui/package.json 等多个包的依赖声明本指南将带你掌握useOnline的完整用法、底层原理Network Information API 与useNetwork、类型契约以及在多端实时交互场景下的实战组合技巧。useOnline 是什么根据仓库内的官方参考文档 useOnline.mduseOnline的定义只有一句话Reactive online state. A wrapper ofuseNetwork.即响应式的在线状态是useNetwork的封装。它不自己维护一套网络检测逻辑而是把useNetwork返回的NetworkState中的isOnline字段单独暴露出来让只需要判断在不在线的场景免去解构多个字段的负担。在 vueuse-functions Skill 中useOnline被归类在Sensors传感器类别下描述为 Reactive online state其Invocation规则为AUTO——即只要符合场景应优先使用它而不是手写navigator.onLine监听逻辑这是该项目编写 Vue/Nuxt 功能时的推荐做法。基本用法组合式 APIComposableimport { useOnline } from vueuse/core const online useOnline()调用后online是一个ReadonlyShallowRefboolean。与navigator.onLine只在页面加载时采一次样不同这个 ref 会在联网状态变化时自动更新你只需要在模板或watch中消费它script setup langts import { useOnline } from vueuse/core import { watch } from vue const online useOnline() watch(online, (isOnline) { // 状态变化时立刻响应 console.log(isOnline ? 网络已恢复 : 网络已断开) }) /script template div{{ online ? 在线 : 离线 }}/div /template组件式用法UseOnlineVueUse 为useOnline提供了对应的组件形式UseOnline通过作用域插槽scoped slot把状态暴露给模板适合在纯模板场景无需在 script 中处理逻辑下使用template UseOnline v-slot{ isOnline } Is Online: {{ isOnline }} /UseOnline /template类型声明解析useOnline的完整类型声明如下来自 useOnline.md/** * Reactive online state. * * see https://vueuse.org/useOnline * param options * * __NO_SIDE_EFFECTS__ */ export declare function useOnline( options?: ConfigurableWindow, ): ReadonlyShallowRefboolean几个值得注意的细节参数options?: ConfigurableWindow与 VueUse 其他浏览器相关函数一致可通过{ window: ... }注入自定义 window 对象这在 SSR、测试如 jsdom 之外的模拟环境或 iframe 场景下非常有用。返回ReadonlyShallowRefboolean只读浅层 ref你应该通过watch、computed或模板消费它而不是直接赋值。__NO_SIDE_EFFECTS__该函数被标记为无副作用可以被构建工具安全地 tree-shake 与移除这也是项目大量使用 VueUse 组合式函数的原因之一——按需引入不会带来多余的包体积。底层原理useOnline 与 useNetwork、Network Information APIuseOnline的取值来源于useNetwork而useNetwork的实现基于 Web 标准的Network Information API。根据 useNetwork.md 的说明The Network Information API provides information about the systems connection in terms of general connection type (e.g., wifi, cellular, etc.). This can be used to select high definition content or low definition content based on the users connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection.也就是说useNetwork不仅报告在不在线还能拿到连接类型wifi / cellular、有效带宽、RTT 等信息可用于按网络质量动态选择内容清晰度如给弱网用户推送低清资源。useOnline只是把它裁剪到最小可用面。如果你需要更细粒度的网络状态可以直接使用useNetworkimport { useNetwork } from vueuse/core const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } useNetwork() console.log(isOnline.value)useNetwork返回的NetworkState完整字段如下引自 useNetwork.md 的类型声明字段类型含义isOnlineReadonlyShallowRefboolean用户当前是否已连接网络offlineAtReadonlyShallowRefnumber \| undefined用户最后一次离线的时间戳onlineAtReadonlyShallowRefnumber \| undefined用户离线后重新连上的时间戳downlinkReadonlyShallowRefnumber \| undefined当前下载速度MbpsdownlinkMaxReadonlyShallowRefnumber \| undefined可达的最大下载速度MbpseffectiveTypeReadonlyShallowRefNetworkEffectiveType \| undefined检测到的有效速度类型rttReadonlyShallowRefnumber \| undefined当前连接的估计有效往返时间saveDataReadonlyShallowRefboolean \| undefined用户是否开启了省流量模式typeReadonlyShallowRefNetworkType检测到的连接/网络类型其中枚举类型定义export type NetworkType | bluetooth | cellular | ethernet | none | wifi | wimax | other | unknown export type NetworkEffectiveType slow-2g | 2g | 3g | 4g | undefined两个使用小技巧将返回值包装成 reactive 对象当字段较多时逐个解构会让模板变得啰嗦。useNetwork支持直接用reactive()包装从而以普通对象属性访问import { reactive } from vue import { useNetwork } from vueuse/core const network reactive(useNetwork()) console.log(network.isOnline) console.log(network.type)与watch组合实现精准响应对useOnline返回的 ref 使用watch即可在断网/恢复的瞬间触发业务逻辑见上文基本用法示例这是处理实时通信类功能最常见的数据驱动方式。在 airi 项目中的应用场景airi 是一个面向多端Web / macOS / Windows 桌面端 / 移动端的实时语音对话与游戏陪伴型项目网络连通性是所有实时功能的生命线。从仓库结构可以推断useOnline这类轻量组合式函数天然适合以下场景实时语音聊天realtime voice chat的前置检测在建立语音会话前读取useOnline()判断是否在线断开时提示用户网络异常避免音频流在弱网下无声失败。useNetwork的effectiveType/downlink字段还可用于动态切换音频码率或 WebRTC 配置。多端状态同步与降级策略项目的 Web 端 apps/stage-web、Electron 端 apps/stage-tamagotchi、移动端 apps/stage-pocket 共享 Vue 技术栈并统一依赖vueuse/core。在移动端Capacitor 环境中online状态可驱动弱网模式UI优先展示本地缓存内容。离线 UI 反馈在页面顶部或状态栏展示离线提示条配合UseOnline组件即可用极少量模板代码完成无需自建事件监听器。注意useOnline的底层依赖浏览器环境window/navigator.onLine事件因此在 Electron 渲染进程与 Web 端直接可用若在 SSR 或非浏览器环境调用应传入ConfigurableWindow选项或确保在挂载后如onMounted再读取这是使用所有 VueUse 浏览器型组合式函数的通用前提。扩展阅读本文核心文档useOnline 参考文档底层实现文档useNetwork 参考文档函数选型与调用规则vueuse-functions SkillSensors 类别useOnline的 Invocation 为 AUTOairi 中实际依赖 VueUse 的应用包示例apps/stage-web/package.json、packages/stage-ui/package.json、packages/stage-ui-live2d/package.json小结useOnline用一行调用取代了手写navigator.onLine 事件监听的样板代码返回只读的ShallowRefboolean天然融入 Vue 的响应式体系需要更细粒度信息时其底层useNetwork提供了连接类型、带宽、RTT 等完整网络画像。对于 airi 这类对网络敏感的实时交互应用理解这两层 API 的关系与各自的类型契约是写出简洁、健壮的多端网络状态处理逻辑的基础。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考