Heim >Web-Frontend >js-Tutorial >So implementieren Sie ein Online-Frage- und Antwortsystem mit WebSocket und JavaScript
So implementieren Sie ein Online-Frage- und Antwortsystem mit WebSocket und JavaScript
- 王林Original
- 2023-12-16 17:39:26898Durchsuche
WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und in der Webentwicklung häufig verwendet wird, um Echtzeit-Kommunikationsfunktionen zu erreichen. In diesem Artikel stellen wir vor, wie Sie mit WebSocket und JavaScript ein einfaches Online-Frage- und Antwortsystem implementieren.
- HTML-Seite schreiben
Wir schreiben zunächst eine grundlegende HTML-Vorlage und führen darin die für WebSocket erforderliche JavaScript-Bibliothek ein.
<!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-Code schreiben
Wir speichern den WebSocket-bezogenen JavaScript-Code in einer separaten Datei. In dieser Datei müssen wir mehrere Variablen und Funktionen definieren und eine WebSocket-Verbindung herstellen, damit der Server Nachrichten an den Client senden kann.
// 声明变量
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);
});- Schreiben Sie den Servercode
Zuletzt müssen wir den serverseitigen Code schreiben. In diesem Artikel verwenden wir Node.js als Entwicklungsumgebung des Servers und verwenden die ws-Bibliothek, um den WebSocket-Dienst bereitzustellen.
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 '这是机器人的回答';
}Im obigen Code erstellen wir ein WebSocketServer-Objekt und überwachen die Verbindungs-, Nachrichten- und Schließereignisse darauf. Wenn der Server eine vom Client gesendete Nachricht empfängt, ruft er die Funktion handleQuestion auf, um sie zu verarbeiten, und sendet dann die Antwort an den Client zurück.
- Testen des Online-Frage- und Antwortsystems
Jetzt öffnen wir zwei Browserfenster, eines fungiert als Client und das andere als Server. Geben Sie Ihre Frage in den Client-Browser ein und klicken Sie auf die Schaltfläche „Senden“. Der Server antwortet mit einer Nachricht, die die Antwort des Roboters angibt, und zeigt sie im Client-Browser an.
Zu diesem Zeitpunkt haben wir erfolgreich ein einfaches Online-Frage- und Antwortsystem implementiert. Dies ist natürlich nur ein einfaches Beispiel und Sie können es entsprechend Ihren eigenen Bedürfnissen erweitern und optimieren.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Online-Frage- und Antwortsystem mit WebSocket und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!