Maison > Article > interface Web > Créez une salle de discussion en temps réel basée sur JavaScript
Créez une salle de discussion en temps réel basée sur JavaScript
- 王林original
- 2023-08-10 23:18:161274parcourir
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. <code><div>元素来显示消息，并设置了固定的高度和滚动条样式。接下来，我们添加了一个文本框和一个按钮，用户可以在文本框中输入消息，并通过按钮将其发送出去。<p>接下来，我们需要编写相应的JavaScript代码来处理实时聊天室的逻辑。以下是一个简单的实现示例：</p><pre class='brush:javascript;toolbar:false;'>// 创建一个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 = '';
}</pre><p>在上述代码中，我们使用了JavaScript中的WebSocket API来建立与服务器的实时连接。当连接建立成功后，我们会收到一个<code>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!