Créez un chatbot en temps réel basé sur JavaScript-js tutoriel-php.cn

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

王林

Libérer： 2023-08-10 10:09:21

original

1367 Les gens l'ont consulté

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 :

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>

Copier après la connexion

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

Copier après la connexion

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

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!