Maison > Article > interface Web > Comment créer une salle de discussion en temps réel à l'aide de JavaScript et WebSocket

Comment créer une salle de discussion en temps réel à l'aide de JavaScript et WebSocket

WBOYoriginal: 2023-12-17 15:06:391187parcourir

Comment créer une salle de discussion en temps réel à laide de JavaScript et WebSocket

Introduction : Avec le développement continu d'Internet, la communication en temps réel devient de plus en plus importante. Les applications de chat en direct sont devenues une fonctionnalité standard sur de nombreux sites Web et applications. Cet article explique comment créer une salle de discussion simple en temps réel à l'aide de la technologie JavaScript et WebSocket.

1. Qu'est-ce que WebSocket
WebSocket est un protocole qui assure une communication bidirectionnelle en temps réel entre le client et le serveur. Par rapport au protocole HTTP traditionnel, WebSocket a une latence plus faible et des performances en temps réel plus élevées, et peut établir une connexion persistante entre le client et le serveur. WebSocket peut transmettre des données en temps réel sans actualiser la page.

2. Implémenter les outils et l'environnement requis

Un serveur avec support WebSocket, tel que Node.js, Java, etc.
Outils de développement front-end tels que VS Code.
Un navigateur prenant en charge WebSocket, tel que Chrome, Firefox, etc.

3. Créez le côté serveur

Installez Node.js et créez un nouveau dossier de projet.
Ouvrez la ligne de commande dans le dossier du projet et initialisez un nouveau projet Node.js. Exécutez la commande suivante :
```
 npm init
```
Installez le module WebSocket. Exécutez la commande suivante :
```
 npm install websocket
```

Créez un serveur WebSocket en utilisant le code suivant :

const WebSocket = require('websocket').server;
const http = require('http');

const server = http.createServer((request, response) => {});
server.listen(8080, () => {
 console.log('Server is listening on port 8080');
});

const wsServer = new WebSocket({
 httpServer: server
});

wsServer.on('request', (request) => {
 const connection = request.accept(null, request.origin);
 
 connection.on('message', (message) => {
     // 处理接收到的消息
     console.log('Received message: ', message.utf8Data);
     
     // 向客户端发送消息
     connection.sendUTF('Message received: ' + message.utf8Data);
 });
 
 connection.on('close', (reasonCode, description) => {
     // 处理连接关闭事件
     console.log('Connection closed');
 });
});

Enregistrez et démarrez le serveur, en vous assurant qu'il fonctionne correctement.

4. Créez le client

Créez un nouveau fichier HTML dans le dossier du projet et nommez-le index.html.

Insérez le code suivant dans index.html :

<!DOCTYPE html>
<html>
<head>
 <title>实时聊天室</title>
</head>
<body>
 <form id="chatForm">
     <input type="text" id="messageInput" placeholder="输入消息">
     <button type="submit">发送</button>
 </form>
 <div id="chatBox"></div>

 <script>
     const chatForm = document.getElementById('chatForm');
     const messageInput = document.getElementById('messageInput');
     const chatBox = document.getElementById('chatBox');

     const socket = new WebSocket('ws://localhost:8080');

     socket.onopen = () => {
         console.log('连接已建立');
     };

     socket.onmessage = (event) => {
         const message = event.data;
         console.log('Received message: ', message);

         // 显示接收到的消息
         const messageElement = document.createElement('div');
         messageElement.innerText = message;
         chatBox.appendChild(messageElement);
     };

     chatForm.addEventListener('submit', (event) => {
         event.preventDefault();

         const message = messageInput.value;
         console.log('Sending message: ', message);

         // 发送消息到服务器
         socket.send(message);

         // 清空输入框
         messageInput.value = '';
     });
 </script>
</body>
</html>

Enregistrez et ouvrez le fichier index.html avec un navigateur pour vous assurer que le client fonctionne normalement.

5. Testez la salle de discussion

Ouvrez plusieurs onglets dans le navigateur, et chaque onglet agit en tant qu'utilisateur de la salle de discussion.
Entrez un message dans la zone de saisie de n'importe quel onglet et envoyez-le.
Observez les messages reçus par chaque onglet pour vous assurer que les messages sont synchronisés en temps réel.

Avec les étapes ci-dessus, vous avez réussi à créer une salle de discussion simple en temps réel à l'aide de JavaScript et WebSocket. Vous pouvez étendre et optimiser en fonction des besoins réels, comme l'ajout d'une authentification utilisateur, la création de salles, l'envoi de photos, etc.

Résumé : Cet article explique comment créer une salle de discussion en temps réel à l'aide de JavaScript et WebSocket. WebSocket peut établir une connexion persistante entre le client et le serveur pour obtenir une transmission de données rapide et en temps réel. J'espère que cet article vous aidera à créer des applications de communication en temps réel.

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!

Java JavaScript firefox chrome html 并发 JS http websocket

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：JavaScript et WebSocket : créez un système de sauvegarde de données en temps réel efficaceArticle suivant：JavaScript et WebSocket : créez un système de sauvegarde de données en temps réel efficace

Articles Liés

Voir plus