COLUMN
コラム
2023年03月06日
サーバーからクライアントに対してメッセージを送信する技術まとめ
カテゴリー:サービス, テクノロジー
タグ:DX, システム開発, 業務システム
Webアプリケーションは基本的にプル型です。つまりクライアントがアクセスすることでサーバー側でイベントが発生し、それに対してレスポンスを返すという形になります。
しかし、場合によってはクライアントに対してメッセージを送信したいと考えることがあるでしょう。そのために使える技術をまとめて紹介します。
WebSocket
サーバーとクライアント間でメッセージを送受信する際の最初の選択肢になります。ソケットを開いたままにしてメッセージを送り合うので、メッセージはリアルタイムで送受信されます。
送信できるメッセージはテキストのみなので、チャットやサーバーの処理完了通知などに用いられることが多いです。
SSE
Server-Sent Eventsの略になります。WebSocketのように使えますが、特徴はサーバーからクライアントに対する一方通行であるという点になります。WebSocketのようにクライアントからサーバーに対するメッセージには利用できません。
そのため、サーバーでの非同期処理を通知するのに使うことが多いようです。チャットのような機能も実現できますが、あえてSSEで実装するメリットは薄そうです。
WebRTC
WebRTCはWebSocketとは異なり、動画や音声などを扱えます。また、中央サーバーがある形だけでなく、P2Pでの相互送信も可能です(初期のコネクション時にサーバーが必要です)。
WebRTCではDataChannelが用意されており、テキスト(それ以外のデータも)を扱えます。このDataChannelはTCPではなく、UDPを利用しています。
Long Polling
Long PollingはWebSocketのような標準技術がない中でリアルタイム通信を実現するために使われていた技術になります。クライアントとサーバーの接続状態を長時間維持し、その間にデータを送信します。接続が切れたら、また即座にリクエストを実行します。
WebSocketに対応していないクライアントでも利用できるメリットはありますが、サーバー側の接続数を数多く消費してしまうデメリットもあります。
WebPush API
Webプッシュ通知は開いた際のイベントをWebブラウザで受け取ることができます。それを使ってクライアントからデータを取得するような処理も書けるでしょう。
実装時にはクライアントに送信許可が必要だったり、ブラウザから得られるキーを保存する必要があるなど、若干の手間があります。
そのWebサイトを開いている必要はありませんが、ブラウザは立ち上がっている必要があります。
Webhook
Webhookもこうした機能を実装するときによく注目される技術になります。Webhookはクライアントではなく、サーバーに対してリクエストを実行します。つまりサーバー間通信に利用する技術になります。
サーバー側で何かデータの変更があったのを知る際には、頻繁にリクエストを行う、WebSocketのようなコネクションを維持する技術を使うと言ったのが一般的です。しかしWebhookであれば、データの更新があったサーバーから、更新時にのみ通知を受け取れるようになります。
まとめ
サーバーからメッセージを送信することで、リアルタイムに状況を通知したり、状態を画面に反映できるようになります。業務アプリケーションのコラボレーション機能(共同編集機能)を実現したり、メッセージのやり取りに利用できるでしょう。
HexabaseではWebSocket、SSEによるメッセージ送信に対応しています。ぜひ活用してください。
- カテゴリー
- タグ
- プロジェクト管理 (10)
- DBaas (2)
- 通知 (1)
- BookReview (3)
- ACF (1)
- Hexabase_health (1)
- WebComponents (1)
- PaaS (3)
- case-study (5)
- セミナー (1)
- CSS (1)
- Tailwind CSS (1)
- 受託開発 (1)
- 基本用語 (18)
- low-code (1)
- database (2)
- api (3)
- クラウドサービス (5)
- ウォーターフォール開発 (2)
- アジャイル開発 (17)
- Supabase (1)
- TypeScript (1)
- フロントエンド (28)
- BaaS (7)
- サービス開発 (5)
- 失敗事例 (1)
- 生成AI (0)
- スクラム (1)
- ChatGPT (1)
- 月額制 (1)
- DX (27)
- スタートアップ (3)
- システム開発 (56)
- Web (13)
- バックエンド (4)
- Vue.js (1)
- ナレッジマネジメント (1)
- イノベーション (5)
- AI (4)
- Kubernetes (2)
- 業務システム (13)
- WebAssembly (1)
- nexaweb (1)
- GraphQL (1)
- システム運用 (9)
- keyword (4)
- faas (1)
- データベース (5)
- プログラミング (18)
- spa (1)
- Firebase (1)
- React (1)