BackEnd

Server-Side Eventsを触ってみた

投稿日:

はじめに

最近リアルタイム通信を行う事が出来るServer-Side Events (SSE)という技術について触れる事があったので、紹介したいと思います。

Server-Side Events(SSE) とは

サーバーがHTTP接続を通じてクライアントにリアルタイムでイベントデータを送信するための技術です。

主な特徴として以下のようなものがあります

  • サーバーからクライアントへの単方向のみの通信(WebSocketの様な双方向通信ではない)
  • 一度接続が確立されると、接続を閉じるまでクライアントはサーバーからのメッセージを受信し続ける
  • テキストベースデータのみ(バイナリーデータは不可みたいです)
  • 身近な例だとChat GPTのパラパラと表示されるレスポンスにも使用されています

実装してみる

今回はサーバー側にLaravel、フロント側にReactでSSEを使って、1秒毎に現在時刻を取得し続ける実装をしてみたいと思います

こんな感じです

動作の流れ

  • クライアント(React)がサーバー(Laravel)のSSEを行うエンドポイントに接続してSSEコネクションを作る
  • コネクション作成後は、クライアントはサーバーから1秒毎に現在時刻のレスポンスを受信し続ける
  • クライアントは受信した時刻を更新し続ける

Laravel側

  • StreamedResponseを使ってレスポンスを生成します
  • ヘッダーのContent-Typeをtext/event-streamに設定することで、クライアントがSSEイベントを受信出来るようにします
  • while文で1秒毎に現在時刻のデータをJSONデータを送信しています。10秒経過したら止めています

React側

  • Event Sourceを使用して、サーバーからのイベントストリームをリッスン開始します
  • Event SourceはSSE用のインターフェースでSSEの挙動(イベント受取時やエラー発生時)を簡潔に実装する事が出来ます
  • サーバーからデータ受信する度に、onmessageイベントの処理が実行され、画面表示を更新しています
  • エラー時とアンマウント時はSSE接続を閉じています

この時コンソールのネットワークタブを見ると一秒毎にデータを受信していることが確認出来ます。

Chat GPTのレスポンス

ちなみにChat GPTのプロンプトに「Hello」と入力して「Hello! How can I assist you today?」と表示されるまでのログを見ると、SSEでレスポンスを受け取っていて、partsキーに本文が入力されていく事が確認出来ました

さいごに

Server-Side Eventsについて触ってみました。結構使えそうな場面が多そうな気がするので機会があればもう少し深掘りしてみたいなと思います。

おすすめ書籍

Laravelの教科書 バージョン10対応【Laravel11サポートガイドあり】 基礎から学ぶ Laravel

blog-page_footer_336




blog-page_footer_336




-BackEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Go言語

Go 1.23 でslicesとmapsに追加された関数

1 はじめに2 slicesパッケージに追加された関数2.1 All2.2 Backward2.3 Values2.4 AppendSeq2.5 Collect2.6 SortedFunc2.7 Ch ...

laravel logo

Laravelのコントローラの基礎

1 はじめに2 ルーティング2.1 使用可能なメソッド2.2 リダイレクト2.3 Viewの返却2.4 ルートパラメータ2.5 ミドルウェア2.6 プレフィックス3 バリデーション3.1 コントローラ ...

Stripe Connectを使ってCheckoutを利用した継続課金を実装

1 はじめに1.1 Checkoutを使う場合の動線2 決済画面への遷移2.1 マイグレーション2.2 Checkout Sessionの作成3 決済完了後の制御4 おまけ4.1 ローカルでWebho ...

軽量なAlpine Linuxイメージでgitbookのローカル環境を構築する

1 はじめに2 Alpine Linuxとは3 Docker本体のインストール4 サンプルリポジトリのダウンロード5 dockerイメージ作成6 Gitbook初期化&実行7 Dockerの ...

rails

はじめてのrails、まずはローカル環境構築してみる

1 はじめに2 必要なライブラリ・ツールのインストール2.1 homebrew, rbenv2.2 rbenv-communal-gems3 最新安定版のrubyをインストール4 bundler, r ...

フォロー

blog-page_side_responsive

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。