DurableObjects について

Cloudflare Workers Tech Talk in Tokyo #3 で話した内容です
https://workers-tech.connpass.com/event/324272/

## 自己紹介
- https://github.com/honojs/hono/graphs/contributors
- https://yjs.napochaan.dev/
- https://next-demo.napochaan.dev/

## JS RPC
- https://zenn.dev/chimame/articles/f86db24897be6a

## ping/pong
- https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#ping_%E3%81%A8_pong_websockets_%E3%81%AE%E9%BC%93%E5%8B%95
- https://stackoverflow.com/questions/10585355/sending-websocket-ping-pong-frame-from-browser
- https://websockets.spec.whatwg.org/#ping-and-pong-frames

### DurableObject JS RPC
- https://github.com/cloudflare/workerd/issues/2319

## ライブラリ作りました
- https://github.com/napolab/durabcast

Transcript

1. # DurableObjects について
 Cloudflare Workers Tech Talks in Tokyo #3
 8/1 naporitan

2. ## Take Home Message • WebSocket は DurableObjects によって身近なものになった
 • Hibernation API が便利
 • ライブラリ作ったのでぜひ使ってください！

3. ## 自己紹介 • name: naporitan ◦ twitter: naporin24690, github: naporin0624 • hono/client を中心にコントリビューション ◦ https://github.com/honojs/hono/graphs/contributors
 • Cloudflare Workers をフロントエンドの拡張の視点から調査
 ◦ y-durableobjects
 ◦ Demo of `next/image` using Cloudflare Transform images

4. ## 自己紹介
5. ## 自己紹介
6. チャット機能どう作りますか？
7. ## チャットどう作る？ • firestore
 • pusher
 • ロングポーリング

8. ## Durable Objects 登場 • id ごとに 1 つのオブジェクト対応
 • 強整合な KV 付属
 • JS RPC が利用できる
 • WebSocket を払い出せる
 DurableObject 実装例

9. ### id ごとに 1 つのオブジェクト • 同じ id ならすべてのリクエストは1つのオブジェクトで処理される

10. ### id ごとに 1 つのオブジェクト • 同じ id ならすべてのリクエストは1つのオブジェクトで処理される

11. ## 強整合な KV • カウンターの作成可能
 • カウンターと同様に RateLimit も作れる 

12. ### JS RPC • class で定義した method が使える
 • chimame さんの記事がわかりやすいです

13. ## Durable Objects 利用先 • リクエストカウンタ
 • リアルタイムチャット
 • ゲーム
 • 共同編集
 • OBS Overlay

14. 今回は DurableObjects で WebSocket を扱うための Tips を紹介します
15. ## Durable Objects で WebSocket を扱う • Hibernation API
 • ping/pong
 • JS RPC

16. ## Durable Objects で WebSocket を扱う • Hibernation API
 • ping/pong
 • JS RPC

17. ### Hibernation API とは • サーバーが休止状態になる
 ◦ 接続を維持したまま休止する 
 ◦ 休止している間は料金が発生しない 
 • 専用 API が存在する
 ◦ webSocketMessage
 ◦ webSocketError
 ◦ webSocketClose
 ◦ etc…

18. ### サーバーが休止状態になるとは • だいたい 5 ~ 10s message のやり取りがないと閉じられる
 ◦ class の状態はサーバーが休止状態になる度に揮発する 
 ◦ 永続化したい状態を保存するときは Transaction Storage に入れる
 • メソッドが呼ばれると起動
 ◦ WebSocket イベント・alarm・JS RPC
 • constructor で非同期処理をするときは blockConcurrencyWhile を使用する

19. ## Durable Objects で WebSocket を扱う • Hibernation API
 • ping/pong
 • JS RPC

20. ### ping/pong • 死んだコネクションを自動的に切りたい
 ◦ ws の ping 相当が欲しい
 • ping/pong frame でやり取りしてる
 ◦ WebSocket サーバーの記述 - Web API | MDN
 ◦ ping は 0x09, pong は 0xA

