Maison interface Web js tutoriel Comment utiliser Node.js pour implémenter une fonction de chat en temps réel sur le Web

Comment utiliser Node.js pour implémenter une fonction de chat en temps réel sur le Web

Nov 08, 2023 am 11:57 AM
nodejs web 实时聊天

Comment utiliser Node.js pour implémenter une fonction de chat en temps réel sur le Web

Avec le développement rapide d'Internet, les fonctions de communication en temps réel sont devenues une fonctionnalité incontournable pour de nombreux sites Web et applications. En tant qu'environnement d'exécution JavaScript d'E/S asynchrone léger, efficace et piloté par événements, Node.js peut créer rapidement des applications en temps réel hautes performances, il est donc devenu le meilleur choix pour développer des fonctions de communication en temps réel. Cet article présentera en détail comment utiliser Node.js pour implémenter une fonction de chat en temps réel sur le Web et fournira des exemples de code spécifiques.

Tout d'abord, nous devons créer un serveur Web de base, qui peut être implémenté à l'aide du module http fourni avec Node.js. Le code spécifique est le suivant :

const http = require('http');
const server = http.createServer();

server.listen(3000, () => {
    console.log('服务器已启动,监听端口:3000');
});
Copier après la connexion

Ensuite, nous devons utiliser le module socket.io pour implémenter la fonction de communication en temps réel. Socket.io est une bibliothèque de communication en temps réel basée sur le protocole WebSocket et compatible avec plusieurs méthodes de transmission. Elle prend en charge la communication bidirectionnelle entre le client et le serveur et est très adaptée aux scénarios de discussion en temps réel. La commande pour installer le module socket.io est la suivante :

npm install socket.io
Copier après la connexion

Une fois l'installation terminée, nous pouvons utiliser le module socket.io côté serveur pour activer la fonctionnalité de communication en temps réel. Le code spécifique est le suivant :

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

io.on('connection', (socket) => {
    console.log('有一个用户已连接');

    socket.on('disconnect', () => {
        console.log('有一个用户已断开连接');
    });

    socket.on('chat message', (msg) => {
        console.log('收到一条新消息:' + msg);
        io.emit('chat message', msg);
    });
});

server.listen(3000, () => {
    console.log('服务器已启动,监听端口:3000');
});
Copier après la connexion

Dans le code ci-dessus, nous écoutons l'événement de connexion de socket.io, ce qui signifie qu'il sera déclenché lorsqu'un utilisateur se connectera. Lorsqu'un utilisateur se connecte, nous afficherons un message d'invite sur la console. Ensuite, nous avons écouté l'événement de déconnexion de socket.io, qui sera déclenché lorsque l'utilisateur se déconnectera. Lorsqu'un utilisateur se déconnecte, nous afficherons également un message d'invite sur la console. Enfin, nous avons écouté l'événement de message de discussion personnalisé, qui indique la réception de nouveaux messages des utilisateurs. Lorsque de nouveaux messages arrivent, nous les diffusons à tous les utilisateurs en ligne.

Côté client, nous devons introduire le module socket.io-client pour se connecter au serveur et réaliser l'affichage et l'envoi du chat en temps réel. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>实时聊天</title>
        <script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(function() {
                var socket = io();

                $('form').submit(function(e) {
                    e.preventDefault(); // 阻止表单提交
                    var msg = $('#m').val();
                    socket.emit('chat message', msg); // 发送消息到服务器
                    $('#m').val('');
                    return false;
                });

                socket.on('chat message', function(msg) { // 收到新消息
                    $('#messages').append($('<li>').text(msg));
                });
            });
        </script>
    </head>
    <body>
        <ul id="messages"></ul>
        <form>
            <input type="text" id="m" autocomplete="off" />
            <button>发送</button>
        </form>
    </body>
</html>
Copier après la connexion

Dans le code ci-dessus, nous avons introduit les modules socket.io-client et jQuery. Une fois la page chargée, nous créons une connexion avec le serveur et écoutons l'événement de message de discussion, ce qui signifie qu'il sera déclenché lorsqu'un nouveau message est reçu. Lorsqu'un nouveau message arrive, nous l'ajoutons à la liste des messages sur la page. Dans le même temps, lorsque l'utilisateur saisit du texte dans la zone de saisie et clique sur le bouton d'envoi, nous envoyons le message au serveur.

En résumé, nous avons implémenté la fonction de chat en temps réel basée sur le protocole WebSocket en utilisant les modules Node.js et socket.io. Dans les projets réels, nous pouvons également étendre les données telles que le stockage persistant, l'authentification d'identité et l'envoi de messages pour fournir des services de communication en temps réel plus riches.

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Nodejs est-il un framework backend ? Nodejs est-il un framework backend ? Apr 21, 2024 am 05:09 AM

