こんにちは〜
かずきです。

前回構築したNode.jsの環境を利用して、socket.ioでのwebsocket通信をしようと思います

Node ExpressとForeverのインストール

Node.js向けフレームワークのExpressとNodeプロセスをデーモン化するForeverをインストールします

# npm install -g express
# npm install -g forever

 

Expressでのプロジェクト作成

# express -e <app name>

 

必要なモジュールのインストール

# cd <app name>
# npm install
# npm install socket.io

 

socket.ioを使用する為のスクリプトを追加

javascriptのファイルを開きます

# vi app.js

以下の内容ファイルの下部に追加

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var http = require('http');       // add

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

app.set('port', process.env.PORT || 3000);  // add

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); // ejsに変更

・
・
・ 省略
・
・

module.exports = app;

// add
server = http.createServer(app).listen(app.get('port'),function()
{
  console.log("Node.js Server Start. port:" + app.get('port'));
}); 

// ----socket.io add begin----
// クライアントの接続を待つ(IPアドレスとポート番号を結びつけます)
var io = require('socket.io').listen(server);

//-----------------------------------------------
//! @brief クライアントが接続してきたときの処理
//! @param[in] socket セッションの情報
//-----------------------------------------------
io.sockets.on('connection', function(socket) 
{
  console.log("connection");
  console.log(io.clients().server.eio.clientsCount + "Clients");
 
  //---------------------------------------------------
  //! @brief メッセージを受けたときの処理
  //! @param[in] 端末からの送信情報(JSON <value>)
 //---------------------------------------------------
  socket.on('message', function(data) 
  {
    console.log("massage");
    // クライアント全員に送信
    io.emit('message', { value: data.value });
  });
  
  //------------------------------------------
  //! @brief クライアントが切断したときの処理
  //! @param[in] なし
  //------------------------------------------
  socket.on('disconnect', function()
  {
    console.log("disconnect");
  });
});
// ----socket.io add end----

 

クライアント(webブラウザ)に表示されるページ&スクリプトを記述する

viewディレクトリに移動して、index.ejsファイルの記述をしていきます

# cd view
# vi index.ejs

ファイルは以下の内容で記述します

<script src="socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('<アプリのURL(例 ・・・ ws://localhost:3000)>',{ 'path' : '/socketIOtest/socket.io'});

socket.on('connect', function(msg) 
{
  console.log("Connect");
});

// メッセージを受けたとき
socket.on('message', function(msg) 
{
  console.log("ReceiveMessage");
  // メッセージを画面に表示する
  document.getElementById("receiveMsg").innerHTML += `<p>${msg.value}</p>`;
});

// メッセージを送る
function SendMsg() 
{
  console.log("SendMessage");
  var msg = document.getElementById("message").value;
  // メッセージを発射する
  socket.emit('message', { value: msg });
}
// 切断する
function DisConnect() {
  console.log("DisConnect");
  socket.emit('message', { value: "切断しました"})
  // socketを切断する
  socket.disconnect();
}
</script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ページ名</title>
    <link rel='stylesheet' href='stylesheets/style.css' />
  </head>
  <body>

  <h1>チャット</h1>
  <br>
  <div id="form">
  <input type="text" id="message" value="">
  <input type="button" value="メッセージを送る" onclick="SendMsg()">
  <input type="button" value="切断する" onclick="DisConnect()">
  </div>
  <div id="receiveMsg"></div>

  </body>
</html>

動作確認

プロジェクトのルートディレクトリに戻り、nodeコマンドでアプリを実行します

# cd ..
# node app.js

ブラウザでhttp://localhost:3000にアクセスし、アプリを操作する事で、サーバ側のプログラムのログやエラーがコンソールに表示されます。
※クライアントのデバッグについてはChromeのディベロッパーツールが手軽で便利です

プロセスをデーモン化

動作確認が完了したら、プロセスをデーモン化します。

# forever start app.js

これでプロセスがバッググラウンドで実行されます。

今回は簡単なチャットアプリなので問題ありませんが、ゲームなどでsocket.ioを使用する場合は
・到達順保証 (送信した順にデータが到達している事の保証)
・到達保証 (データが到達している事の保証)
が無いので、自前でカバーする必要があります!

参考にさせていただいたサイト

WebSocket 事始め by Node.js + Socket.IO by @ogwmtnr on @Qiita