6

12月 18

 

socket.ioの実装テスト

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公式のチュートリアルにおいても同じ内容で表記してある。

ブラウザのタブを開く数(閲覧者の数)に応じて、ブラウザ内の人数の値が変化する。

スクリーンショット 2018 12 06 11 20 51




No comments yet, be the first.

コメントを残す