Rumah > Artikel > hujung hadapan web > Bina chatbot masa nyata berdasarkan JavaScript
. 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.
1. Persediaan teknikal
Sebelum membina chatbot, kita perlu menyediakan teknologi berikut:HTML: digunakan untuk membina antara muka tetingkap sembang
Java : digunakan untuk melaksanakan sembang Logik robot
<!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>
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 = ''; });
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); }
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); }); }
Atas ialah kandungan terperinci Bina chatbot masa nyata berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!