Socket.io を使う

（プログラミングの過程を順を追って）

• express-generator を使わないで作ってみる

前準備

1. node.js が使える状態にしておく
   （プロキシの設定も）

    npm config set proxy http://proxy:3128/
   

2. フォルダを作る（アプリケーションフォルダ）
   • エクスプローラでそのフォルダ（今は空っぽだけど）を 表示しておくといい
3. コマンドプロンプトを開く
   • エクスプローラから開くといい
4. エディタを開いておく（あとで必要な時に開くのでも可）

5. ブラウザも開いておこう（同上）

6. npmの初期設定

    npm init
   

   • 問合せには とりあえず 何も入れずEnterだけ答えておく
   • と、package.json　ファイルが生成される
7. ソースファイル index.js を作る
   （名前は何でもいいが package.jsonにその名前を書いてしまったので）
   • エディタで新規作成して、その場所に保存。または
   • エクスプローラで「新しいテキストドキュメント」のあと 名前を（拡張子ごと）変更

Webサーバの骨組み：JSによるコード（1）

• index.js に 以下のように順次書き足していく
• このコードを (コマンドプロンプトの中で開いた）node の中で 実行してみてもいい

require('express')
require('http')
// こういう形で ライブラリをアプリケーションに組み込む

読み込んだライブラリ（が返すオブジェクト）を後で使えるように

// requireが返すオブジェクトを変数として名前をつける
var exxpress=require('express')
var http=require('http')

２つのオブジェクトの関係を認識しよう

• 通信を受け付けるオブジェクト server
• リクエストを処理するオブジェクト app

var express=require('express')
var app=express()
var http=require('http')
var server=http.Server(app)

要求処理をするコード（の一部）と、 接続待ちのためのコード

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

または、ES6(ECMAScript2015以降）の文法で

app.get('/', (req, res)=>{
  res.send('<h1>Hello world</h1>')
})
server.listen(3000, ()=>{
  console.log('listening on *:3000')
})

• 関数を参照する function キーワードの代わりに 矢印 ‘=>’ （引数の括弧の右に置く）が使える。
• 文の終りのセミコロン ‘;’ は省略できる。
• そのほか様々な文法の改良があるが追々紹介していく。

動かしてみる

node index

• これで起動するかどうかは、ここで使われているライブラリの インストール状況に依存する。
• 正常に起動すれば 3000番で待ってるようなメッセージが出て 待機状態になる。
• Ctrl+C で停止できる。

• インストールされていないライブラリを、（アプリケーションにローカルなものとして）インストールしておこう

    npm install express -save-dev
    npm install http -save-dev
  

• package.json ファイルの、依存関係の項目として 追加される筈

• これで再度起動してみよう

起動の省力化

• package.json に 以下のような行を挿入する (既存の scripts: の行の後ろに）

    "scripts": {
    　　"start": "node-dev index",
  

• このブレースの中に “test” の行があれば、start行の 末尾にカンマ ’,’ が必要。

• node-dev は 別途インストールしておくといい。 （なければ普通に node コマンドで起動してもいいが）

    npm install node-dev -g
  

  • node-dev 以外にも同様の機能のあるライブラリはいくつかあるので自由に選んでいい

• 以降、起動は以下のコマンドで行うことができる

    npm start
  

  • さっき挿入した start に対応するコマンドが実行される。
  • node-dev は、index.jsを書き換えると自動的に 再起動してくれる。

トップページ

• フォルダ views （express等の流儀に沿ってこの名前を使っておく）を、アプリケーションフォルダの下に（なければ）作って、 そこに index.jade を作る（または index.pug)。

    doctype html
    p#time
  

• jQueryを入れておこう（あとで使う）

    doctype html
    script(src='https://code.jquery.com/jquery-3.1.1.slim.min.js')
    p#time
  

  • このアドレスは、「jquery cdn」でヒットしたページで、 最新版の slim minified のものを選んだ。

• 静的コンテンツ（HTTPのリクエストに応じて ファイルの内容がそのままレスポンスとして送信される）を置くためのフォルダとして、public （同上）を作り、 style.css （これもよくある名前）を作っておく

    body {color:green}
  

  （この中身は、今のところは適当）

• viewsフォルダを jadeで扱えるように設定を行う

    var path=require('path') // npm install は不要の筈
    //  ...
  	
    // views フォルダを認識させる
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade')
    // jade でなく　pug でもいい
    // そのときは ファイルの拡張子も .pug にする 
  

• トップページを変更（jadeに描画させる）

    app.get('/',(res,req)=>{
        res.render('index') // ここを変更
        // viewsフォルダ（とさっき設定した場所）にある、
        // index.jade を HTMLに変換して送信せよ という指示
    })
  

• publicフォルダも設定しておこう

    app.use(express.static(path.join(__dirname, 'public')));
  

• cssも読み込ませよう。
  index.jadeに挿入:

    doctype html
    link(rel="stylesheet" href="style.css")
    // 以下の行は省略
  

socket.io の組み込み

• index.jsの先頭部に追加

    var io=require('socket.io')(server);
    // または２行に分けて
    var socketio=require('socket.io')
    var io=socketio(server)
  

  • socket.io も ここでインストール しておく必要があるかも知れない。

    npm install --save-dev
    

• 接続受理のためのコード（後半の適当なところに）

    io.on('connection', (sock)=>{
      console.log('client connected')
    })
  

  • プログラムの後半は、いくつかの宣言（どういう事象に対してどういう処理をする、という）から成り立つが、 その宣言の記述順は特に問われない。

• クライアント側も WebSocket対応にする（index.jadeに挿入）

    script(src='socket.io/socket.io.js')
    script(src="chat.js")
  

  • クライアント側のライブラリ socket.io.js は、 サーバ内に仮想的に用意される筈。
  • 自分で作るクライアント側のコードは、jadeの中に 直接書いてもいいが、
    ここでは別ファイルにする前提で説明する。

• クライアント側のコード（まずは受信のみ）：
  public（さっき作った）フォルダに chat.js というファイル を作ることにしておこう。

    $(()=>{		// １行目はjQueryの配下で動作させるためのお決まりの記法
      var socket = io()	// サーバにソケット接続する
      socket.on('time',(msg)=>{ // イベント名が 'time' であるメッセージが届いた時の、
        // 受信処理
        $('#time').text(msg) // セレクタ #time で示す要素にそれを表示する
      })  
    })
  

• クライアントに対して送信するサーバ側コードの例： （ io.on のブロックの中に記述する）

    ...
      var n=0 // カウンタ用変数
      setInterval(()=>{  // 一定時間間隔で実行
        n+=1  // 
        console.log('time('+n+')')
        // とりあえず時間を送る代わりにカウンター値を送る
        sock.emit('time',n)
      },1000)
    })
  

• 時刻を送るなら

    require('date-utils')
    // ...
    // 以下は、setIntervalの中を変更する
    var time=new Date().toFormat("YYYY/MM/DD HH24時MI分SS秒")
    sock.emit('time',time)
  

  • 予め（これまでに紹介した方法で）date-utils ライブラリをインストールしておくこと。

一人チャット

• 前述の、現在時刻をサーバからpushし続けるコードは生かしたまま、
• 同じ通信路を使って、
• 別のイベント名での通信（こんどは双方向）を行う。

1. ページ上での入出力フィールド（index.jadeへの追加

    #messages
    .input
      input#m
      button#b 送信
   

2. CSSによる修飾(style.cssへの追加）の一例

    .input { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
    input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
    button { padding: 3px; width: 5%;  }
    #messages { list-style-type: none}
    #messages li:nth-child(odd) { background: #eee; }
   

3. クライアント側のコード（chat.jsに挿入）

    $('#b').click(()=>{
      console.log("sub")
    	  socket.emit('chat message', $('#m').val())
      $('#m').val('')
      return false
    })
    socket.on('chat message', (msg)=>{
    　　$('#messages').append($('<li>').text(msg))
    })
   

4. サーバ側のコード
   （ io.on のブロックの中に記述する）

    ...
      sock.on('chat message',(msg)=>{
        console.log(msg)
        var time=new Date().toFormat("HH24:MI:SS")
        sock.emit('chat message',time+'=>'+msg)
      })
    })
   

ここまでのところで、フォルダ構成としては右図のようになるだろう。 （リンク先のファイルは、サンプルとして用意したもの; 前述のコードと若干違う部分もある）

• アプリケーションフォルダに index.jsと、package.json
• public に chat.js と style.css
• views に index.jade
• node_modules には ライブラリ多数