WebSocket と JavaScript を使用してオンライン質疑応答システムを実装する方法-jsチュートリアル-php.cn

WebSocket と JavaScript を使用してオンライン質疑応答システムを実装する方法

PHPz

リリース： 2023-12-16 17:39:25

オリジナル

875 人が閲覧しました

WebSocket と JavaScript を使用してオンライン質疑応答システムを実装する方法

WebSocket は、TCP プロトコルに基づく全二重通信プロトコルであり、リアルタイム通信機能を実装するために Web 開発で広く使用されています。この記事では、WebSocket と JavaScript を使用して、簡単なオンライン質疑応答システムを実装する方法を紹介します。

HTML ページの作成

最初に基本的な HTML テンプレートを作成し、WebSocket に必要な JavaScript ライブラリをそのテンプレートに導入します。

<!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>

ログイン後にコピー

WebSocket コードの記述

WebSocket 関連の JavaScript コードは別のファイルに保存されます。このファイルでは、サーバーがクライアントにメッセージを送信できるように、いくつかの変数と関数を定義し、WebSocket 接続を確立する必要があります。

// 声明变量
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);
});

ログイン後にコピー

サーバーコードの作成

最後に、サーバー側のコードを作成する必要があります。この記事では、サーバーの開発環境として Node.js を使用し、ws ライブラリを使用して 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 '这是机器人的回答';
}

ログイン後にコピー

上記のコードでは、WebSocketServer オブジェクトを作成し、そのオブジェクトの接続、メッセージ、およびクローズイベントをリッスンします。クライアントから送信されたメッセージを受信すると、サーバーは handleQuestion 関数を呼び出してメッセージを処理し、応答をクライアントに送り返します。