21. #### WebSocket には ping/pong frame がない • Web API の WebSocket には ping/pong frame を送信する術がない
 ◦ Sending websocket ping/pong frame from browser - Stack Overflow
 ◦ https://websockets.spec.whatwg.org/#ping-and-pong-frames
 ▪ > These are not currently exposed in the API.

22. ### ping/pong • 特定の message でやり取りする
 ◦ client から ping が来たら server で pong する(逆でも可)
 ◦ Hibernation API を利用してる場合、休止状態から復帰してしまう 
 ▪ クライアント数増加に伴い休止する時間が少なくなる 
 • 意味ない

23. 壊れた接続の検出と コネクションの停止 はどうする？
24. DurableObjects の API と Hibernation API を 組み合わせることで解決できる
25. #### 接続の監視と停止 • 休止状態のまま返答する API
 • 接続の定期確認
 • 自動返答した時間を確認する API
 • WebSocket に値を埋め込む 

26. #### 接続の監視と停止 • 休止状態のまま返答する API
 ◦ WebSocketRequestResponsePair
 ◦ setWebSocketAutoResponse

27. #### 接続の監視と停止 • 自動返答した時間を確認する API
 ◦ getWebSocketAutoResponseTimestamp
 • WebSocket に値を埋め込む 
 ◦ serializeAttachment

28. #### 接続の監視と停止 • 接続の定期確認
 ◦ setAlarm
 ◦ alarm

29. ## Durable Objects で WebSocket を扱う • Hibernation API
 • ping/pong
 • JS RPC

30. ### DurableObject JS RPC • WebSocket が JS RPC でサポートされていない
 ◦ https://github.com/cloudflare/workerd/issues/2319
 JS RPC で WebSocket を払い出す
 RPC 経由で WebSocket を返す

31. ### DurableObject JS RPC • WebSocket が JS RPC でサポートされていない
 ◦ https://github.com/cloudflare/workerd/issues/2319
 WebSocket は Serialize できずエラー

32. WebSocket は fetch で 払い出す必要がある
33. Hono RPC と組み合わせて型安全を得る
34. ### JS RPC + Hono RPC • fetch で WebSocket の発行
 • RPC でその他ロジック実行

35. ### JS RPC + Hono RPC • fetch で WebSocket の発行
 • RPC でその他ロジック実行

36. ### JS RPC + Hono RPC • fetch で WebSocket の発行
 • RPC でその他ロジック実行

37. ### JS RPC + Hono RPC • fetch で WebSocket の発行
 • RPC でその他ロジック実行

38. ### JS RPC + Hono RPC • ロジックを method で定義
 • Hono で fetch 経由で method 実行

39. ### JS RPC + Hono RPC • ロジックを method で定義
 • Hono で fetch 経由で method 実行

40. ### JS RPC + Hono RPC • ロジックを method で定義
 • Hono で fetch 経由で method 実行

41. ### JS RPC + Hono RPC
42. Client 側でも Hono RPC を利用する
43. ### Hono RPC(Client) • upgrade ミドルウェアを作る
 • outputFormat を設定することで PRC に WebSocket を返すことを伝える

44. ### Hono RPC(Client) • upgrade ミドルウェアを設定

45. ### Hono RPC(Client) • Client 側でも WebSocket の呼び出しができる

46. ### Hono RPC(Client) • 再接続可能な WebSocket にも対応できるように PR を出しています
 • このように利用できるようになるかも...？

47. ## ライブラリを作りました • Hibernation API 搭載
 • 接続の監視と停止
 • WebSocket の払い出し
 https://github.com/napolab/durabcast

48. End
49. ## (おまけ) PartyKit • Durable Objects を扱うためのもう一つのやり方
 • Hibernation API が option 1 つで切り替えられる
 • Cloudflare Workers と Durable Objects を 1 つの class で定義
 ◦ onStart, onConnect, onRequest など直感的な interface を採用
 • yjs のサーバー実装・client 実装もあるためアプリケーションに組み込みやすくなっ ている

50. ## (おまけ) PartyKit • OSS だがビルドサーバーが partykit 側にあるため最終成果物がどうなっているか わからない
 • binding を自由に設定することができない
 ◦ ダッシュボードからの設定も不可能