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


関連記事

laravel logo

Laravelの認可機能Gateを使ってみた

1 はじめに2 やる事3 Gate3.1 登録3.2 利用4 Policy5 ミドルウェアでの使用6 さいごに7 おすすめ書籍 はじめに Laravelには認可機能を簡単に実装出来るGateという機能 ...

laravel logo

Laravelでメールを送る

1 はじめに1.1 準備2 実装2.1 Mailableクラスの作成2.2 テンプレートの作成2.3 Mailableクラスの修正2.4 コントローラの作成2.5 コンフィグの修正3 さいごに4 おす ...

rails

【Puma】アプリサーバのチューニング

1 はじめに2 チューニングで注意する項目3 子プロセスの数3.1 最低3つの子プロセスを割り当てる3.2 最大子プロセス数3.3 CPUコア数と子プロセス数3.4 なぜPumaの子プロセス数を増やす ...

laravel logo

Laradock環境にPHPStormからXdebugする

1 はじめに2 Laradock側の設定変更2.1 xdebug.iniファイル2.2 .env2.3 コンテナの再構築3 PHPStormの設定3.1 Preferences3.1.1 Build, ...

Go言語

Go言語、ゴルーチン(goroutine)で並列処理を

1 はじめに2 ゴルーチン2.1 go文2.2 ゴルーチンの終了条件2.3 WaitGroup3 チャネル3.1 チャネルの型3.2 チャネルの生成3.3 チャネルの送受信3.4 チャネルとゴルーチン ...

フォロー

blog-page_side_responsive

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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