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.18のWorkspacesモードでマルチモジュール化

1 はじめに2 マルチモジュール構成2.1 非Workspacesモードの場合2.2 Workspacesモードの場合3 go workコマンド3.1 init3.2 edit3.3 sync3.4 ...

rails

Rails5で出力される「alias_method_chain is deprecated.」について

1 はじめに2 alias_method_chainとは3 Module#prependとは4 とりあえず、DEPRECATION WARNINGの出力をなくしたい5 さいごに はじめに 直近のプロジ ...

WebアプリからLINEのメッセージを送る方法

1 はじめに2 Messaging APIとは2.1 Messaging APIの仕組み2.2 Webhookイベント2.3 メッセージオブジェクトの種類2.4 料金形態3 LINE Develope ...

Next.jsでサイトマップの実装

1 はじめに2 Sitemapとは3 基本的な実装方法4 動的に生成5 複数ファイルの生成6 さいごに7 おすすめ書籍 はじめに Next.jsでサイトマップの実装を行う方法を調べたので簡単にまとめて ...

laravel logo

LaravelでHTTP通信

1 はじめに2 インストール3 基本的な使い方3.1 GETでリクエストを投げる3.2 リクエストヘッダーを指定3.3 クエリパラメータを指定3.4 timeout時間を指定3.5 POSTでリクエス ...

フォロー

blog-page_side_responsive

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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