Erstellen Sie einen Echtzeit-Chatbot auf Basis von JavaScript
Einführung:
Ein Chatbot ist ein intelligentes Programm, das Gespräche mit Menschen in natürlicher Sprache führen und menschliches Gesprächsverhalten simulieren und über Text, Stimme usw. kommunizieren kann. Im Zeitalter moderner sozialer Netzwerke werden Chatbots zunehmend in verschiedenen Bereichen wie Kundenservice, Assistenten, Unterhaltung usw. eingesetzt. In diesem Artikel erfahren Sie, wie Sie einen einfachen und praktischen Echtzeit-Chatbot auf Basis von JavaScript erstellen.
1. Technische Vorbereitung
Bevor wir den Chatbot erstellen, müssen wir die folgenden Technologien vorbereiten:
<!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>Mit WebSocket verbinden
Schreiben Sie den folgenden Code in die app.js-Datei, um eine Verbindung zum WebSocket des Servers herzustellen:
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连接已关闭');
}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);
});
}Das obige ist der detaillierte Inhalt vonErstellen Sie einen Echtzeit-Chatbot auf Basis von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
