Node.js+Express+Azureでチャットアプリをデプロイしてみる2

それでは前回の続きで、サーバ側とクライアント側の通信時の処理を書いていきます。

サーバ側

まずポートを指定します。
ポートはアプリを実行する環境によって異なるので以下の形にする。
process.envは環境変数。process.env.PORTはユーザー環境のポート番号のこと。
また、環境変数を自分で設定する場合は、nodeコマンドを実行する前にターミナルから設定できる。

const PORT = process.env.PORT || 3000;

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

//ここに通信時の処理を書く

server.listen(PORT, () => {
  console.log(`listening on *:${PORT}`);
});

通信時の処理を書いていく。 サーバ ー クライアント間のやり取りは、クライアントがsocket接続を要求することで開始される。
サーバがクライアントの接続を確立すると、サーバ側で'connection'イベントが発生する。（クライアント側では'connect'イベント）
このイベントは引数にsocketが渡される。
クライアントからイベントが発行されたときに受け取る処理をsocket.onを定義しておく。
ここでは、'chat message' というイベントが発行されてmsgを受け取った時の処理を定義している。
そしてクライアントからイベントを受け取ったあと、io.emitでサーバ側でイベントを発行する。

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

  //socket処理　個別の要件を受け付けるイベントハンドラ　
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    //emit　→ 自分を含む全員にメッセージを送信する
    io.emit('chat message', msg);
  });

});

クライアント側

まずはsocket.ioに接続。
フォームが送信されたらemitでイベントを発行して、受け渡す値を指定。（$('#m').val()）
次にフォームを空にして処理はいったん終了。この処理をサーバ側のonイベントで受け取る。
そしてサーバ側で処理が完了し、サーバ側からemitでイベントが発行された後に受け取るonイベントを設定する。
ここでは、イベントを受け取ってmsgをHTMLに挿入する処理を書いている。

<script>
      const socket = io();
      $('form').submit(() => {
        socket.emit('chat message', $('#m').val()) //chat messageイベント実行
        $('#m').val("");
        return false;
      })
      socket.on('chat message', (msg)=> {
        $('#messages').append($('<li>').text(msg)); //jqueryでメッセージを追加
      })
</script>

ざっくりだけどサーバ ー クライアント間の処理の流れを書きました。