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公式のチュートリアルにおいても同じ内容で表記してある。
ブラウザのタブを開く数（閲覧者の数）に応じて、ブラウザ内の人数の値が変化する。
