Labs · Presence

谁还在站上

不是协同编辑。右上角绿点和数字是全站入口,默认关。打开后计入全站在场人数;指针只和停在同一路径的人互相看见(不同页的文档坐标对不上)。

怎么试

  1. 点击右上角的绿点和数字。首页、About、文章页都是同一个全站房间。
  2. 再用另一个窗口打开这同一页,也打开入口,移动、点击或选择文字。
  3. 人数是全站合计;指针及其状态只在同路径(这页是 /labs/presence)出现。

房间怎么切

全站一个房间 site。你在 About、别人在文章页,人数会一起涨;但只有同路径才会画出对方的指针。

为什么要加弹簧

发送端每 70ms 才推一个点。直接按点位渲染,别人的指针就是每秒跳十几下的方块。所以每个光标自己跑一条弹簧,把两个点之间的空档补成连续运动。

参数是速感优先的临界阻尼(Motion 的 useSpringstiffness 420 / damping 42):补间只填空档、不过冲,快速甩动也不会拖出一条尾巴。

发送端暂停一下再剧烈移动,别的窗口里仍是从当前位置连续追过去,而不是跳一下——弹簧是重定向,不是从头播一段动画。只有这一页自己在滚动时会瞬间落位:视口动得比弹簧快,再补间反而会让指针在错误的位置上慢慢地飘。

往下滚

Lenis 把滚动做在内容位移上。如果坐标只看视口,两个人滚到不同段落时,光标会漂在错误的字上。所以这里发的是文档相对位置。

纸面上的字会跟着滚动走,别人的指针也应该钉在同一段。往下多滚一点,让第二个窗口停在另一段,再看指针会不会跟着内容走。

一段占位,用来对光标

河对岸的灯先亮,风后到。句子本身不重要,重要的是两个人的指针是不是落在同一行附近。再往下还有几屏。

若只有一个人打开入口,人数是 1,屏幕上不会出现别人的指针。再次点击入口会立刻断线,不再广播。

再往下

生产环境的 Durable Object 需要 Workers Paid。本地 astro dev 就能测 WebSocket。手机粗指针不画光标,只保留开关。