Azure と Next.js を利用した WebSocket 通信におけるメッセージ受信と表示

前回の記事では、Azure と Next.js を用いて WebSocket 通信を行う基本的な設定を行いました。今回は、その続きとして受信したメッセージを画面に表示する方法を紹介します。

受信メッセージの管理

まず、受信したメッセージを管理するための状態を設定します。React の useState フックを使用します。

// pages/index.tsx
const [messages, setMessages] = useState<string[]>([])

この messages ステートは受信したメッセージの一覧を保持します。

メッセージ受信の処理

次に、メッセージの受信処理を設定します。これは HubConnection オブジェクトの on メソッドを使用して実装します。

// pages/index.tsx
useEffect(() => {
  const createHubConnection = async () => {
    // ...

    connection.on("receiveMessage", (message: string) => {
      setMessages(prevMessages => [...prevMessages, message])
    })

    // ...
  }

  createHubConnection()
}, [])

on メソッドの第一引数にはメッセージを受信するイベント名を指定し、第二引数にはそのイベントが発生したときに実行するコールバック関数を指定します。このコールバック関数の中で setMessages を使用して messages ステートに受信したメッセージを追加しています。

メッセージの表示

最後に、受信したメッセージを画面に表示する部分を実装します。

// pages/index.tsx
return (
  <div>
    {messages.map((message, index) => (
      <div key={index}>{message}</div>
    ))}
  </div>
)

以上で、受信したメッセージを画面に表示する処理は完成です。このプロセスを通じて、リアルタイム通信を行うアプリケーションの基本的な部分が実装できました。

これからは、送信機能の実装や、より高度なリアルタイム通信の処理を行うことが可能です。この基本的な流れを理解することで、様々なリアルタイム通信を必要とするアプリケーションの開発に役立てることができるでしょう。

このように、Azure と Next.js を組み合わせることで、比較的簡単にリアルタイム通信を実現することが可能です。さらなる実装の詳細や応用例については、次回の記事で紹介します。ご期待ください。