mcpField
H
hwc-realtime-streaming

hwc-realtime-streaming

github.com/thehotwireclub开发152214 次安装3 周前更新
代码仓库

关于 hwc-realtime-streaming

hwc-realtime-streaming 是通过 Turbo Streams 和 Stimulus 实现推送式 Hotwire 行为的技能，涵盖传输方式、流操作、事件顺序和多标签页处理。

主要功能

  1. 01选择传输与交付方式
  2. 02设计 Turbo Stream 操作
  3. 03规划流编排
  4. 04检查顺序与幂等性
  5. 05多标签页同步模式

适用场景

  1. 01添加内联流更新
  2. 02构建实时组合框更新
  3. 03协调播放列表更新
  4. 04为列表变化添加动画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-realtime-streaming

安装后在 Claude Code 中输入/hwc-realtime-streaming确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
2023-08-01-turbo-streams-inline-stream-tags.md
2023-08-15-turbo-streams-custom-stream-actions.md
2023-10-10-turbo-streams-custom-stream-actions-video-playlist-management.md
2023-11-21-stimulus-inter-tab-communication.md
2024-01-30-turbo-streams-custom-stream-actions-localstorage.md
2024-03-12-hotwire-combobox-with-real-time-data.md
2025-06-10-turbo-streams-list-animation-view-transitions.md
2026-04-14-turbo-streams-custom-stream-actions-push-state.md
INDEX.md

详细介绍

实时与流式处理

使用 Turbo Streams 和 Stimulus 实现推送驱动的 Hotwire 行为。

核心工作流

  1. 确定传输方式和交付形式：WebSocket、SSE、内联流标签或服务器响应流。
  2. 优先选择默认的 Turbo Stream 操作；只有默认操作无法满足需求时才添加自定义操作。
  3. 保持流操作精简且确定；避免在流载荷中嵌入任意脚本。
  4. 将流编排与领域 UI 关注点（表单、媒体、导航）分开。
  5. 验证所有实时更新的顺序、幂等性和多标签页行为。

防护原则

  • 优先使用 append/prepend/replace/update/remove/before/after/refresh，再考虑自定义操作。
  • 明确跨标签页同步（BroadcastChannel/localStorage），并将其限定为同设备语义。
  • 仅在动画能显著提升状态变化的清晰度时使用视图过渡。
  • 验证延迟或乱序消息下的故障模式。

有选择地加载参考资料

仅打开当前请求所需的文件。

  • 内联客户端流标签：references/2023-08-01-turbo-streams-inline-stream-tags.md
  • 自定义 Turbo Stream 操作：references/2023-08-15-turbo-streams-custom-stream-actions.md
  • 通过自定义操作进行高级播放列表编排：references/2023-10-10-turbo-streams-custom-stream-actions-video-playlist-management.md
  • 由 LocalStorage 支持的流状态：references/2024-01-30-turbo-streams-custom-stream-actions-localstorage.md
  • 使用视图过渡的列表动画：references/2025-06-10-turbo-streams-list-animation-view-transitions.md
  • 实时组合框更新：references/2024-03-12-hotwire-combobox-with-real-time-data.md
  • 标签页间通信模式：references/2023-11-21-stimulus-inter-tab-communication.md
  • 用于历史记录 pushState 的自定义流操作：references/2026-04-14-turbo-streams-custom-stream-actions-push-state.md

完整目录请参阅 references/INDEX.md。

转交给相邻技能

  • 拉取式导航/历史记录相关问题：使用 hwc-navigation-content
  • 表单验证和提交生命周期相关问题：使用 hwc-forms-validation
  • 媒体播放/上传交互：使用 hwc-media-content
  • 通用加载/进度/过渡 UX：使用 hwc-ux-feedback
  • 流式处理之外的 Stimulus 基础 API 问题：使用 hwc-stimulus-fundamentals

评论

支持 Markdown