Maison > Article > interface Web > Chat construit par nodejs sse

Chat construit par nodejs sse

WBOYoriginal: 2023-05-23 19:07:36682parcourir

Salon de discussion construit par Node.js SSE

Avec la popularité et le développement d'Internet, les salons de discussion sont devenus une plate-forme importante pour la communication quotidienne en ligne des gens. En tant que langage JavaScript côté serveur basé sur des modèles d'E/S événementiels et non bloquants, Node.js peut considérablement améliorer les performances et la réactivité des applications et est donc devenu l'une des technologies préférées pour de nombreuses applications Web.

Cet article expliquera comment utiliser la technologie Node.js et SSE (Server-Sent Events) pour créer une salle de discussion simple afin que les utilisateurs puissent recevoir des messages de discussion en temps réel.

Node.js et SSE

SSE est une technologie définie en HTML5 qui permet au serveur d'envoyer des flux d'événements au client, et le client peut recevoir ces flux d'événements via l'API EventSource. Dans ce flux d'événements, le serveur peut envoyer des messages au client en temps réel, et le client peut également interagir en envoyant des données au serveur.

Node.js peut facilement créer un serveur Web et dispose d'un module HTTP intégré qui peut être utilisé pour gérer les requêtes et les réponses HTTP. Grâce à ce module, nous pouvons facilement mettre en œuvre la technologie SSE.

Construire une salle de discussion

2.1 Créer un serveur

Tout d'abord, nous devons créer un projet Node.js. Dans le répertoire racine du projet, nous créons un fichier server.js et introduisons le module http.

const http = require('http');

Ensuite, nous devons créer un serveur HTTP et écouter sur le port 8080.

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

2.2 Implémentation de la technologie SSE

Nous devons créer une route sur le serveur pour envoyer les flux d'événements. Dans cet itinéraire, nous utiliserons l'API EventSource pour envoyer des messages au client.

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 Implémentation de la fonction de salon de discussion

Après avoir terminé les étapes ci-dessus, nous pouvons maintenant implémenter la technologie SSE de base sur le serveur. Ensuite, nous devons implémenter la fonction de chat sur le client.

Nous devons créer une page HTML sur le client pour afficher les informations de discussion. Dans cette page, nous utiliserons JavaScript pour envoyer des messages de discussion et recevoir les messages renvoyés par le serveur. Et nous devons également utiliser l'API EventSource pour écouter les messages envoyés par le serveur.

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

Dans le code ci-dessus, nous créons un formulaire qui permet aux utilisateurs de saisir des informations de discussion. Lorsque l'utilisateur soumet ce formulaire, nous utiliserons l'API fetch pour envoyer le message de l'utilisateur au serveur.

En parallèle, nous avons également écouté tous les messages renvoyés par le serveur. Lorsque le serveur envoie un message de discussion, nous ajoutons le message à la liste de discussion déjà créée.

Résumé

Cet article présente le processus d'utilisation de la technologie Node.js et SSE pour créer une salle de discussion simple. Grâce à l'exemple de ce salon de discussion, nous pouvons également apprendre à utiliser la technologie SSE, ainsi que les méthodes de collaboration et les avantages de JavaScript et Node.js, ce qui constitue une bonne référence pour nos travaux de développement Web ultérieurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery ajax verrouillage de requête synchroneArticle suivant：jquery ajax verrouillage de requête synchrone

Articles Liés

Voir plus