Slide 1
Slide 1 text
socket.io v1.0 intro
@yosuke_furukawa
Slide 2
Slide 2 text
@yosuke_furukawa
Node.jsϢʔβʔάϧʔϓද / DeNAॴଐ
Slide 3
Slide 3 text
socket.io v1.0
ͬͱग़·ͨ͠Ͷʂʂ
Slide 4
Slide 4 text
IUUQZPTVLFGVSVLBXBIBUFOBCMPHDPNFOUSZ
͋·Γͷڵฃʹ͍Ͱ1Ͱ
༁
Slide 5
Slide 5 text
ࠓճͷ༁ͷ·ͱΊ
Slide 6
Slide 6 text
༁Ͱ͖͑Εͳ͔ͬͨ͜ͱ
͕͖͑ΕΔͱ͍͍ͳͱࢥ͍
·͢ɻ
Slide 7
Slide 7 text
New Engine, engine.io
Slide 8
Slide 8 text
Before, fallback style
XFCTPDLFU
Slide 9
Slide 9 text
Before, fallback style
XFCTPDLFU
Slide 10
Slide 10 text
Before, fallback style
XFCTPDLFU
9)3MPOHQPMMJOH
Slide 11
Slide 11 text
Before, fallback style
XFCTPDLFU
9)3MPOHQPMMJOH
Slide 12
Slide 12 text
Before, fallback style
XFCTPDLFU
9)3MPOHQPMMJOH
+40/1QPMMJOH
Slide 13
Slide 13 text
Before, fallback style
XFCTPDLFU
9)3MPOHQPMMJOH
+40/1QPMMJOH
Slide 14
Slide 14 text
Problem
• ॳظଓ·Ͱʹ͕͔͔࣌ؒΔՄೳੑ͕͋Δ
Slide 15
Slide 15 text
After, Upgrade style
9)3+40/1QPMMJOH
Slide 16
Slide 16 text
After, Upgrade style
9)3+40/1QPMMJOH
XFCTPDLFU
Slide 17
Slide 17 text
After, Upgrade style
9)3+40/1QPMMJOH
XFCTPDLFU
6QHSBEFͨ͠Β
QBVTFঢ়ଶʹͳΔɻ
Slide 18
Slide 18 text
Engine.io
• ॳظଓ·Ͱͷ࣌ؒΛվળ
• ଞʹtransportsͷௐ͜ͷͰߦ͏ͷͰɺক
དྷతʹ৽͍͠tranports(Google Chrome Socketͱ
͔pure TCP socket)͕ग़͖ͯͨ࣌ͦΕରԠͰ͖
ΔΑ͏ʹͯ͠ɺ֦ுੑ͕ߴ͍ࣄΛ͍ࣔࠦͯ͠Δ
Slide 19
Slide 19 text
Binary Support
Slide 20
Slide 20 text
Binary Support
• sound
• video
• image
• etc…
͜Ε·ͰemitͰ͖ͳ͔ͬͨͷ͕Ͱ͖ΔΑ͏ʹ
ͳͬͨɻ
Slide 21
Slide 21 text
DEMO
http://goo.gl/bMnN9k
Slide 22
Slide 22 text
࣮ݱํ๏
// client side
var img = canvas.toDataURL('image/webp');
var binary = window.atob(img.split(‘,')[1]);
// binaryΛͦͷ·· emit
socket.emit(‘image’, binary);
!
// server side
io.on('connection', function(socket){
// ࠓ·ͰͱมΘΒͳ͍ɺimage ΠϕϯτΛड͚औΔ
socket.on('image', function(data){
// ड͚औͬͨbinaryͷσʔλΛbroadcast͢Δ
socket.broadcast.volatile.emit('image', {
id: socket.id,
blob: data
});
});
});
Slide 23
Slide 23 text
࣮ݱํ๏
// client side
var img = canvas.toDataURL('image/webp');
var binary = window.atob(img.split(‘,')[1]);
// binaryΛͦͷ·· emit
socket.emit(‘image’, binary);
!
// server side
io.on('connection', function(socket){
// ࠓ·ͰͱมΘΒͳ͍ɺimage ΠϕϯτΛड͚औΔ
socket.on('image', function(data){
// ड͚औͬͨbinaryͷσʔλΛbroadcast͢Δ
socket.broadcast.volatile.emit('image', {
id: socket.id,
blob: data
});
});
});
DBOWBT͔Βը૾ΛCJOBSZ
Ͱऔಘ͠ɺFNJU
FNJU͞ΕౕͨΛͦͷ··
CSPBEDBTU
Slide 24
Slide 24 text
Scalability
Slide 25
Slide 25 text
Scalability
3FEJT
OHJOY
TPDLFUJP
Slide 26
Slide 26 text
Scalability
3FEJT
OHJOY
TPDLFUJP
OHJOYͰTPDLFUJP
αʔόͷৼΓ͚ઌΛܾΊΔ
ৼΓ͚ઌ*1ΛݩʹܾΊΔ
֤ϓϩηεؒ3FEJTͰ
1VC4VCͤ͞Δɻ
Slide 27
Slide 27 text
࣮ݱํ๏(nginx)
# in nginx.conf
# ip_hashΛجʹ3001-3004ͷportͰಈ͍͍ͯΔserverʹଓ
upstream io_nodes {
ip_hash;
server 127.0.0.1:3001;
server 127.0.0.1:3002;
server 127.0.0.1:3003;
server 127.0.0.1:3004;
}
# ຊମ3000൪portͰड͚͚Δ
server {
listen 3000;
server_name ;
location / {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_http_version 1.1;
# ͜͜Ͱproxy_pass ʹ io_nodesΛࢦఆ͢Δ
proxy_pass http://io_nodes;
}
}
Slide 28
Slide 28 text
࣮ݱํ๏(nginx)
# in nginx.conf
# ip_hashΛجʹ3001-3004ͷportͰಈ͍͍ͯΔserverʹଓ
upstream io_nodes {
ip_hash;
server 127.0.0.1:3001;
server 127.0.0.1:3002;
server 127.0.0.1:3003;
server 127.0.0.1:3004;
}
# ຊମ3000൪portͰड͚͚Δ
server {
listen 3000;
server_name ;
location / {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_http_version 1.1;
# ͜͜Ͱproxy_pass ʹ io_nodesΛࢦఆ͢Δ
proxy_pass http://io_nodes;
}
}
OHJOYͰJQΛجʹόοΫΤϯυ
ͷαʔόʔʹৼΓ͚Δ
ݟͯͷ௨ΓɺDMVTUFSͬͯͳ͍ɻ
DMVTUFSͩͱৼΓ͚ઌ͕Ұҙʹ
ఆ·Βͳ͍ڪΕɺ
DMVTUFS͏߹TUJDLZTFTTJPO
NPEVMFΛ͏ɻ
Slide 29
Slide 29 text
࣮ݱํ๏(redis)
// socket.io-redisΛ͏
// ͪͳΈʹadapterࢁ͋ΔͷͰɺredis͡Όͳ͍ํ๏͋Δ(zero-mq etc)
var sioredis = require('socket.io-redis');
!
// io.adapterͰredisαʔόΛࢦఆ͢Δɻ
io.adapter(sioredis({
host: 'localhost',
port: 6379,
}));
!
!
// جຊ͜Ε͚ͩͰϓϩηεؒͷΓͱΓ࣮ݱՄೳɻ
Slide 30
Slide 30 text
Integration with other
process
Slide 31
Slide 31 text
Integration with other process
3FEJT
OHJOY
TPDLFUJP
1)13VCZ(P1ZUIPO/PEFKT
Slide 32
Slide 32 text
Integration with other process
3FEJT
OHJOY
TPDLFUJP
1)13VCZ(P1ZUIPO/PEFKT
TPDLFUJPFNJUUFS
Slide 33
Slide 33 text
࣮ݱํ๏(socket.io-go-emitter)
// From golang code
emitter := SocketIO.NewEmitter(&SocketIO.EmitterOpts{
// need Redis connect option
Host:"localhost",
Port:6379,
})
emitter.Emit("message", “Hello World!”)
!
// جຊ͜ΕΛ࣮ߦ͢Δ͚ͩɺEmitͬͯΕͦΕΛon͍ͯ͠Δsocket.ioΫϥΠΞϯ
τʹಧ͘ɻ
!
// ݟͨײ͡ɺPHP, Python, Golang, RubyͰ࣮͞ΕͯΔ
// (Perl͞Μ…)
Slide 34
Slide 34 text
Other tips
Slide 35
Slide 35 text
Other Tips
• Debug͘͢͠ͳͬͨ
# खલʹDEBUG=*ͱ͔͚ͭΔͱstdoutʹϩά͕දࣔ͞ΕΔ
$ DEBUG=* node app.js
!
visionmedia࡞ͷ debug module ͍ͬͯΔɻ
!
# ΫϥΠΞϯταΠυͷ߹localStorage.debug=“*”ͱ͔ΔͱϩΪϯά͞ΕΔ
> localStorage.debug=“*”
!
Slide 36
Slide 36 text
Other Tips
• ΫϥΠΞϯτ͕CDN ͔Β৴͞
ΕΔΑ͏ʹͳͬͨ
# ࠓ·Ͱ
!
# CDN͔Β৴͞ΕΔɻ
Slide 37
Slide 37 text
·ͱΊ
• New Engine
• Binary Support
• Scalability
• Integration with others
• Other Tips
Slide 38
Slide 38 text
Socket.io meetup in JAPAN
• Guillermo Rauch comes here soon