Create the Chat HTML Interface

Now create the frontend interface that users will interact with.

Create public/index.html.

The interface contains:

A username input.
A message input.
A send button.
A chat message container.
A connection status indicator.

We will keep the frontend simple so that the main focus remains on understanding Socket.IO.

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Socket.IO Chat</title>
  <link rel="stylesheet" href="/style.css" />
</head>
<body>
  <main class="chat-container">
    <header>
      <h1>Real-Time Chat</h1>
      <p id="connection-status">Connecting...</p>
    </header>

    <section class="user-panel">
      <input id="username" placeholder="Enter your username" />
      <button id="join-button">Join Chat</button>
    </section>

    <section id="messages" class="messages"></section>

    <form id="message-form">
      <input
        id="message-input"
        placeholder="Type your message..."
        autocomplete="off"
        disabled
      />
      <button type="submit" disabled>Send</button>
    </form>
  </main>

  <script src="/socket.io/socket.io.js"></script>
  <script src="/app.js"></script>
</body>
</html>

Creates the chat interface. Socket.IO serves its browser client bundle automatically at /socket.io/socket.io.js when the server is configured with its default client-serving behavior.

Key Takeaways

The HTML page defines the chat interface.
The Socket.IO client script is loaded from the server.
The application JavaScript is loaded after the Socket.IO client.

Create the Chat HTML Interface

STAY UPDATED WITH BYTES!