Comment mettre en œuvre un système de questions et réponses en ligne à l'aide de WebSocket et JavaScript-js tutoriel-php.cn

Comment mettre en œuvre un système de questions et réponses en ligne à l'aide de WebSocket et JavaScript

王林

Libérer： 2023-12-16 17:39:26

original

862 Les gens l'ont consulté

Comment mettre en œuvre un système de questions et réponses en ligne à laide de WebSocket et JavaScript

WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, largement utilisé dans le développement Web pour réaliser des fonctions de communication en temps réel. Dans cet article, nous expliquerons comment utiliser WebSocket et JavaScript pour implémenter un système simple de questions et réponses en ligne.

Écrire une page HTML

Nous écrivons d'abord un modèle HTML de base et y introduisons la bibliothèque JavaScript requise par WebSocket.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线问答系统</title>
</head>
<body>
    <div id="messages"></div>
    <form id="message-form">
        <input type="text" id="message-input" placeholder="请输入您的问题...">
        <button type="submit">提交</button>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="websocket.js"></script>
</body>
</html>

Copier après la connexion

Écriture du code WebSocket

Nous stockons le code JavaScript associé à WebSocket dans un fichier séparé. Dans ce fichier, nous devons définir plusieurs variables et fonctions et établir une connexion WebSocket afin que le serveur puisse envoyer des messages au client.

// 声明变量
const serverUrl = 'ws://localhost:8080'; // WebSocket服务器地址
const socket = new WebSocket(serverUrl); // WebSocket连接

// 监听WebSocket事件
socket.onopen = function(event) {
    console.log('[WebSocket] 连接成功', event);
};

socket.onclose = function(event) {
    console.log('[WebSocket] 连接关闭', event);
};

socket.onerror = function(event) {
    console.error('[WebSocket] 发生错误', event);
};

socket.onmessage = function(event) {
    console.log('[WebSocket] 收到消息', event);
    showMessage(event.data);
};

// 发送消息到WebSocket服务器
function sendMessage(message) {
    socket.send(message);
}

// 显示消息
function showMessage(message) {
    $('#messages').append($('<p>').text(`机器人：${message}`));
}

// 提交问题
$('#message-form').submit(function(event) {
    event.preventDefault();
    const messageInput = $('#message-input');
    const message = messageInput.val();
    messageInput.val('');
    $('#messages').append($('<p>').text(`你：${message}`));
    sendMessage(message);
});

Copier après la connexion

Écrivez le code du serveur

Enfin, nous devons écrire le code côté serveur. Dans cet article, nous utiliserons Node.js comme environnement de développement du serveur et utiliserons la bibliothèque ws pour fournir le service WebSocket.

const WebSocketServer = require('ws').Server;

const server = new WebSocketServer({ port: 8080 });

console.log('WebSocket服务器已启动');

// 监听WebSocket连接事件
server.on('connection', function(socket) {
    console.log('WebSocket连接已建立');

    // 监听WebSocket消息事件
    socket.on('message', function(message) {
        console.log('收到消息', message);
        const response = handleQuestion(message);
        socket.send(response);
    });

    // 监听WebSocket关闭事件
    socket.on('close', function() {
        console.log('WebSocket连接已关闭');
    });
});

// 处理问题
function handleQuestion(question) {
    // TODO: 添加问题处理逻辑
    return '这是机器人的回答';
}

Copier après la connexion

Dans le code ci-dessus, nous créons un objet WebSocketServer et écoutons la connexion, le message et fermons les événements dessus. Lors de la réception d'un message envoyé par le client, le serveur appellera la fonction handleQuestion pour le traiter, puis renverra la réponse au client.

Test du système de questions et réponses en ligne

Maintenant, nous ouvrons deux fenêtres de navigateur, l'une faisant office de client et l'autre faisant office de serveur. Entrez votre question dans le navigateur client et cliquez sur le bouton Soumettre. Le serveur répondra avec un message indiquant la réponse du robot et l'affichera dans le navigateur client.

À ce stade, nous avons mis en œuvre avec succès un système simple de questions et réponses en ligne. Bien entendu, il ne s’agit que d’un exemple de base et vous pouvez l’étendre et l’optimiser en fonction de vos propres besoins.

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!