suchen

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:211330Durchsuche

Erstellen Sie einen Echtzeit-Chatbot auf Basis von JavaScript

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:

  1. HTML: wird zum Erstellen der Benutzeroberfläche des Chat-Fensters verwendet.
  2. CSS: wird zum Verschönern des Stils des Chat-Fensters verwendet.
  3. JavaScript : Wird zum Implementieren des Chats verwendet. Die Logik des Roboters.
  4. 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: 
    5. <!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>
  5. 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连接已关闭');
}

    Eine Nachricht senden
  1. Eingabe Nachdem Sie die Nachricht in das Feld eingegeben und auf die Schaltfläche „Senden“ geklickt haben, wird die Nachricht an den Server gesendet: 
    2. 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 = '';
});
    Nachricht empfangen und anzeigen
  1. Nach dem Empfang der vom Server zurückgegebenen Nachricht wird die Nachricht im angezeigt Chat-Fenster: 
    2. 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
    Nachdem wir die Nachricht über WebSocket erhalten haben, können wir die Nachricht an eine Chatbot-API-Schnittstelle senden und dann die Antwort des Bots an den Client zurücksenden. Das Folgende ist ein Beispielcode: 
  1. 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
    2. Durch die oben genannten Schritte haben wir erfolgreich einen einfachen und praktischen Echtzeit-Chatbot auf Basis von JavaScript erstellt. Benutzer können im Chat-Fenster Nachrichten eingeben und sich mit dem Roboter unterhalten, woraufhin der Roboter intelligent reagiert, indem er die API-Schnittstelle aufruft. Dies ist natürlich nur ein einfaches Beispiel, Sie können die Funktionen dieses Chatbots entsprechend Ihren Bedürfnissen und Ihrer tatsächlichen Situation anpassen und erweitern. Ich hoffe, dieser Artikel hilft Ihnen!

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