概要
SSEを利用して、ユーザー毎にリアルタイムで通知を送ることのできるデモ用のWebアプリです。
長い間、「リアルタイム通知ってどうやって実装するんだろう」と疑問に思っては何もしてこなかったのですが、バックエンドの実装にもそこそこ慣れてきたので作りました。
ユーザーの作成と削除、各ユーザーから別のユーザーに通知を送信・受信する機能があります。
使用した技術と実装の詳細
- Server-sent events
- Next.js
- Hono RPC
- Redis
- SQLite
リアルタイム通知の技術
リアルタイム通知を実装するためには、WebSocket、SSE、ポーリング(ロングポーリング)などの技術があります。 サーバーへのリクエストを減らしたいというのと、できるだけシンプルに実装したい、双方向の通信が必要ないという理由でSSEを使いました。
バックエンドでのStream管理
実装するにあたって、バックエンドでStreamを管理する方法に少し悩みました。 ユーザーが通知を送ったあと、相手のStreamにデータを書き込む必要があるのですが、どうやって相手のStreamを取得すればよいのかわかりませんでした。 同じサーバーのインスタンスでSSE接続と通知が処理されるのであれば、Node.jsのEventEmitterを使用できるのですが、 今回はサーバレス環境のバックエンドを想定しているので諦めました。 そこで、外部のPub/SubとしてRedisを使うことにしました。 SSE接続でユーザーidを含むチャンネルをsubscribeして、通知があったときに相手のユーザーのチャンネルにpublishしています。
通知の扱い
SSEは通知があったことを知らせるためだけに使用していて、通知のデータは実際にはRDBに存在し、 リアルタイムで通知を受け取ったらRDBを読みに行くようにしています。
Hono RPC
Hono RPCを使うとAPIリクエストに簡単に型がつくのでとても便利でした。 tRPCなどもありますが、セットアップが少しだけ面倒くさいので、シンプルなWebサーバーを作るならHono RPCが手軽で良いと思います。
学び
リアルタイム通知は難しいという先入観を持っていたため、なかなか手を出すことができなかったのですが、SSEは思ったよりもシンプルに実装できると感じました。 ただ、あくまでローカル環境でしか動かしていないので、運用するにあたっての課題は出てくると思います。
運用にあたっては、自分で実装するよりも、KnockやFCMなどのマネージドなサービスを使ったほうが安く済むかもしれないです。