Socket.ioを使ってみる

参考元

Node.jsで現在時刻を取得
Node.jsからSocket.IOを使うための事前知識

Socket.ioとは

双方向非同期のリアルタイムなhttpリクエスト 。 今回使用するNodejsでは、受信がon, 送信がemit。

作るもの

入力した文字に現在時刻を付加した文字を要素に追加する。 つまり、クライアントとサーバ側(双方向)でのデータのやりとりを行う。

階層

• /root
  • /node_modules
  • index.html
  • server.js
  • package.json

必要なモジュール

npm install socket.io --save-dev
npm install date-utils --save-dev

クライアント

入力ボックスでデータを入力し、サーバに送り、その後サーバから送られてきたデータを追加する。
index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>
<meta charset="UTF-8">
<title>chat</title>
<style>
  .content-box {
    padding: 10px;
    margin: 10px;
    max-width: 576px;
    max-height: 324px;
    overflow-y: auto;
    border: solid #ccc;
    word-wrap: break-word;
  }
</style>
<script>
$(function() {
    // サブミット時
    $('form').submit(function() {
        // 入力した情報をサーバの'msg'に送る
        socket.emit('msg', $('input').val());
        $('input').val('');
        return false;
    });

    var socket = io.connect();

    // 受け取る
    socket.on('msg', function(data) {
        var html_data = '<div class="content-box">' + data + '</div>';
        $("#content-root").prepend(html_data); 
    });
});
</script>

<form><input><button>push</button></form><div></div>
<div class="container">
  <div id="content-root"></div>
</div>

サーバ

データを受け取り、現在時刻を付加する。
server.js

var fs = require('fs');
var http = require('http');
var server = http.createServer();
require('date-utils');

server.on('request', function(req, res) {
    var stream = fs.createReadStream('index.html');
    res.writeHead(200, {
        'Content-Type': 'text/html',
    });
    stream.pipe(res);
});

// ソケット(双方向通信)
var io = require('socket.io').listen(server);
server.listen(8000);

// 接続時初期化処理
io.sockets.on('connection', function(socket) {

    //　受け取る
    socket.on('msg', function(data) {
        var dt = new Date();
        var formatted = dt.toFormat("YYYY-MM-DD HH24:MI:SS");
        var re_data = `[${formatted}] ${data}`;

        // 送る
        io.sockets.emit('msg', re_data);
    });
});

実行

node server.js > ブラウザでlocalhost:8000と入力。> 文字列を入力し、submit。