next.jsおよびwebsocketsでリアルタイムチャットアプリケーションを構築します

最新の Web アプリケーションは、カスタマー サポート、チーム コラボレーション、ソーシャル インタラクションなどの機能において、リアルタイム通信への依存度を高めています。 このチュートリアルでは、Next.js と WebSocket の機能を使用して、堅牢でスケーラブルなリアルタイム チャット アプリケーションを構築する方法を示します。 WebSocket のセットアップ、メッセージ管理、React を使用した応答性の高いチャット UI の作成について説明します。

WebSocket について

コードに入る前に、WebSocket の役割を明確にしましょう。 従来の HTTP リクエストとは異なり、WebSocket は単一の TCP 接続上で永続的な双方向通信チャネルを確立します。この全二重通信はリアルタイムのデータ交換に最適であり、チャット アプリケーション、ライブ アップデート、共同作業ツールに最適です。

---

前提条件

このガイドに従うには、次のものが必要です:

1. Node.js がインストールされました。
2. React および Next.js に関する基本的な知識。
3. WebSocket の基礎的な理解 (重要な概念については説明します)。
4. Socket.IO がプロジェクトにインストールされています (WebSocket の処理を​​簡素化します)。

---

ステップ 1: Next.js プロジェクトをセットアップする

新しい Next.js プロジェクトを作成します (まだ作成していない場合):

<code class="language-bash">npx create-next-app real-time-chat
cd real-time-chat</code>

クライアント側とサーバー側の両方で使用するために Socket.IO をインストールします:

<code class="language-bash">npm install socket.io-client socket.io</code>

---

ステップ 2: WebSocket サーバーの作成

Next.js API ルートを利用して WebSocket サーバーを作成します。

1. pages/api/chat.js ファイルを作成します:

<code class="language-bash">mkdir pages/api
touch pages/api/chat.js</code>

2. 次のコードを chat.js に追加します:

<code class="language-javascript">// pages/api/chat.js

import { Server } from 'socket.io';

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Chat API' });
  } else {
    res.status(405).send('Method Not Allowed');
  }
}

export function configureSocket(server) {
  const io = new Server(server, {
    path: '/api/chat',
    cors: {
      origin: '*',
      methods: ['GET', 'POST'],
    },
  });

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

    socket.on('send_message', (message) => {
      io.emit('receive_message', message);
    });

    socket.on('disconnect', () => {
      console.log('A user disconnected');
    });
  });
}</code>

このコードは、Socket.IO サーバーをセットアップし、クロスオリジン通信の CORS を処理し、send_message イベントをリッスンして、接続されているすべてのクライアントに receive_message 経由でメッセージをブロードキャストします。

次に、next.config.js で WebSocket サーバーを初期化します。

<code class="language-javascript">// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      const { configureSocket } = require('./pages/api/chat');
      const http = require('http');
      const server = http.createServer(config.server);
      configureSocket(server);
      return config;
    }
    return config;
  },
};</code>

---

ステップ 3: フロントエンドの構築 (React および Socket.IO クライアント)

次に、Socket.IO クライアントを使用してサーバーに接続するフロントエンドを作成しましょう。

1. pages/index.js を開きます (または新しいコンポーネントを作成します)。
2. 次の React および Socket.IO クライアント コードを追加します:

<code class="language-javascript">// pages/index.js
import { useState, useEffect, useRef } from 'react';
import io from 'socket.io-client';

export default function Home() {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');
  const socketRef = useRef(null);

  useEffect(() => {
    socketRef.current = io({ path: '/api/chat' });
    socketRef.current.on('receive_message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });
    return () => { socketRef.current.disconnect(); };
  }, []);

  const sendMessage = () => {
    if (message.trim()) {
      socketRef.current.emit('send_message', message);
      setMessage('');
    }
  };

  // ... (JSX for the chat UI -  input field, send button, message display) ...
}</code>

このコードは、WebSocket 接続を確立し、受信メッセージをリッスンし、サーバーへのメッセージの送信を処理します。 チャット インターフェイス (入力フィールド、送信ボタン、メッセージ表示領域) を作成するために必要な JSX を忘れずに追加してください。

---

ステップ 4: アプリケーションの実行

以下を使用してアプリケーションを実行します:

<code class="language-bash">npm run dev</code>

ブラウザで http://localhost:3000 にアクセスします。 ブラウザーの複数のタブを開くと、すべてのタブでリアルタイムのメッセージ更新が表示されます。

---

結論

next.jsとwebsocketsを使用して、リアルタイムチャットアプリケーションを正常に構築しました！ Socket.ioはプロセスを簡素化し、接続管理とメッセージブロードキャストに使いやすい機能を提供しました。 この基盤は、ユーザー認証、プライベートメッセージング、データベースを使用した永続的なメッセージストレージなどの機能で拡張できます。 これは、ダイナミックで応答性の高いユーザーエクスペリエンスを作成する際のウェブケットの力を示しています。

以上がnext.jsおよびwebsocketsでリアルタイムチャットアプリケーションを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。