Chat erstellt von nodejs sse-Front-End-Fragen und Antworten-php.cn

Chat erstellt von nodejs sse

WBOY

Freigeben： 2023-05-23 19:07:36

Original

717 Leute haben es durchsucht

Chatroom erstellt von Node.js SSE

Mit der Popularität und Entwicklung des Internets sind Chatrooms zu einer wichtigen Plattform für die tägliche Online-Kommunikation der Menschen geworden. Als serverseitige JavaScript-Sprache, die auf ereignisgesteuerten und nicht blockierenden I/O-Modellen basiert, kann Node.js die Leistung und Reaktionsfähigkeit von Anwendungen erheblich verbessern und ist daher zu einer der bevorzugten Technologien für viele Webanwendungen geworden.

In diesem Artikel erfahren Sie, wie Sie mithilfe der Node.js- und SSE-Technologie (Server-Sent Events) einen einfachen Chatroom erstellen, damit Benutzer Chatnachrichten in Echtzeit empfangen können.

Node.js und SSE

SSE ist eine in HTML5 definierte Technologie, die es dem Server ermöglicht, Ereignisströme an den Client zu senden, und der Client kann diese Ereignisströme über die EventSource-API empfangen. In diesem Ereignisstrom kann der Server in Echtzeit Nachrichten an den Client senden, und der Client kann auch interagieren, indem er Daten an den Server sendet.

Node.js kann problemlos einen Webserver erstellen und verfügt über ein integriertes HTTP-Modul, das zur Verarbeitung von HTTP-Anfragen und -Antworten verwendet werden kann. Mit diesem Modul können wir die SSE-Technologie problemlos implementieren.

Erstellen Sie einen Chatroom

2.1 Erstellen Sie einen Server

Zuerst müssen wir ein Node.js-Projekt erstellen. Im Stammverzeichnis des Projekts erstellen wir eine server.js-Datei und führen das http-Modul ein.

const http = require('http');

Nach dem Login kopieren

Dann müssen wir einen HTTP-Server erstellen und Port 8080 abhören.

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

Nach dem Login kopieren

2.2 SSE-Technologie-Implementierung

Wir müssen auf dem Server eine Route zum Senden von Ereignisströmen erstellen. Auf diesem Weg verwenden wir die EventSource-API, um Nachrichten an den Client zu senden.

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();
        }
    }
}

Nach dem Login kopieren

2.3 Implementierung der Chatroom-Funktion

Nach Abschluss der oben genannten Schritte können wir nun die grundlegende SSE-Technologie auf dem Server implementieren. Als nächstes müssen wir die Chat-Funktion auf dem Client implementieren.

Wir müssen auf dem Client eine HTML-Seite erstellen, um Chat-Informationen anzuzeigen. Auf dieser Seite verwenden wir JavaScript, um Chat-Nachrichten zu senden und vom Server zurückgegebene Nachrichten zu empfangen. Außerdem müssen wir die EventSource-API verwenden, um auf vom Server gesendete Nachrichten zu warten.

<!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>

Nach dem Login kopieren

Im obigen Code erstellen wir ein Formular, das es Benutzern ermöglicht, Chat-Informationen einzugeben. Wenn der Benutzer dieses Formular absendet, verwenden wir die Abruf-API, um die Nachricht des Benutzers an den Server zu senden.

Gleichzeitig haben wir auch alle vom Server zurückgegebenen Nachrichten abgehört. Wenn der Server eine Chat-Nachricht sendet, fügen wir die Nachricht der bereits erstellten Chat-Liste hinzu.

Zusammenfassung

In diesem Artikel wird der Prozess der Verwendung von Node.js und SSE-Technologie zum Erstellen eines einfachen Chatrooms vorgestellt. Am Beispiel dieses Chatrooms können wir auch den Umgang mit der SSE-Technologie sowie die Kollaborationsmethoden und Vorteile von JavaScript und Node.js erlernen, was eine gute Referenz für unsere spätere Webentwicklungsarbeit darstellt.

Das obige ist der detaillierte Inhalt vonChat erstellt von nodejs sse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!