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