JavaScript に基づいてリアルタイム チャットボットを構築する

JavaScript に基づいたリアルタイム チャットボットの構築

はじめに:
チャットボットは、人々と自然言語で会話できるインテリジェントなプログラムです。人間の対話行動は、テキスト、音声などを通じてコミュニケーションできます。現代のソーシャルネットワークの時代では、チャットボットは顧客サービス、アシスタント、エンターテイメントなどのさまざまな分野でますます使用されています。この記事では、JavaScript をベースにしたシンプルで実用的なリアルタイム チャットボットの構築方法を紹介します。

1. 技術的な準備
チャットボットを構築する前に、次の技術を準備する必要があります:

1. HTML: チャット ウィンドウを構築するためのインターフェイス
2. CSS : チャットウィンドウのスタイルを美しくするために使用されます
3. JavaScript: チャットボットのロジックを実装するために使用されます
4. WebSocket: リアルタイム通信を実装するために使用されます
5. API インターフェイスチャットボット

2. チャット ウィンドウを構築する
まず、ユーザーがチャット ロボットと対話できるチャット ウィンドウ インターフェイスを構築する必要があります。以下は簡単な HTML 構造の例です:

     
  
 
  发送 
   

3. JavaScript コードを記述します

1. WebSocket に接続
   app.js ファイルに次のコードを記述して、WebSocket に接続します。サーバー WebSocket:

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

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

3. メッセージの受信と表示
   サーバーから返されたメッセージを受信した後、チャット ウィンドウにメッセージを表示します:

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. チャットボット API と対話します
WebSocket で受信 メッセージが送信された後、メッセージをチャットボットの API インターフェイスに送信し、ロボットの応答をクライアントに送り返すことができます。サンプル コードは次のとおりです:

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. 概要
上記の手順により、JavaScript に基づいたシンプルで実用的なリアルタイム チャットボットを構築することに成功しました。ユーザーはチャット ウィンドウにメッセージを入力してロボットと会話することができ、ロボットは API インターフェイスを呼び出してインテリジェントに応答します。もちろん、これは単なる例であり、ニーズや実際の状況に応じてこのチャットボットの機能を調整および拡張できます。この記事がお役に立てば幸いです!

以上がJavaScript に基づいてリアルタイム チャットボットを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。