Rumah >hujung hadapan web >tutorial js >Bina chatbot masa nyata berdasarkan JavaScript

Bina chatbot masa nyata berdasarkan JavaScript

王林asal: 2023-08-10 10:09:211364semak imbas

. Dalam era rangkaian sosial moden, chatbots semakin digunakan dalam pelbagai bidang, seperti perkhidmatan pelanggan, pembantu, hiburan, dll. Artikel ini akan memperkenalkan cara membina chatbot masa nyata yang ringkas dan praktikal berdasarkan JavaScript.

Bina chatbot masa nyata berdasarkan JavaScript 1. Persediaan teknikal

Sebelum membina chatbot, kita perlu menyediakan teknologi berikut:

HTML: digunakan untuk membina antara muka tetingkap sembang

CSS: digunakan untuk mencantikkan gaya tetingkap sembang

Java : digunakan untuk melaksanakan sembang Logik robot

Antara muka API chatbot
2 Bina tetingkap sembang

<!DOCTYPE html>
<html>
<head>
    <title>实时聊天机器人</title>
    <style>
        /* 样式代码 */
    </style>
</head>
<body>
    <div id="chat-window">
        <div id="chat-messages"></div>
        <input type="text" id="message-input">
        <button id="send-button">发送</button>
    </div>

    <script src="app.js"></script>
</body>
</html>

Sambung ke WebSocket

Tulis kod berikut dalam fail app.js untuk menyambung ke WebSocket pelayan:

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function () {
    console.log('WebSocket连接已建立');
}

socket.onmessage = function (event) {
    const message = event.data;
    // 处理接收到的消息
}

socket.onclose = function () {
    console.log('WebSocket连接已关闭');
}

Hantar mesej Enter Selepas memasukkan mesej dalam kotak dan mengklik butang hantar, mesej akan dihantar ke pelayan:

const sendButton = document.getElementById('send-button');
const messageInput = document.getElementById('message-input');

sendButton.addEventListener('click', function () {
    const message = messageInput.value;
    socket.send(message);

    // 清空输入框
    messageInput.value = '';
});

Selepas menerima mesej yang dikembalikan oleh pelayan, mesej akan dipaparkan dalam tetingkap sembang:

socket.onmessage = function (event) {
    const message = event.data;
    displayMessage(message);
}

function displayMessage(message) {
    const chatMessages = document.getElementById('chat-messages');
    const messageElement = document.createElement('div');
    messageElement.innerText = message;
    chatMessages.appendChild(messageElement);
}

4. Dengan Chatbot API untuk berinteraksi

socket.onmessage = function (event) {
    const message = event.data;
    displayMessage(message);

    // 将消息发送到聊天机器人的API接口
    fetch('http://chatbot-api.com', {
        method: 'POST',
        body: JSON.stringify({ message: message })
    })
    .then(response => response.json())
    .then(data => {
        const reply = data.reply;
        socket.send(reply);
        displayMessage(reply);
    });
}

Melalui langkah di atas, kami berjaya membina chatbot masa nyata yang ringkas dan praktikal berdasarkan JavaScript. Pengguna boleh memasukkan mesej dalam tetingkap sembang dan berbual dengan robot, dan robot akan bertindak balas secara bijak dengan memanggil antara muka API. Sudah tentu, ini hanyalah contoh mudah, anda boleh menyesuaikan dan mengembangkan fungsi chatbot ini mengikut keperluan anda dan situasi sebenar anda. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bina chatbot masa nyata berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html 接口 JS websocket

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Membangunkan aplikasi pengundian web menggunakan JavaScriptArtikel seterusnya：Membangunkan aplikasi pengundian web menggunakan JavaScript

Artikel berkaitan

Lihat lagi