WebSocketでリアルタイムで株価を更新(Node.js)

f:id:sho322:20151025164653g:plain

サーバ側

var WebSocketServer = require('ws').Server;

var wss = new WebSocketServer({port: 8181});

var stock_request = {"stocks": ["TOYOTA","KAWASAKI","NTT","DOCOMO","MITSUI"]};

var stocks = {"TOYOTA": 0,
			  "KAWASAKI": 0,
			  "NTT": 0,
			  "DOCOMO": 0,
			  "MITSUI": 0
			}

function randomInterval(min, max) {
	return Math.floor(Math.random() * (max-min+1)+min);
}

var stockUpdater;
var randomStockUpdater = function() {
	for (var symbol in stocks) {

		//hasOwnProperty:オブジェクトが指定されたプロパティを持っているかどうかを示す真偽値を返す
		if(stocks.hasOwnProperty(symbol)) {
			//プラスになるかマイナスになるか、増減値を設定
			var randomizedChange = randomInterval(-150, 150);
			var floatChange = randomizedChange / 100;

			//増減値をプラマイする
			if (symbol == "TOYOTA" || symbol == "NTT") {
				stocks[symbol] += floatChange * 10000;
			} else if (symbol == "KAWASAKI" || symbol == "DOCOMO") {
				stocks[symbol] += floatChange * 1000;
			} else {
				stocks[symbol] += floatChange;
			}
			
		}
	}

	//更新時間を定義する0.5秒～2.5秒
	var randomMSTime = randomInterval(500, 2500);

	//ランダムに配列内の株価の値を更新する
	stockUpdater = setTimeout(function() {
		randomStockUpdater();}, randomMSTime)
};

randomStockUpdater();

wss.on('connection', function(ws) {
	var clientStockUpdater;
	var sendStockUpdates = function(ws) {
		if (ws.readyState == 1) {
			var stocksObj = {};

			//サーバ側で更新した株価の値をクライアント側に送信する
			for (var i=0; i<clientStocks.length; i++) {
				symbol = clientStocks[i];
				stocksObj[symbol] = stocks[symbol];
			}

			ws.send(JSON.stringify(stocksObj));
		}
	}

	clientStockUpdater = setInterval(function() {
		sendStockUpdates(ws)
	}, 1000);
	var clientStocks = [];

	//クライアントからメッセージを受け取る
	ws.on('message', function(message) {
		var stock_request = JSON.parse(message);

		//クライアントで定義したstocksオブジェクトを取り出す
		clientStocks = stock_request['stocks'];
		sendStockUpdates(ws);
	});

	ws.on('close', function() {
		if (typeof clientStockUpdater !== 'undefined') {
			clearInterval(clientStockUpdater);
		}
	});
})

クライアント側

<!DOCTYPE html>
<html lang="ja">
<head>
<title>WebSocketで株価リアルタイム更新</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://bit.ly/cdn-bootstrap-css">
<link rel="stylesheet" href="http://bit.ly/cdn-bootstrap-theme">
<script src="http://bit.ly/cdn-bootstrap-jq">
</script>
<style>
html, body {
	height: 100%;
}
</style>

<script>
$(function() {
	var ws = new WebSocket("ws://localhost:8181");
	var stock_request = {
		"stocks": ["TOYOTA", "KAWASAKI", "NTT", "DOCOMO", "MITSUI"]
	};

	var stocks = {
		"TOYOTA": 0,
        "KAWASAKI": 0,
        "NTT": 0,
        "DOCOMO": 0,
        "MITSUI": 0
	}
	//toggleClass 指定したCSSクラスが要素に無ければ追加し、あれば削除する。
	$('#TOYOTA span').toggleClass('label-success');

	ws.onopen = function(e) {
		console.log('Connection to server opend');
		ws.send(JSON.stringify(stock_request));
	}

	var changeStockEntry = function(symbol, originalValue, newValue) {
		var valElem = $('#' + symbol + ' span');
		valElem.html(newValue.toFixed(2));

		//オリジナルより上がっていたら緑。下がっていたら赤
		if(newValue < originalValue) {
			valElem.addClass('label-danger');
			valElem.removeClass('label-success');
		} else if (newValue > originalValue) {
			valElem.addClass('label-success');
			valElem.removeClass('label-danger');
		}
	}

	ws.onmessage = function(e) {
		var stocksData = JSON.parse(e.data);
		for(var symbol in stocksData) {
			if (stocksData.hasOwnProperty(symbol)) {
				changeStockEntry(symbol, stocksData[symbol], stocks[symbol]);
				stocks[symbol] = stocksData[symbol];
			}
		}
	}

	ws.onclose = function(e) {
		console.log("Connection closed");
		for (var symbol in stocks) {
			if (stocks.hasOwnProperty(symbol)) {
				stocks[symbol] = 0;
			}
		}
	}
})
</script>
</head>
<body lang="ja">
<div class="vertical-center">
  <div class="container">
  	<h1>WebSocketで株価リアルタイム更新</h1>
  	<table class="table" id="stockTable">
  	<thread>
  	<tr>
  	  <th>銘柄</th>
  	  <th>株価</th>
  	</tr>
  	</thread>
  	<tbody id="stockRows">
  	<tr>
      <td><h3>TOYOTA</h3></td>
      <td id="TOYOTA"><h3><span class="label label-default">95.00</span></h3></td>
    </tr>
    <tr>
      <td><h3>KAWASAKI</h3></td>
      <td id="KAWASAKI"><h3><span class="label label-default">50.00</span></h3></td>
    </tr>
    <tr>
      <td><h3>NTT</h3></td>
      <td id="NTT"><h3><span class="label label-default">50.00</span></h3></td>
    </tr>
    <tr>
      <td><h3>DOCOMO</h3></td>
      <td id="DOCOMO"><h3><span class="label label-default">550.00</span></h3></td>
    </tr>
    <tr>
      <td><h3>MITSUI</h3></td>
      <td id="MITSUI"><h3><span class="label label-default">35.00</span></h3></td>
    </tr>
    </tbody>
  	</table>
  </div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</div>
</body>
</html>

WebSocket: Lightweight Client-Server Communications

作者: Andrew Lombardi
出版社/メーカー: O'Reilly Media
発売日: 2015/09/09
メディア: Kindle版
この商品を含むブログを見る