Socket.IOのインストール
Socket.IOをインストールするためにはnpmを用います。Macbookの環境ではNode.jsを入れた際に同時にnpmもインストールされていました。ない場合は個別にインストールが必要です。コマンドは、npm install --save socket.ioです。これでNode.jsのパッケージをインストールする方法がわかるようになりました。
chatアプリの作製
それではSocket.IOの公式チュートリアルに則ってchatアプリを作っていきます。これを通してSocket.IOの使い方を学びます。公式チュートリアルはhttp://socket.io/get-started/chat/でみることができます。それによると、まずpackage.jsonを作製する必要があります。新しくチャット用のディレクトリchatを作製して移動します。mkdir chat && cd chat
package.jsonの作製
これはプロジェクトについて記述するマニフェストファイルです。これをchatディレクトに入れておきます。中身には名前やバージョンを記述します。チュートリアルなので適当に記述しておきます。
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "it is first socket.io sample",
"dependencies": {}
}
のように書いておきましょう。dependenciesの部分には追加しているpackageの情報を記述しますが、まだなにも入れていないので空になっています。expressとsocket.ioのインストール
package.jsonを記述したら使用するパッケージをインストールしていきます。まずexpressをインストールします。expressはnodeのwebフレームワーク。だそうです。詳しいことはよくわかっていませんが、ものすごい機能があるイメージです。続けてSocket.IOもインストールします。
npm install --save express npm install --save socket.iosaveオプションをつける意味としては、package.jsonのdependenciesに自動的にパッケージ名とバージョンを記述してくれるということがあります。chatディレクトリをみると、node_modulesというディレクトリができているのがわかると思います。これでexpressとsocket.ioのインストールが完了です。
chatアプリの記述
ここまでで環境が整いましたのでchatアプリを記述していきます。作成するファイルはindex.jsとindex.htmlになります。まずソースを載せます。
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('index.html');
});
io.on('connection',function(socket){
socket.on('chat message', function(msg){
io.emit('chat message',msg);
});
});
http.listen(3000,function(){
console.log('listenning on localhost:3000');
});
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>
<script src="/socket.io/socket.io.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="m" autocomplete="off"/><button id="btn">Send</button>
</form>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message',function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
これでチャットアプリが完成しました。これを実行するためには
node index.jsとやれば良いです。
動作の確認のためには複数のブラウザ（例えばノートパソコンとスマホ）からmacbookのipアドレス＋3000ポートにアクセスします。例としては
http://192.168.1.2:3000/のように入力すれば良いです。ipアドレスはifconfigを使用して調べます。
すると以下のようなチャットアプリが表示／動作します。
次回はchatアプリで学んだ方法を活かしてブラウザのボタンを押すとArduinoにシリアル通信を行い、Arduinoからの情報をシリアル通信で受信してブラウザに表示するアプリを作成します。
0 件のコメント:
コメントを投稿