チャットはnodejs sseによって構築されました-フロントエンドQ&A-php.cn

チャットはnodejs sseによって構築されました

WBOY

リリース： 2023-05-23 19:07:36

オリジナル

682 人が閲覧しました

Node.js SSE で構築されたチャットルーム

インターネットの普及と発展に伴い、チャットルームは人々の日常的なオンラインコミュニケーションのための重要なプラットフォームになりました。 Node.js は、イベント駆動型のノンブロッキング I/O モデルに基づくサーバーサイド JavaScript 言語として、アプリケーションのパフォーマンスと応答性を大幅に向上させることができるため、多くの Web アプリケーションで推奨されるテクノロジの 1 つとなっています。

この記事では、Node.js と SSE (Server-Sent Events) テクノロジを使用して、ユーザーがリアルタイムでチャットメッセージを受信できるようにシンプルなチャットルームを構築する方法を紹介します。

Node.js と SSE

SSE は、サーバーがイベントストリームをクライアントに送信できるようにする HTML5 で定義されたテクノロジであり、クライアントは EventSource API を使用できます。これらのイベントストリームを受信します。このイベントストリームでは、サーバーはリアルタイムでクライアントにメッセージを送信でき、クライアントはサーバーにデータを送信して対話することもできます。

Node.js は Web サーバーを簡単に作成でき、HTTP リクエストと応答の処理に使用できる HTTP モジュールが組み込まれています。このモジュールを通じて、SSE テクノロジーを簡単に実装できます。

チャットルームを構築する

2.1 サーバーを作成する

まず、Node.js プロジェクトを作成する必要があります。プロジェクトのルートディレクトリに、server.js ファイルを作成し、http モジュールを導入します。

const http = require('http');

ログイン後にコピー

次に、HTTP サーバーを作成し、ポート 8080 でリッスンする必要があります。

const server = http.createServer((req, res) => {
  // 代码稍后补充
});
server.listen(8080);

ログイン後にコピー

2.2 SSE テクノロジの実装

イベントストリームを送信するためのルートをサーバー上に作成する必要があります。このルートでは、EventSource API を使用してクライアントにメッセージを送信します。

const SSE_SEND_CONTENT_TYPE = 'text/event-stream; charset=utf-8';
const SSE_SEND_DATA_PREFIX = 'data: ';
const SSE_SEND_EVENT_PREFIX = 'event: ';
const SSE_SEND_ID_PREFIX = 'id: ';
const SSE_SEND_RETRY_PREFIX = 'retry: ';

const headers = {
    'Content-Type': SSE_SEND_CONTENT_TYPE,
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
};

server.on('request', (req, res) => {
    if (req.method === 'GET' && req.url === '/chat') {
        res.writeHead(200, headers);

        const clientId = Date.now();
        const sseStream = new ServerSentEventsStream(clientId, res);
        clients.set(clientId, sseStream);

        req.on('close', () => {
            clients.delete(clientId);
            sseStream.close();
        });
    } else {
        res.writeHead(404);
        res.end();
    }
});

class ServerSentEventsStream {
    constructor(clientId, response) {
        this.clientId = clientId;
        this.response = response;
        this.closed = false;
    }

    sendEvent(event, data) {
        if (!this.closed) {
            const message = `${SSE_SEND_EVENT_PREFIX} ${event}
${SSE_SEND_DATA_PREFIX}${JSON.stringify(data)}

`;
            this.response.write(message);
        }
    }

    close() {
        if (!this.closed) {
            this.closed = true;
            this.response.end();
        }
    }
}

ログイン後にコピー

2.3 チャットルーム機能の実装

上記の手順を完了すると、サーバーに基本的な SSE テクノロジを実装できるようになります。次に、クライアントにチャット機能を実装する必要があります。

チャット情報を表示するには、クライアント上で HTML ページを作成する必要があります。このページでは、JavaScript を使用してチャットメッセージを送信し、サーバーから返されたメッセージを受信します。また、EventSource API を使用して、サーバーから送信されたメッセージをリッスンする必要もあります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatroom</title>
</head>
<body>
  <form id="chat-form">
    <input type="text" id="msg-input" placeholder="Enter message">
    <button type="submit" id="send-button">Send</button>
  </form>
  <ul id="chat-list"></ul>
  <script>
    const chatList = document.getElementById('chat-list');
    const chatForm = document.getElementById('chat-form');
    const msgInput = document.getElementById('msg-input');
    const sendButton = document.getElementById('send-button');

    const eventSource = new EventSource('/chat');
    eventSource.onmessage = function(event) {
      const chatMsg = JSON.parse(event.data);
      const chatItem = document.createElement('li');
      chatItem.innerText = `${chatMsg.sender}: ${chatMsg.msg}`;
      chatList.appendChild(chatItem);
    }

    chatForm.addEventListener('submit', function(event) {
      event.preventDefault();
      const formData = new FormData(chatForm);
      fetch('/chat', { method: 'POST', body: formData });
      msgInput.value = '';
    });
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、ユーザーがチャット情報を入力できるフォームを作成します。ユーザーがこのフォームを送信すると、フェッチ API を使用してユーザーのメッセージがサーバーに送信されます。

同時に、サーバーから返されるすべてのメッセージも聞きました。サーバーがチャットメッセージを送信すると、作成済みのチャットリストにメッセージが追加されます。

概要

この記事では、Node.js と SSE テクノロジを使用してシンプルなチャットルームを作成するプロセスを紹介します。このチャットルームの例を通じて、SSE テクノロジの使用方法、JavaScript と Node.js のコラボレーション方法と利点を学ぶこともでき、その後の Web 開発作業の良い参考になります。

以上がチャットはnodejs sseによって構築されましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。