nodejs implémente une fonction de chat unique-Questions et réponses frontales-php.cn

nodejs implémente une fonction de chat unique

WBOY

Libérer： 2023-05-28 11:01:09

original

655 Les gens l'ont consulté

Node.js implémente une fonction de chat unique

Node.js est un environnement d'exécution JavaScript basé sur le moteur V8 de Chrome, qui permet à JavaScript de s'exécuter côté serveur. Grâce à Node.js, nous pouvons facilement créer des applications Web hautes performances et évolutives.

Dans cet article, nous utiliserons Node.js pour implémenter une simple fonction de chat unique, qui est une discussion en temps réel entre deux utilisateurs.

Outils et technologies nécessaires :

Node.js
Frame express
Socket.IO

Créer un projet

Tout d'abord, nous devons créer un nouveau projet Node.js. Vous pouvez utiliser la commande npm init pour initialiser le projet ou utiliser tout autre moyen pour créer le dossier du projet.

Installation des dépendances

Ensuite, nous devons installer les bibliothèques Express et Socket.IO. Ouvrez la ligne de commande dans le dossier du projet et entrez la commande suivante :

npm install express socket.io --save

Copier après la connexion

Cela installera les bibliothèques Express et Socket.IO et les ajoutera au fichier package.json.

Créer un serveur

Dans le dossier du projet, créez un fichier appelé server.js, il s'agit de notre fichier serveur principal. Ajoutez le code suivant :

const express = require('express');
const app = express();

const server = app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

Copier après la connexion

Cela créera une application Express et la liera au port 3000. Maintenant, nous pouvons tester que le serveur fonctionne correctement en ouvrant un navigateur et en visitant http://localhost:3000. Si tout va bien, vous devriez voir un message « Impossible GET / ». C'est parce que nous n'avons ajouté aucune route à l'application.

Créer une salle de discussion

Maintenant, nous devons créer une salle de discussion pour implémenter la fonction de discussion en temps réel entre deux utilisateurs différents. Pour cela, nous pouvons utiliser la bibliothèque Socket.IO pour gérer les événements et la communication en temps réel.

Tout d'abord, nous devons ajouter le code suivant au fichier server.js :

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

Copier après la connexion

Cela créera une instance Socket.IO et la liera au serveur HTTP existant. Lorsqu'il y a une nouvelle connexion, la fonction de rappel affichera un message « Un utilisateur connecté ». Lorsque la connexion est déconnectée, la fonction de rappel génère un message « Un utilisateur déconnecté ».

Nous pouvons désormais ajouter la possibilité d'envoyer et de recevoir des messages dans le salon de discussion. Pour cela, nous pouvons utiliser la méthode submit() et la méthode on() de Socket.IO.

Ajoutez le code suivant dans le fichier server.js :

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

Copier après la connexion

Cela permettra aux utilisateurs d'envoyer des messages et de diffuser les messages à tous les clients connectés.

Créer un client

Maintenant, nous devons utiliser une simple page HTML et JavaScript pour nous connecter au serveur Socket.IO et implémenter la fonctionnalité d'envoi et de réception de messages. Dans le dossier du projet, créez un nouveau fichier appelé index.html et ajoutez le code suivant :

<!DOCTYPE html>
<html>
<head>
  <title>Node.js Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="message-form">
    <input type="text" id="input-message" autocomplete="off" />
    <button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      const socket = io();
      $('#message-form').submit(function(e) {
        e.preventDefault(); // prevents page reloading
        const message = $('#input-message').val();
        socket.emit('chat message', message);
        $('#input-message').val('');
        return false;
      });
      socket.on('chat message', function(msg) {
        $('#messages').append($('<li>').text(msg));
      });
    });
  </script>
</body>
</html>

Copier après la connexion

Dans ce fichier HTML, nous avons utilisé la bibliothèque jQuery pour simplifier la manipulation du DOM. Il contient une zone de saisie et un bouton "Envoyer", ainsi qu'un élément

Dans la partie JavaScript, nous avons utilisé la bibliothèque côté client de Socket.IO pour créer une instance Socket.IO qui se connecte au serveur et envoie un message au serveur une fois que l'utilisateur a soumis le formulaire. Lorsque le client reçoit un nouveau message du serveur, il ajoute un nouvel élément de liste à la page.

Lancez l'application

Maintenant, nous pouvons démarrer l'application en tapant la commande suivante dans la ligne de commande :

node server.js

Copier après la connexion

Ensuite, ouvrez un navigateur Web et visitez http://localhost:3000. Vous devriez voir une interface de discussion simple. Ouvrez une autre fenêtre de navigateur ou un autre onglet de navigateur sur le même ordinateur pour commencer à discuter.

Résumé

Dans cet article, nous avons construit une application de chat unique en temps réel à l'aide de la bibliothèque Node.js et Socket.IO. Cette application permet aux utilisateurs d'envoyer et de recevoir des messages et utilise la bibliothèque Socket.IO pour gérer toutes les communications en temps réel. Bien que cette application soit relativement simple, elle démontre les principes de base de la création d'applications Web en temps réel à l'aide de Node.js et Socket.IO.

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!