ホームページ > 記事 > ウェブフロントエンド > JavaScript に基づいてリアルタイムチャットボットを構築する

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

王林オリジナル: 2023-08-10 10:09:211313ブラウズ

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

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

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

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

2. チャットウィンドウを構築する
まず、ユーザーがチャットロボットと対話できるチャットウィンドウインターフェイスを構築する必要があります。以下は簡単な 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. JavaScript コードを記述します

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

メッセージの送信
入力ボックスにメッセージを入力して送信ボタンをクリックすると、メッセージがサーバーに送信されます:

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. チャットボット 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 サイトの他の関連記事を参照してください。

JavaScript css html 接口 JS websocket

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptを使用したWeb投票アプリケーションの開発次の記事：JavaScriptを使用したWeb投票アプリケーションの開発

続きを見る

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

関連記事

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