Build a real-time chatbot based on JavaScript

Building a real-time chatbot based on JavaScript

Introduction:
A chatbot is an intelligent program that can have natural language conversations with people. It can simulate human Dialogue behavior can communicate through text, voice, etc. In the era of modern social networks, chatbots are increasingly being used in various fields, such as customer service, assistants, entertainment, etc. This article will introduce how to build a simple and practical real-time chatbot based on JavaScript.

1. Technical preparation
Before building the chatbot, we need to prepare the following technologies:

1. HTML: interface for building the chat window
2. CSS : Used to beautify the style of the chat window
3. JavaScript: Used to implement the logic of the chatbot
4. WebSocket: Used to implement real-time communication
5. API interface of a chatbot

2. Build a chat window
First, we need to build a chat window interface in which users can interact with the chat robot. The following is a simple HTML structure example:

    
    



    

        

        
        发送
    

    

3. Write JavaScript code

1. Connect to WebSocket
   Write the following code in the app.js file to connect to the server 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. Send message
   After entering the message in the input box and clicking the send button, the message will be sent to the server:

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. Receive and display messages
   After receiving the message returned by the server, display the message in the chat window:

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. Interact with the chatbot API
Received in WebSocket After the message is sent, we can send the message to a chatbot's API interface and then send the robot's reply back to the client. The following is a sample 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. Summary
Through the above steps, we successfully built a simple and practical real-time chat robot based on JavaScript. Users can enter messages in the chat window and have a conversation with the robot, and the robot will respond intelligently by calling the API interface. Of course, this is just a simple example, you can adjust and expand the functions of this chatbot according to your needs and your actual situation. Hope this article helps you!

The above is the detailed content of Build a real-time chatbot based on JavaScript. For more information, please follow other related articles on the PHP Chinese website!