N予備校のプログラミング入門メモ15

はじめに

もう少しだけやります。

4章 実践サーバーサイドプログラミング

09.WebSocket

Socket.IOというアプリを利用する。

npm install socket.io@1.4.5 socket.io-client@1.4.5 --save

yarnの場合は特に--saveをつけなくてもpackage.jsonに反映される。npm install --save-devのときはyarn add --devにする必要がある。

bin/wwwを編集する。socket.ioモジュールを読み込んでsocket.emit関数でWebSocketの接続に対してイベントを発行するようにemitServerStatus関数を実装して、socket.ioモジュールのconnectionイベントが発火した際に実装したemitServerStatus関数を定期的に実行する感じのコードを書いた。

function emitServerStatus(socket) {
  socket.emit('server-status', { loadavg: os.loadavg() });
  console.log('server-status event emitted.');
}

io.on('connection', function (socket) {
  setInterval(emitServerStatus, 10, socket);
});

setIntervalで関数を10ミリ秒ごとに呼び出しててマジかってなるけどWebSocketなら大丈夫ってことなんだろうきっと。

ここまで実装してPORT=8000 npm startするとエラーが出て起動しない。追記した部分をコメントアウトして再度サーバを起動したが同じエラーが出た。

node_modulesを削除して再度yarnした後、試しに

yarn add socket.io@1.4.5 socket.io-client@1.4.5

してサーバを起動したらうまくいった。yarnでインストールしても一緒だと思うのでtypoしてたんじゃないかと思っている。

ここまでのコードではまだSocket.IOの恩恵を受けていない。

クライアント側で以下のようにする。

const socket = require('socket.io-client')('http://localhost:8000');
socket.on('server-status', (data) => {
  loadavg.text(data.loadavg.toString());
});

localhost:8000にアクセスすると怒涛の勢いでserver-status event emitted.の文字が表示された。

webpackするのをよく忘れるので忘れないこと。

yarn run webpackで./node_modules/.bin/の中のwebpackを実行してくれる。

gitにコミットするとき、コメントを待ちがえたままコミットしてしまった。git commit --amend -m "コメント"とすると直前のコメントを変更できた。

途中で電池が切れて落ちたんだけど、復帰したらここまで書いたところが生きてて感動した。新しいPCありがとう、学習用に買ってよかった。