Maison > Article > interface Web > 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
- PHPzoriginal
- 2023-11-08 11:57:501341parcourir
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');
});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
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');
});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>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!