Node.js peut être utilisé comme framework backend car il offre des fonctionnalités telles que des performances élevées, l'évolutivité, la prise en charge multiplateforme, un écosystème riche et une facilité de développement.

Comment connecter Nodejs à la base de données MySQL Comment connecter Nodejs à la base de données MySQL Apr 21, 2024 am 06:13 AM

Pour vous connecter à une base de données MySQL, vous devez suivre ces étapes : Installez le pilote mysql2. Utilisez mysql2.createConnection() pour créer un objet de connexion contenant l'adresse de l'hôte, le port, le nom d'utilisateur, le mot de passe et le nom de la base de données. Utilisez connection.query() pour effectuer des requêtes. Enfin, utilisez connection.end() pour mettre fin à la connexion.

Quelle est la différence entre les fichiers npm et npm.cmd dans le répertoire d'installation de nodejs ? Quelle est la différence entre les fichiers npm et npm.cmd dans le répertoire d'installation de nodejs ? Apr 21, 2024 am 05:18 AM

Il existe deux fichiers liés à npm dans le répertoire d'installation de Node.js : npm et npm.cmd. Les différences sont les suivantes : différentes extensions : npm est un fichier exécutable et npm.cmd est un raccourci de fenêtre de commande. Utilisateurs Windows : npm.cmd peut être utilisé à partir de l'invite de commande, npm ne peut être exécuté qu'à partir de la ligne de commande. Compatibilité : npm.cmd est spécifique aux systèmes Windows, npm est disponible multiplateforme. Recommandations d'utilisation : les utilisateurs Windows utilisent npm.cmd, les autres systèmes d'exploitation utilisent npm.

Quelles sont les variables globales dans nodejs Quelles sont les variables globales dans nodejs Apr 21, 2024 am 04:54 AM

Les variables globales suivantes existent dans Node.js : Objet global : global Module principal : processus, console, nécessiter Variables d'environnement d'exécution : __dirname, __filename, __line, __column Constantes : undefined, null, NaN, Infinity, -Infinity

Y a-t-il une grande différence entre nodejs et java ? Y a-t-il une grande différence entre nodejs et java ? Apr 21, 2024 am 06:12 AM

Les principales différences entre Node.js et Java résident dans la conception et les fonctionnalités : Piloté par les événements ou piloté par les threads : Node.js est piloté par les événements et Java est piloté par les threads. Monothread ou multithread : Node.js utilise une boucle d'événements monothread et Java utilise une architecture multithread. Environnement d'exécution : Node.js s'exécute sur le moteur JavaScript V8, tandis que Java s'exécute sur la JVM. Syntaxe : Node.js utilise la syntaxe JavaScript, tandis que Java utilise la syntaxe Java. Objectif : Node.js convient aux tâches gourmandes en E/S, tandis que Java convient aux applications de grande entreprise.

Nodejs est-il un langage de développement back-end ? Nodejs est-il un langage de développement back-end ? Apr 21, 2024 am 05:09 AM

Oui, Node.js est un langage de développement backend. Il est utilisé pour le développement back-end, notamment la gestion de la logique métier côté serveur, la gestion des connexions à la base de données et la fourniture d'API.

Comment déployer le projet nodejs sur le serveur Comment déployer le projet nodejs sur le serveur Apr 21, 2024 am 04:40 AM

Étapes de déploiement de serveur pour un projet Node.js : Préparez l'environnement de déploiement : obtenez l'accès au serveur, installez Node.js, configurez un référentiel Git. Créez l'application : utilisez npm run build pour générer du code et des dépendances déployables. Téléchargez le code sur le serveur : via Git ou File Transfer Protocol. Installer les dépendances : connectez-vous en SSH au serveur et installez les dépendances de l'application à l'aide de npm install. Démarrez l'application : utilisez une commande telle que node index.js pour démarrer l'application ou utilisez un gestionnaire de processus tel que pm2. Configurer un proxy inverse (facultatif) : utilisez un proxy inverse tel que Nginx ou Apache pour acheminer le trafic vers votre application

Lequel choisir entre nodejs et java ? Lequel choisir entre nodejs et java ? Apr 21, 2024 am 04:40 AM

Node.js et Java ont chacun leurs avantages et leurs inconvénients en matière de développement Web, et le choix dépend des exigences du projet. Node.js excelle dans les applications en temps réel, le développement rapide et l'architecture de microservices, tandis que Java excelle dans la prise en charge, les performances et la sécurité de niveau entreprise.

See all articles