用 Phoenix LiveView 做一个实时看板

要点

做一个小而完整的实时看板:每秒刷新一组吞吐指标,外加一条滚动的事件流,多浏览器标签同时在线且看到同一份数据。这个”多会话、同数据、秒级新鲜度”的约束会让每个设计决策都变重——缓存放在哪个进程、广播按什么粒度、列表怎么进 DOM,一个都绕不开。技术底座是 Phoenix LiveView 1.0(2024 年 12 月 GA)与《OTP 与进程》里的 GenServer/Supervisor;开山篇(Elixir 与 Phoenix 入门)只给了计数器一瞥,本文把它变成能跑的服务。

目标与验收

指标 目标 怎么测
新鲜度 新事件 1 秒内出现在所有标签 开两个浏览器标签,聚合器打时间戳,与页面渲染时间差对照(观察级即可)
多会话一致性 所有标签同一时刻数值相同 两标签并排放 10 分钟,无漂移
单会话内存 每个在线会话内存占用为 KB 量级 :observer.start() 看进程树;:erlang.process_info(pid, :memory) 抽查
并发规模 定性目标:数千级连接不劣化 本站未实测;公开口径见文末声明,不背书具体数字

整体架构

模拟器(每秒产生事件)               # 生产环境换成 telemetry 或上游 MQ 订阅
      │ cast
      ▼
Collector (GenServer)             # 滚动窗口聚合 + 每秒一次节流广播
      │ Phoenix.PubSub.broadcast("dashboard:metrics")
      ▼
DashboardLive × N (每标签一个进程) # handle_info 收广播 → stream/assign
      │ WebSocket diff
      ▼
浏览器 (DOM 补丁)
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