ソケットを使用せずにリアルタイムのデータストリームを送信します.io

ハイフォークス
これまでは、サーバーから進行状況を取得する進行状況バーを望んでいたが、実際にそれはあまりにも多くの仕事cozを行ったことがない?
この記事では、多くのクールなことをするために使用できるバックエンドとフロントエンドの両方にSSE(Server send event)を実装する方法を示します😀)

📜 ちょっと文脈

そこで、しばらく戻ってMERNプロジェクトに取り組んでいました.クライアントのバックエンドAPIの進捗状況をリアルタイムで追跡する必要がありました.
ソケットを使っている人を見つけました.リアルタイムデータストリーム用のIOですが、私はこの単純なユースケースのためにライブラリ全体(~ 43.3 KB)を使いたくありませんでした.私は何かネイティブの余分なセットアップを必要とするネイティブ+簡単に使用したい.
私が見つけたときEventSource API これはバックエンドからイベントストリームを追跡するネイティブAPIです.
それは非常に使いやすく、余分なライブラリが必要です.

💻 どのようにそれを実装するには？

サーバからイベントを送信する📡

私はノードを使用しています.ランタイム＆サーバーのリクエストを処理するための表現のためのJS＆タイプスクリプトは、どんなバックエンドenvを使用して自由に感じる.

インデックスを作成します.TSファイルと必須モジュールのインポート

import express, { Response } from 'express';
import axios from 'axios';

サーバーを起動し、お好みの任意のポートを聞いて.私はこの例で4000を使います.

app.listen('4000', () => {
  console.log('Server listening to port 4000');
});

今すぐ作成sendData クライアントにデータを送信する関数.私は偽のAPIジェネレータを使用しています"JSONPlaceholder" ランダムなデータを取得する場合.
私はまた、それが少し現実的にするために睡眠機能を使用して遅延を追加しました.

const sendData = async (id: number, res: Response) => {
  const { data } = await axios.get(
    'https://jsonplaceholder.typicode.com/todos/' + id
  );
  const dataString = JSON.stringify(data);

  await sleep(1000);

  res.write('event: message\n');

  res.write('data: ' + dataString);
  res.write('\n\n');
};

const sleep = async (ms: number) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

今、ここで注意すべき重要なことはほとんどありません.🚨

res.write('event: message\n') - これは、クライアントが聞くイベントの種類を指定するために使用されます.メッセージはあなたが好きなものに置き換えることができます.

res.write('data: ' + dataString) - これは' message 'イベントの下で送信するデータを指定する場所です.

改行文字\n クライアントがデータとイベントを適切に解析するのに非常に重要です

最後に、要求されたときにこのルートにイベントを送信するためのルートを宣言し、次のヘッダーをデータイベントを書き込む前にレスポンスに追加します.
応答サイクルを終了することを忘れないでくださいres.end()

app.get('/events', async (_, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });
  for (let i = 1; i < 10; i++) {
    await sendData(i, res);
  }
  res.end();
});

そしてそれです.
それはすべてのExpressとノードを使用してクライアントにデータのリアルタイムストリームを送信する必要があります.js

クライアント側のイベントを受信する📥

私はこれのために反応を使用しています、しかし、どんなJSフレームワークまたはちょうどバニラJS(あなたが好む何でも)を使用するのを自由に感じてください.

簡単な反応プロジェクトを使用してセットアップcreate-react-app とアプリケーションからすべてのコードを削除します.アプリの機能の中にTSX.

データ状態を作成し、空の配列で初期化します.

const [data,setData] = useState<any>([]);

実装するuseEffect イベントハンドリングロジックを書くフック

useEffect(() => {
  // An instance of EventSource by passing the events URL
  const eventSource = new EventSource('http://localhost:4000/events');

  // A function to parse and update the data state
  const updateData = (messageEvent: MessageEvent) => {
    const parsedData = JSON.parse(messageEvent.data);
    setData((data: any) => [...data, parsedData]);
    if (parsedData.id === 9) {
      eventSource.close();
    }
  };

  // eventSource now listening to all the events named 'message'
  eventSource.addEventListener('message', updateData);

  // Unsubscribing to the event stream when the component is unmounted
  return () => eventSource.close();
}, []);

今、単にデータ配列を使用してリストを返し、データを受け取るときにリストが更新されるのを見てください

return (
  <div>
    <ul>
      {data.map((_: any) => (
        <li>{_.title}</li>
      ))}
    </ul>
  </div>
);

あなたがすべてを正しくしたならば、あなたが開いたとき、あなたはこのように何か出力をブラウザで見ることができますhttp://localhost:3000
😀 すごい!あなたは、単にそれらのイベントを聞くためにSSEとクライアントを送るために単純なサーバーを実装しました.
最後まで貼り付けてくれてありがとう.ドロップしてください❤ 閉じるこの動画はお気に入りから削除されています.