Heim > Artikel > Web-Frontend > Erstellen Sie einen Echtzeit-Chatbot auf Basis von JavaScript

Erstellen Sie einen Echtzeit-Chatbot auf Basis von JavaScript

王林Original: 2023-08-10 10:09:211315Durchsuche

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:

HTML: wird zum Erstellen der Benutzeroberfläche des Chat-Fensters verwendet.
CSS: wird zum Verschönern des Stils des Chat-Fensters verwendet.
JavaScript : Wird zum Implementieren des Chats verwendet. Die Logik des Roboters.
WebSocket: Wird zum Implementieren der Echtzeitkommunikation verwendet. API-Schnittstelle eines Chatbots welche Benutzer mit der Chatbot-Interaktion interagieren können. Das Folgende ist ein einfaches HTML-Strukturbeispiel:

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

3. Schreiben Sie JavaScript-Code

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

Eingabe Nachdem Sie die Nachricht in das Feld eingegeben und auf die Schaltfläche „Senden“ geklickt haben, wird die Nachricht an den Server gesendet:

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

Nach dem Empfang der vom Server zurückgegebenen Nachricht wird die Nachricht im angezeigt Chat-Fenster:

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. Mit der Chatbot-API interagieren

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

5. Zusammenfassung

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!

JavaScript css html 接口 JS websocket

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Entwicklung einer Web-Abstimmungsanwendung mit JavaScriptNächster Artikel：Entwicklung einer Web-Abstimmungsanwendung mit JavaScript

In Verbindung stehende Artikel

Mehr sehen