ホームページ > 記事 > ウェブフロントエンド > WebSocket と JavaScript を使用してオンライン質疑応答システムを実装する方法
WebSocket と JavaScript を使用してオンライン質疑応答システムを実装する方法
- PHPzオリジナル
- 2023-12-16 17:39:25856ブラウズ
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 関数を呼び出してメッセージを処理し、応答をクライアントに送り返します。
- オンライン質疑応答システムのテスト
次に、2 つのブラウザ ウィンドウを開きます。1 つはクライアントとして機能し、もう 1 つはサーバーとして機能します。クライアント ブラウザに質問を入力し、送信ボタンをクリックします。サーバーはロボットの回答を示すメッセージを返信し、クライアントのブラウザに表示します。
これまでのところ、簡単なオンライン質疑応答システムの実装に成功しています。もちろん、これは単なる基本的な例であり、独自のニーズに応じて拡張および最適化できます。
以上がWebSocket と JavaScript を使用してオンライン質疑応答システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。