JavaScript に基づいてリアルタイムチャットボットを構築する-jsチュートリアル-php.cn

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

王林

リリース： 2023-08-10 10:09:21

オリジナル

1312 人が閲覧しました

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

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