Maison > Article > interface Web > Créez un chatbot en temps réel basé sur JavaScript

Créez un chatbot en temps réel basé sur JavaScript

王林original: 2023-08-10 10:09:211278parcourir

Introduction :
Un chatbot est un programme intelligent qui peut avoir des conversations en langage naturel avec des personnes. Il peut simuler le comportement conversationnel humain et communiquer par texte, voix, etc. À l’ère des réseaux sociaux modernes, les chatbots sont de plus en plus utilisés dans divers domaines, comme le service client, les assistants, le divertissement, etc. Cet article explique comment créer un chatbot en temps réel simple et pratique basé sur JavaScript.

1. Préparation technique
Avant de construire le chatbot, nous devons préparer les technologies suivantes :

HTML : utilisé pour construire l'interface de la fenêtre de discussion
CSS : utilisé pour embellir le style de la fenêtre de discussion
JavaScript : utilisé pour implémenter le chat La logique du robot
WebSocket : utilisé pour implémenter la communication en temps réel
Interface API d'un chatbot

2 Construire une fenêtre de discussion
Tout d'abord, nous devons créer une interface de fenêtre de discussion, en. quels utilisateurs peuvent interagir avec le chatbot Interaction. Voici un exemple simple de structure HTML :

<!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. Écrivez le code JavaScript

Connectez-vous à WebSocket
Écrivez le code suivant dans le fichier app.js pour vous connecter au WebSocket du serveur :

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

Envoyez un message
Entrer Après avoir saisi le message dans la case et cliqué sur le bouton envoyer, le message sera envoyé au serveur :

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

Recevoir et afficher le message
Après avoir reçu le message renvoyé par le serveur, le message sera affiché dans la fenêtre de discussion :

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. Avec l'API Chatbot pour interagir
Après avoir reçu le message via WebSocket, nous pouvons envoyer le message à une interface API de chatbot, puis renvoyer la réponse du bot au client. Voici un exemple de code :

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. Résumé
Grâce aux étapes ci-dessus, nous avons réussi à créer un chatbot en temps réel simple et pratique basé sur JavaScript. Les utilisateurs peuvent saisir des messages dans la fenêtre de discussion et avoir une conversation avec le robot, et le robot répondra intelligemment en appelant l'interface API. Bien entendu, il ne s’agit que d’un exemple simple, vous pouvez ajuster et étendre les fonctions de ce chatbot en fonction de vos besoins et de votre situation réelle. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html 接口 JS websocket

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Développement d'une application de vote Web en utilisant JavaScriptArticle suivant：Développement d'une application de vote Web en utilisant JavaScript

Articles Liés

Voir plus