Bina chatbot masa nyata berdasarkan JavaScript-tutorial js-php.cn

Bina chatbot masa nyata berdasarkan JavaScript

王林

Lepaskan： 2023-08-10 10:09:21

asal

1275 orang telah melayarinya

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

Salin selepas log masuk

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连接已关闭');
}

Salin selepas log masuk

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 = '';
});

Salin selepas log masuk

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);
}

Salin selepas log masuk

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);
    });
}

Salin selepas log masuk

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!