Setting Up a Basic Chat Interface with Node.js and Express.js

Setting Up the Basic Chat Interface

Welcome to the first lesson of our course on developing a chatbot web application. In this lesson, we will focus on setting up a basic chat interface using Node.js with Express.js and HTML . This is an essential step in creating a user-friendly web application that enhances the user experience. A well-designed interface is crucial for engaging users and ensuring they can interact with the chatbot seamlessly. This lesson builds on the previous courses, where you created a chat application using OpenAI and Node.js. Now, we will add a graphical interface to make it more accessible and visually appealing.

Express.js and HTML Templates

A key feature of Express.js is its ability to serve HTML content, which forms the backbone of your application's user interface. These templates are stored in a directory and are rendered using the res.sendFile function. This function takes the path of an HTML file as an argument and sends the rendered HTML to the client, allowing for dynamic content delivery. Let's explore the server.js file to see how HTML pages are served in our Express.js application. JavaScriptconst express = require('express'); const path = require('path'); const ChatController = require('./controllers/chat_controller'); // Initialize the Express application const app = express(); // Set a secret key for session management app.set('secretKey', 'your_secret_key_here'); // Create an instance of ChatController const chatController = new ChatController(); // Serve static files from the 'public' directory app.use(express.static(path.join(__dirname, 'public'))); // Initialize session and render chat interface app.get('/', (req, res) => { chatController.ensureUserSession(req); res.sendFile(path.join(__dirname, 'public', 'chat.html')); }); // Other routes remain unchanged... // Start the server app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); In our application, we have transitioned from simply returning a welcome message to serving a full HTML page. This is achieved in the root route of our server.js file. Here, we first call the ensureUserSession method from the ChatController to manage user sessions. Then, we use res.sendFile to serve the chat.html file, which provides a structured and interactive chat interface for users. This approach not only enhances the user experience but also sets the stage for more complex interactions as we build out the chatbot's functionality.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
</head>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <div class="header">
        <h1>Welcome to Our Customer Service</h1>
        <p>How can we help you today?</p>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your message...">
            </div>
            <button onclick="sendMessage()">Send</button>
            <button id="new-chat-btn" onclick="startNewChat()">New Chat</button>
        </div>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <!-- Chat container and input elements... -->
    <script>
        // JavaScript functions will be defined here
    </script>
</body>
</html>

HTML

<script>
    // Get references to the messages container and message input field
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
</script>

HTML

<script>
    function startNewChat() {
        // Clear the chat history
        messagesContainer.innerHTML = '';
    }

    // Start a chat automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewChat);
</script>

HTML

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');
        
        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;
        
        // Set the text content of the message
        messageDiv.textContent = content;
        
        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);
        
        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

HTML

<script>
    function sendMessage() {
        // Retrieve and trim the input value
        const message = messageInput.value.trim();
        
        // If the message is empty, do not proceed
        if (!message) return;

        // Add user message to display
        appendMessage('user', message);

        // Clear the input field after sending the message
        messageInput.value = '';

        // For now, just echo the message back
        setTimeout(() => {
            appendMessage('assistant', `You said: ${message}`);
        }, 500);
    }
</script>

HTML

<script>
    // Handle Enter key
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            // Prevent the default form submission behavior
            e.preventDefault();
            // Send the message when Enter key is pressed
            sendMessage();
        }
    });
</script>

Setting Up the Basic Chat Interface

Express.js and HTML Templates

Join the 1M+ learners on CodeSignal

HTML Structure and Header

Body and Header Section

Chat Container and Input Elements

JavaScript for Interactivity

Initializing DOM Elements

StartNewChat Function

AppendMessage Function

SendMessage Function

Handling the Enter Key

Summary and Preparation for Practice