NestJSで簡単なアプリを作ってみる（２）WebSocketでチャット機能を作る

ちょっと拍子抜けでした。ちゃんとフレームワーク比較するときにちゃんと調べているわけではなかったのでただのmasaの勘違いなのですが。（でもそれならそれで、公式ドキュメントにSocket.ioを使う想定だよって書いておいてもいいような。Node.jsのWebSocketのライブラリってもしかして他にも結構あるのかな・・・？）

ソースを見た感じ、SubscribeMessageデコレータでどのイベントにどのメソッドが紐づくのかを直感的に指定できるようになっていますね。確かにこれは便利。それに他のサービスなどのデコレータの使い方と似ているから使いやすい。

作っていく

まずはnestコマンドでgatewayのテンプレを作成。

nest g gateway Events

で、サンプルをもとにgatewayを実装。

import {
  MessageBody,
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway({
  cors: {
    origin: '*',
  },
})
export class EventsGateway {
  @WebSocketServer()
  server: Server;
  wsClients=[];

  handleConnection(client: any) {
    this.wsClients.push(client);
  }

  @SubscribeMessage('chat')
  chat(@MessageBody() data: any) {
    console.log(data);
    this.broadcast('chat', data.message);
  }

  @SubscribeMessage('testing')
  emitLoginMessage(@MessageBody() data: any) {
    console.log(data);
    this.broadcast('login', data + 'さんがログインしました。');
  }

  private broadcast(event, message: string) {
    const broadCastMessage = message;
    for (let c of this.wsClients) {
      c.emit(event, broadCastMessage);
    }
  }

}

でクライアントhtmlも用意。

<html>
<head>
</head>

<body>
<div id="test-area">

</div>
<input type="text" id="input" />
<button onclick="sendMessage()">send</button>
<script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>
<script>
    const socket = io('http://localhost:8080');
    const userId = Math.random().toString(32).substring(2);
    socket.on('connect', function() {
        console.log('Connected');
        socket.emit('testing', userId);
    });
    socket.on('login', function(data) {
        let textArea = document.getElementById("test-area");
        textArea.innerHTML += '<div style="color: blue;">' + data + '</div>';
        textArea.innerHTML += "<br />";
    });
    socket.on('chat', function(data) {
        let textArea = document.getElementById("test-area");
        textArea.innerHTML += data;
        textArea.innerHTML += "<br />";
        console.log('event', data);
    });
    socket.on('exception', function(data) {
        console.log('event', data);
    });
    socket.on('disconnect', function() {
        console.log('Disconnected');
    });

    function sendMessage() {
        let message = document.getElementById("input").value;
        console.log(message);
        socket.emit('chat', { message: userId + ": " +message });
    }
</script>
</body>
</html>

今回はブロードキャストの動作確認もするので、webstormのローカル実行機能で、ローカルでブラウザを二つ立ち上げます。

ブラウザにアクセスすると、ランダム文字列でuserIdが決定され、loginイベントが発火し、ログイン通知がブロードキャストされます。その後チャット欄に文字を入れてsendボタンを押せば、そのときブラウザを開いているユーザ全員に通知がいくようになっています。

このブロードキャスト処理の実態は、接続時にwsClientsに接続情報を保存しておき、ループでクライアント全員にemitを送っているだけなので、接続数が増えると遅延なども出てきそうです。