Créez une salle de discussion en temps réel basée sur JavaScript
Créez un salon de discussion en temps réel basé sur JavaScript
Avec le développement rapide d'Internet, les gens accordent de plus en plus d'attention à la messagerie instantanée et à l'expérience interactive en temps réel. En tant qu’outil de messagerie instantanée courant, les forums de discussion en temps réel sont très importants tant pour les particuliers que pour les entreprises. Cet article explique comment créer une salle de discussion simple en temps réel à l'aide de JavaScript et fournit des exemples de code correspondants.
Nous avons d’abord besoin d’une page frontale comme interface utilisateur du salon de discussion. Voici un exemple simple de structure HTML :
<!DOCTYPE html>
<html>
<head>
<title>实时聊天室</title>
<style>
#messages {
height: 400px;
overflow: scroll;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="messages"></div>
<input type="text" id="input" placeholder="输入消息">
<button onclick="sendMessage()">发送</button>
</body>
</html>Dans le code ci-dessus, nous avons créé un élément <div> pour afficher le message et définir une hauteur fixe et un style de barre de défilement. Ensuite, nous avons ajouté une zone de texte et un bouton où l'utilisateur peut saisir un message et un bouton pour l'envoyer. <div>元素来显示消息，并设置了固定的高度和滚动条样式。接下来，我们添加了一个文本框和一个按钮，用户可以在文本框中输入消息，并通过按钮将其发送出去。
接下来，我们需要编写相应的JavaScript代码来处理实时聊天室的逻辑。以下是一个简单的实现示例：
// 创建一个WebSocket连接
const socket = new WebSocket('ws://localhost:3000');
// 当连接建立时执行
socket.onopen = function(event) {
console.log('已连接到服务器');
};
// 当收到服务器消息时执行
socket.onmessage = function(event) {
const messages = document.getElementById('messages');
const message = document.createElement('div');
message.innerText = event.data;
messages.appendChild(message);
// 滚动到最底部
messages.scrollTop = messages.scrollHeight;
};
// 发送消息
function sendMessage() {
const input = document.getElementById('input');
const message = input.value;
socket.send(message);
input.value = '';
}在上述代码中，我们使用了JavaScript中的WebSocket API来建立与服务器的实时连接。当连接建立成功后，我们会收到一个onopen事件。而当收到服务器发来的消息时，会触发onmessage事件，我们将收到的消息添加到消息显示区域中，并通过设置滚动条位置自动滚动到底部。
最后，我们需要在服务器端创建一个WebSocket服务器来处理和转发消息。以下是一个使用Node.js和WebSocket库的示例：
const WebSocket = require('ws');
// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 3000 });
// 当有新的WebSocket连接建立时执行
wss.on('connection', function(ws) {
console.log('有新的连接');
// 当收到消息时执行
ws.on('message', function(message) {
console.log('收到消息: ' + message);
// 将消息广播给所有连接的客户端
wss.clients.forEach(function(client) {
client.send(message);
});
});
});在上述代码中，我们使用了WebSocket库来创建WebSocket服务器。当有新的连接建立时，会触发connection事件。而当收到消息时，会触发message
rrreee
Dans le code ci-dessus, nous avons utilisé l'API WebSocket en JavaScript pour établir une connexion en temps réel avec le serveur. Une fois la connexion établie avec succès, nous recevrons un événementonopen. Lorsqu'un message est reçu du serveur, l'événement onmessage sera déclenché. Nous ajouterons le message reçu à la zone d'affichage du message et ferons défiler automatiquement vers le bas en définissant la position de la barre de défilement. Enfin, nous devons créer un serveur WebSocket côté serveur pour traiter et transférer les messages. Voici un exemple utilisant Node.js et la bibliothèque WebSocket : 🎜rrreee🎜 Dans le code ci-dessus, nous avons utilisé la bibliothèque WebSocket pour créer un serveur WebSocket. Lorsqu'une nouvelle connexion est établie, l'événement connection sera déclenché. Lorsqu'un message est reçu, l'événement message sera déclenché et nous diffuserons le message reçu à tous les clients connectés. 🎜🎜Avec l'exemple de code simple ci-dessus, nous pouvons implémenter une salle de discussion en temps réel basée sur JavaScript. Lorsque l'utilisateur saisit un message et clique sur le bouton d'envoi, le message est envoyé au serveur via la connexion WebSocket et transmis par le serveur à tous les clients connectés. Une fois que le client a reçu le message, il l'affiche dans l'interface utilisateur. L'ensemble du processus réalise la fonction de communication en temps réel. 🎜🎜Bien sûr, l'exemple ci-dessus n'est qu'une simple implémentation. Dans une véritable salle de discussion en temps réel, d'autres fonctions telles que la déconnexion et la reconnexion, l'authentification des utilisateurs, le chat privé, etc. J'espère que cet article pourra vous fournir une idée de base et un exemple de code pour vous aider à créer votre propre salle de discussion 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 pm 02:54 PM
Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.
La combinaison de Java et WebSocket : comment réaliser un streaming vidéo en temps réel
Dec 17, 2023 pm 05:50 PM
Avec le développement continu de la technologie Internet, le streaming vidéo en temps réel est devenu une application importante dans le domaine Internet. Pour réaliser un streaming vidéo en temps réel, les technologies clés incluent WebSocket et Java. Cet article explique comment utiliser WebSocket et Java pour implémenter la lecture en streaming vidéo en temps réel et fournit des exemples de code pertinents. 1. Qu'est-ce que WebSocket ? WebSocket est un protocole de communication full-duplex sur une seule connexion TCP. Il est utilisé sur le Web.
WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel
Dec 17, 2023 pm 05:30 PM
WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket
Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 am 09:39 AM
Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.
Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel
Dec 17, 2023 pm 12:09 PM
Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande
Comment développer une salle de discussion Websocket en utilisant le langage Go
Dec 14, 2023 pm 01:46 PM
Comment utiliser le langage Go pour développer une salle de discussion Websocket Websocket est un protocole de communication en temps réel qui permet une communication bidirectionnelle entre le serveur et le client en établissant une connexion. Websocket est un très bon choix lors du développement de salles de discussion car il permet l'échange de messages en temps réel et offre des performances efficaces. Cet article expliquera comment développer une salle de discussion Websocket simple à l'aide du langage Go et fournira quelques exemples de code spécifiques. 1. Préparation 1. Installer Go
JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel
Dec 17, 2023 pm 05:13 PM
JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous
Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest
