node.jsを新しいプロジェクトに採用するにあたって、おさらい的な意味で入門書を読みかえしている。
とても良い本なので、nodejsをこれから始めようと思っている皆さんにもおすすめしたい。
この本の中のsocket.ioに関する項目について、実装してみたところ不具合が発生したので、自分の覚書として記しておきたい。
実行環境は以下の通り
sakuraVPS CentOS Linux release 7.5.1804 (Core)
nodejsのバージョンは v10.0.0
npmからインストールしたsocket.ioのバージョンはv1.7.4
クライアント側のsocket.ioはcdnよりv2.2.0
サーバー側
//io_server.js var http = require('http'); var fs = require('fs'); var Io = require('socket.io'); var server = http.createServer(function(req,res){ var source = fs.createReadStream('index.html'); res.writeHead(200); source.pipe(res); }) io = Io(server); let counter=0; io.sockets.on('connection',function(socket){ io.emit('change',{ count:counter+1 }); socket.on('join',function(){ counter++; socket.broadcast.emit('change',{ count: counter }); }); socket.on('disconnect',function(){ counter--; socket.broadcast.emit('change',{ count:counter }); }); }); server.listen(3000);
クライアント側
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>chatroom</title> </head> <body> <h1>現在の人数</h1> <h2 id="counter">0人</h2> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script> <script> //var socket = io.connect("localhost:3000"); var socket = io.connect(); socket.on('change',function(o){ document.getElementById("counter").innerHTML = o.count+ "人"; }); socket.on('connect',function(){ socket.emit('join'); }); </script> </html>
書籍では、index.htmlの16行目は
var socket = io.connect("localhost:3000");
とあるが、これだと動作しなかった。
結果、その下の行の
var socket = io.connect();
で動作することを確認したので記しておく。
ブラウザのコンソールで発生するエラーをもとにググってたどり着いたのが以下のページ
javascript - SocketIO ERR_CONNECTION_REFUSED - Stack Overflow
このページを見ることで解決できたのだけれど、socket.ioを0.9から1.3.xにアップグレードしたあとio.connectには引数を使うとエラーが起こるようになったらしい。
socket.io公式のチュートリアルにおいても同じ内容で表記してある。
ブラウザのタブを開く数(閲覧者の数)に応じて、ブラウザ内の人数の値が変化する。