0Pricing
Node.js Backend Development Bootcamp · レッスン

リアルタイムチャットアプリケーションを構築する

WebSocketとSocket.IOの理解を深めるため、完全に動作するリアルタイムチャットアプリケーションを開発します。

「リアルタイムチャットアプリケーションを構築する」はCoddyKit上の無料Node.js Backend Development Bootcampレッスンです。 これはレッスン5/6です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはNode.js Backend Development Bootcamp学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Node.js Backend Development Bootcampコースには全6レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Build a Real-time Chat App

Welcome! In this lesson, we'll bring together your knowledge of WebSockets and Socket.IO to build a practical real-time chat application.

This hands-on project will solidify your understanding of how clients and servers communicate instantly, making live interactions possible.

Server Setup: Express & Socket.IO

First, let's set up our Node.js server using Express and integrate Socket.IO. This foundation will handle our HTTP requests for serving the HTML page and establish real-time WebSocket connections.

Remember to install dependencies: npm install express socket.io

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

// Serve our HTML file
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// Listen for new Socket.IO connections
io.on('connection', (socket) => {
  console.log('A user connected');
});

// Start the server
server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Handling User Connections

When a client successfully connects to our Socket.IO server, a 'connection' event is emitted. Similarly, when a client closes their browser or loses connection, a 'disconnect' event occurs.

These events allow us to track who is currently online.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');

  // Listen for client disconnections
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Broadcasting Chat Messages

For a chat application, when one user sends a message, it needs to be seen by all other connected users. We achieve this by listening for a 'chat message' event from a client and then using io.emit() to broadcast it to everyone.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');

  // Listen for 'chat message' from this client
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg); // Broadcast to all connected clients
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Client-Side HTML Structure

Now, let's create a simple index.html file. This will be the user interface for our chat application. It needs an input field to type messages and a list (<ul>) to display them.

Crucially, include the Socket.IO client library script via /socket.io/socket.io.js!

<!DOCTYPE html>
<html>
  <head>
    <title>CoddyKit Chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: sans-serif; }
      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <!-- Client-side JavaScript will go here -->
  </body>
</html>

Client: Sending & Receiving Messages

Now, we add JavaScript to our index.html. This script will:

  • Connect to the Socket.IO server.
  • Emit a 'chat message' event when the form is submitted.
  • Listen for incoming 'chat message' events and display them.

The io() function automatically connects to the server where the script is served from.

<!-- ... (inside index.html, before </body>) ... -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io(); // Connect to the Socket.IO server

      const form = document.getElementById('form');
      const input = document.getElementById('input');
      const messages = document.getElementById('messages');

      // Send message when form is submitted
      form.addEventListener('submit', (e) => {
        e.preventDefault(); // Prevent page reload
        if (input.value) {
          socket.emit('chat message', input.value); // Emit event to server
          input.value = ''; // Clear input field
        }
      });

      // Listen for incoming messages and display them
      socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

Adding User Nicknames (Server)

To make the chat more personal, let's add user nicknames. On the server, we can store a nickname for each connected socket. We'll introduce a new event, 'set nickname', for clients to send their chosen name.

This nickname will then be included with their messages.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  let nickname = 'Anonymous'; // Default nickname for new connections

  socket.on('set nickname', (name) => {
    nickname = name;
    console.log(`${nickname} connected`);
    io.emit('chat message', `${nickname} joined the chat`);
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', `${nickname}: ${msg}`); // Prepend nickname to message
  });

  socket.on('disconnect', () => {
    console.log(`${nickname} disconnected`);
    io.emit('chat message', `${nickname} left the chat`);
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Client: Setting & Displaying Nicknames

On the client side, we need to ask the user for a nickname when they first connect and then emit this to the server using our new 'set nickname' event. We'll also update the client-side display to show messages with the sender's nickname.

<!-- ... (inside index.html, before </body>) ... -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      const form = document.getElementById('form');
      const input = document.getElementById('input');
      const messages = document.getElementById('messages');

      // Prompt for nickname on connection
      let nickname = prompt('Please enter your nickname:');
      if (!nickname) nickname = 'Guest' + Math.floor(Math.random() * 1000);
      socket.emit('set nickname', nickname); // Send nickname to server

      form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

      socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

Tracking Online Users (Bonus)

To enhance our chat, let's add a feature to display who is currently online. The server can maintain a Set of active nicknames and broadcast this list whenever a user connects or disconnects.

Clients will listen for an 'online users' event to update their UI.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

const onlineUsers = new Set(); // Store nicknames

io.on('connection', (socket) => {
  let nickname = 'Anonymous';

  socket.on('set nickname', (name) => {
    nickname = name;
    onlineUsers.add(nickname);
    io.emit('chat message', `${nickname} joined the chat`);
    io.emit('online users', Array.from(onlineUsers)); // Broadcast updated user list
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', `${nickname}: ${msg}`);
  });

  socket.on('disconnect', () => {
    onlineUsers.delete(nickname);
    io.emit('chat message', `${nickname} left the chat`);
    io.emit('online users', Array.from(onlineUsers)); // Broadcast updated user list
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Chat App Workflow Check

Consider the complete flow of a message in our Socket.IO chat application, from one client sending it to all other clients receiving it.

Which of the following steps are essential for this real-time communication to occur?

Recap: Building a Chat App

Congratulations! You've successfully built a functional real-time chat application using Node.js, Express, and Socket.IO.

  • We set up the server to handle WebSocket connections and HTTP requests.
  • We implemented broadcasting to send messages to all connected users instantly.
  • We created a client-side interface to send and receive messages dynamically.
  • We enhanced the chat with user nicknames and real-time online user tracking.

This project demonstrates the power of WebSockets and Socket.IO for creating interactive, live experiences.

よくある質問

「リアルタイムチャットアプリケーションを構築する」レッスンは無料ですか？

はい。「リアルタイムチャットアプリケーションを構築する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Node.js Backend Development Bootcampコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Node.js Backend Development Bootcampコースには全6レッスンが含まれています。

「リアルタイムチャットアプリケーションを構築する」で何を学びますか？

WebSocketとSocket.IOの理解を深めるため、完全に動作するリアルタイムチャットアプリケーションを開発します。 ブラウザで直接実行するハンズオンコードでNode.js Backend Development Bootcampを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Node.js Backend Development Bootcampを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNode.js Backend Development Bootcampは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン5/6です。

「リアルタイムチャットアプリケーションを構築する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNode.js Backend Development Bootcampレッスンでコードを書いて実行できますか？

はい。すべてのNode.js Backend Development Bootcampレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. WebSocket入門
  2. NestJSによるWebSockets
  3. Node.jsでSocket.IOを実装する
  4. ゲートウェイの設定
  5. リアルタイムチャットアプリケーションを構築する
  6. リアルタイムチャットアプリケーション
← Node.js Backend Development Bootcampに戻る