Socket.ioの公式チュートリアルを触ってみる！（前編）｜プログラミングを知るはプログラミングを行うに如かず

こんにちは！chrysealmです。
本日は、Node.jsつながりで、Socket.ioの公式チュートリアルを触ってみようと思います。

公式チュートリアルはこちらになります。

こちらのページにはSocket.ioの入門として必要十分な内容が含まれているのですが、説明がすべて英語で記述されているため、読むのに抵抗がある方もいらっしゃるのではないでしょうか？

そこで今回は、このチュートリアルを元にSocket.ioを動かしてみたいと思います。

Node.jsの起動とHello World

まずは、Socket.ioを試してみるためのディレクトリをホームディレクトリに作成しましょう。

$ mkdir ~/socket_io_demo 
$ cd ~/socket_io_demo

次にpackage.jsonを作成します。
package.jsonはパッケージごとの依存関係やバージョンの情報を記したファイルです。

{
 "name": "socketDemo",
 "version": "0.0.1",
 "description": "socket.io app demo",
 "dependencies": {} 
}

続けてindex.jsを作成します。
こちらが本体となります。

var app = require('express')();
var http = require('http').Server(app); 
app.get('/', function(req, res){ 
    res.send('<h1>Hello world</h1>'); 
}); 
http.listen(3000, function(){ 
    console.log('listening on *:3000'); 
});

次にnpmをインストールします。
これはpackage.jsonのdependenciesに追加されます。

$ npm install --save express@4.15.2

それではindex.jsを起動しましょう。

$ node index.js listening on *:3000

「listening on *:3000」と表示されたら、ブラウザで下記アドレスにアクセスしてみてください。

http://localhost:3000

うまく動作していれば、「Hello world」と表示されるはずです。

ユーザーの接続状態を出力する

次はユーザーの接続状態を取得し、ターミナルに出力してみましょう。

まずはindex.htmlを作成します。

<!doctype html> <html> 
<head>
 <title>Socket.IO chat</title> 
 <style> 
    * { 
        margin: 0; 
        padding: 0; 
        box-sizing: 
        border-box; 
    } 
    body { 
        font: 13px Helvetica, Arial; 
    } 
    form { 
        background: #000; 
        padding: 3px; 
        position: fixed; 
        bottom: 0; 
        width: 100%; 
    } 
    form input { 
        border: 0; 
        padding: 10px; 
        width: 90%; 
        margin-right: .5%; 
    } 
    form button { 
        width: 9%; 
        background: rgb(130, 224, 255); 
        border: none; 
        padding: 10px; 
    } 
    #messages { 
        list-style-type: none; 
        margin: 0; 
        padding: 0; 
    } 
    #messages li { 
        padding: 5px 10px; 
    } 
    #messages li:nth-child(odd) { 
        background: #eee; 
    } 
</style> 
</head> 
<body> 
    <ul id="messages"></ul> 
    <form action=""> 
        <input id="m" autocomplete="off" />
        <button>Send</button> 
    </form> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> 
        var socket = io(); 
    </script> 
</body> 
</html>

今度は、package.jsonにsocket.ioを追加しましょう。

$ npm install --save socket.io

そして、index.jsを再び編集します。

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 
io.on('connection', function(socket){ 
    console.log('a user connected'); 
}); 
http.listen(3000, function(){ 
    console.log('listening on *:3000'); }
);

では、先ほど起動したindex.jsを「command + C」で停止し、再起動してください。

再起動したら、http://localhost:3000 にアクセスしているブラウザのページを更新します。

すると、更新するたびに、下記メッセージがターミナルに表示されるはずです。

a user connected

今度は切断時の情報も取得しましょう。

index.jsのconnectionの箇所を以下のように修正してください。

io.on('connection', function(socket){ 
    console.log('a user connected'); 
    socket.on('disconnect', function(){ 
        console.log('user disconnected'); 
    }); 
});

先ほどと同様に、index.jsの再起動、ページの更新を行うと、ターミナルに以下のようなメッセージが表示されます。