まず、soket.ioのフォルダを作り、nmpでSocket.ioをインストールします。
[vagrant@localhost ~]$ mkdir socket.io
[vagrant@localhost ~]$ cd socket.io
[vagrant@localhost socket.io]$ node -v
v0.10.46
[vagrant@localhost socket.io]$ npm install socket.io
・socket.io
socket.ioとは、ブラウザ・node.jsのライブラリで、Websocketの技術を使っています。
Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser, and a server-side library for node.js. Both components have a nearly identical API. Like node.js, it is event-driven.
Socket.IO primarily uses the WebSocket protocol with polling as a fallback option, while providing the same interface. Although it can be used as simply a wrapper for WebSocket, it provides many more features, including broadcasting to multiple sockets, storing data associated with each client, and asynchronous I/O.
It can be installed with the npm tool.
では、app.jsとindex.htmlでサーバーサイドとクライアントサイドのウェブソケットを実装してみましょう。
app.js
var app = require('http').createServer(handler),
io = require('socket.io').listen(app),
fs = require('fs')
app.listen(1337);
function handler(req, res){
fs.readFile(__dirname + '/index.html', function(err, data){
if (err){
res.writeHead(500);
return res.end('Error');
}
res.writeHead(200);
res.write(data);
res.end();
})
}
io.sockets.on('connection', function(socket){
socket.on('emit_from_client', function(data){
// console.log(data);
// 接続しているソケットのみ
// socket.emit('emit_from_server', 'hello from server: ' + data);
// 接続しているソケット以外全部
// socket.broadcast.emit('emit_from_server', 'hello from server: ' + data);
// 接続しているソケット全部
// socket.client_name = data.name;
// io.sockets.emit('emit_from_server', '[' + socket.client_name + '] : ' + data.msg);
socket.join(data.room);
socket.emit('emit_from_server', 'you are in ' + data.room);
socket.broadcast.to(data.room).emit('emit_from_server', data.msg);
});
});
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>socket.ioの練習</title>
</head>
<body>
<form id="myForm">
<select id="rooms">
<option value="room-1">Room 1</option>
<option value="room-2">Room 2</option>
</select>
<input type="text" id="msg">
<input type="submit" value="Send!">
</form>
<ul id="logs"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
var socket = io.connect();
// emit: イベントを発信している
// on: イベントを待ち受けている
$('#myForm').submit(function(e){
e.preventDefault();
socket.json.emit('emit_from_client', {
msg: $('#msg').val(),
room: $('#rooms').val()
});
$('#msg').val('').focus();
});
socket.on('emit_from_server', function(data){
$('#logs').append($('<li>').text(data));
});
});
</script>
</body>
</html>
ブラウザを三つ立ち上げて、ローカル環境でテストしてみてください。
