こんにちは！chrysealmです。
本日は、Node.jsつながりで、Socket.ioの公式チュートリアルを触ってみようと思います。
公式チュートリアルはこちらになります。
こちらのページにはSocket.ioの入門として必要十分な内容が含まれているのですが、説明がすべて英語で記述されているため、読むのに抵抗がある方もいらっしゃるのではないでしょうか？
そこで今回は、このチュートリアルを元にSocket.ioを動かしてみたいと思います。
Node.jsの起動とHello World
まずは、Socket.ioを試してみるためのディレクトリをホームディレクトリに作成しましょう。
$ mkdir ~/socket_io_demo
$ cd ~/socket_io_demo
次にpackage.jsonを作成します。
package.jsonはパッケージごとの依存関係やバージョンの情報を記したファイルです。
{
"name": "socketDemo",
"version": "0.0.1",
"description": "socket.io app demo",
"dependencies": {}
}
続けてindex.jsを作成します。
こちらが本体となります。
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
次にnpmをインストールします。
これはpackage.jsonのdependenciesに追加されます。
$ npm install --save express@4.15.2
それではindex.jsを起動しましょう。
$ node index.js listening on *:3000
「listening on *:3000」と表示されたら、ブラウザで下記アドレスにアクセスしてみてください。
http://localhost:3000
うまく動作していれば、「Hello world」と表示されるはずです。
ユーザーの接続状態を出力する
次はユーザーの接続状態を取得し、ターミナルに出力してみましょう。
まずは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>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" />
<button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</body>
</html>
今度は、package.jsonにsocket.ioを追加しましょう。
$ npm install --save socket.io
そして、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(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000'); }
);
では、先ほど起動したindex.jsを「command + C」で停止し、再起動してください。
再起動したら、http://localhost:3000 にアクセスしているブラウザのページを更新します。
すると、更新するたびに、下記メッセージがターミナルに表示されるはずです。
a user connected
今度は切断時の情報も取得しましょう。
index.jsのconnectionの箇所を以下のように修正してください。
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
先ほどと同様に、index.jsの再起動、ページの更新を行うと、ターミナルに以下のようなメッセージが表示されます。
a user connected user disconnected
おわりに
チュートリアルとはいえ、そこそこの分量がありますので、残りの後半部分は次回ご紹介します。
それでは、本日はここまで。
お読みいただきありがとうございました！
