Next.jsでWebSocketを使ったリアルタイム通信

WebSocketは、クライアントとサーバー間で双方向のリアルタイム通信を可能にするプロトコルです。Next.jsでは、Socket.ioやネイティブWebSocket APIを利用して、リアルタイムのチャットや通知機能を実装することができます。ここでは、Next.jsとWebSocketを統合し、リアルタイム通信を実現するための基本的な手順を説明します。

WebSocketのセットアップ

Next.jsでWebSocketを使うには、サーバーを構築し、クライアントからの接続を管理します。wsライブラリまたはSocket.ioを利用して簡単にセットアップできます。以下は、Node.jsのwsを使った基本的なWebSocketサーバーの例です。

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });
  ws.send('something');
});

このサーバーはクライアントと接続し、メッセージを受信してログに出力し、応答を返します。

Next.jsでのクライアント側WebSocket接続

Next.jsでWebSocketクライアントを設定するには、useEffectフックを使って、ページコンポーネントがマウントされたときにWebSocket接続を確立し、アンマウント時に切断します。

import { useEffect, useState } from 'react';
export default function Chat() {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080');
    socket.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };
    return () => {
      socket.close();
    };
  }, []);
  return (
    <div>
      {messages.map((msg, index) => (
        <div key={index}>{msg}</div>
      ))}
    </div>
  );
}

このコードでは、クライアントがWebSocketサーバーに接続し、メッセージを受け取ってリアルタイムに表示します。

Socket.ioの利用

Socket.ioを使うと、WebSocketよりも柔軟にリアルタイム通信が行えます。Socket.ioには再接続機能やメッセージのブロードキャストといった機能が含まれており、より堅牢なリアルタイムアプリケーションを構築できます。 まず、Socket.ioをインストールします。

npm install socket.io

次に、Next.jsのserver.jsでSocket.ioサーバーをセットアップします。

// server.js
const { Server } = require("socket.io");
const io = new Server(server);
io.on('connection', (socket) => {
  console.log('Client connected');
  
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
  socket.on('broadcastMessage', (message) => {
    io.emit('serverMessage', message);
  });
});

このサーバーは、クライアントから受け取ったメッセージをすべての接続クライアントにブロードキャストします。

まとめ

Next.jsとWebSocketの組み合わせにより、リアルタイムアプリケーションを簡単に構築できます。WebSocketを使えば、チャットや通知システム、共同作業ツールなど、ユーザーに即時フィードバックを提供する機能が実現します。また、Socket.ioを利用することで、接続の安定性や機能が向上し、より堅牢なアプリケーションを構築することができます。 次は、これを活用してリアルタイムで動作するアプリを作り、ユーザー体験を向上させましょう。