Maison > interface Web > js tutoriel > le corps du texte

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

王林
Libérer: 2023-08-10 10:09:21
original
1337 Les gens l'ont consulté

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

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

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 :

  1. HTML : utilisé pour construire l'interface de la fenêtre de discussion
  2. CSS : utilisé pour embellir le style de la fenêtre de discussion
  3. JavaScript : utilisé pour implémenter le chat La logique du robot
  4. WebSocket : utilisé pour implémenter la communication en temps réel
  5. 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>
Copier après la connexion

3. Écrivez le code JavaScript

  1. 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连接已关闭');
}
Copier après la connexion
  1. 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 = '';
});
Copier après la connexion
  1. 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);
}
Copier après la connexion

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);
    });
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal