SuperAPI AI 工具集

nuxt-realtime

前端与建站

查看项目

更新于 10-16 06:23

技能介绍

用途:为 Nuxt 应用接入 Laravel Echo 的 WebSocket 实时更新能力,适用于订阅频道、监听事件、实现界面实时刷新以及管理频道订阅。

配置:通过 nuxt-laravel-echo 模块启用,在 nuxt.config.ts 的 runtimeConfig.public.echo 中设置 key、host、scheme、port,分别可通过环境变量 NUXT_PUBLIC_ECHO_KEY、NUXT_PUBLIC_ECHO_HOST、NUXT_PUBLIC_ECHO_SCHEME、NUXT_PUBLIC_ECHO_PORT 提供。

主要能力与用法:核心组合式函数 useRealtime() 提供 privateChannel、presenceChannel、leaveChannel。可用 privateChannel('posts.{id}', postId) 订阅频道并返回 channel,通过 channel.on('PostUpdated', (event) => { refresh() }) 监听事件;也可 channel.on(['PostCreated','PostUpdated','PostDeleted'], refresh) 一次监听多个事件。组件卸载时用 onUnmounted(() => { leaveChannel('posts.{id}', postId) }) 清理订阅。频道名与事件名建议在 app/constants/channels.ts、app/constants/events.ts 中集中管理,例如 Posts = 'posts'、Post = 'post.{post}'、PostCreated、PostUpdated。

适用场景:需要在 Nuxt 前端接收后端 Laravel Echo 推送、展示列表或详情页实时变化的项目。

限制:当前资料未提供安装命令、依赖版本、收费或平台支持等细节;实际密钥、主机与端口需自行配置,公开资料未说明具体服务端实现。