首頁 > 文章 > web前端 > 如何使用WebSocket和JavaScript實現線上問答系統

如何使用WebSocket和JavaScript實現線上問答系統

PHPz原創: 2023-12-16 17:39:25877瀏覽

WebSocket是一種基於TCP協定的全雙工通訊協議，在網路開發中被廣泛應用於實現即時通訊功能。在本篇文章中，我們將介紹如何使用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對象，並在其上監聽connection、message和close事件。當收到客戶端發送的訊息時，伺服器將呼叫handleQuestion函數進行處理，然後將回復發送回客戶端。

測試線上問答系統

現在，我們打開兩個瀏覽器窗口，一個充當客戶端，一個充當伺服器。在客戶端瀏覽器中輸入問題，然後點選提交按鈕。伺服器將回覆一個表示機器人回答的訊息，並在客戶端瀏覽器中顯示出來。

至此，我們已經成功實現了一個簡單的線上問答系統。當然，這只是一個基礎的範例，你可以根據自己的需求進行擴展和最佳化。

以上是如何使用WebSocket和JavaScript實現線上問答系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html JS 对象事件 websocket

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js事件冒泡可以解決哪些問題下一篇：js事件冒泡可以解決哪些問題

看更多