Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
socket.io v1.0 introduction
Search
Yosuke Furukawa
PRO
June 23, 2014
Programming
4.3k
18
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
socket.io v1.0 introduction
Tokyo Node Gakuen #tng13
Yosuke Furukawa
PRO
June 23, 2014
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Webの地図
yosuke_furukawa
PRO
6
5.2k
XHTMLが残したもの
yosuke_furukawa
PRO
2
940
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
450
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
320
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
5.4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.9k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
380
Removing Corepack
yosuke_furukawa
PRO
9
2k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
3.2k
Other Decks in Programming
See All in Programming
3回つくってわかった、 定期実行ジョブ基盤の本質情報
takai
0
460
R8 の設定見直しでアプリサイズ削減
andpad
0
220
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
nao_randd
0
160
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
marcoroth
0
220
個人開発者よ、Honoを使え(おじさんver)
tanahiro2010
2
260
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
150
自サークルのIdPからログアウトできるようになるまで
taiseiue
1
140
GemmaをJevのように使ってみる / Use Gemma like Jev
kishida
5
790
Jetpack Compose Mechanisms
skydoves
3
820
npm との違いを手がかりにGo の依存管理を理解したい
optim
0
340
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
teyamagu
PRO
1
1k
re:Inventに行く前に知っておきたい現地参加のノウハウ
nokomoro3
0
430
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
210k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
340
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
330
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.1k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
550
Optimising Largest Contentful Paint
csswizardry
37
4k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
600
How to Talk to Developers About Accessibility
jct
2
580
WENDY [Excerpt]
tessaabrams
14
40k
Become a Pro
speakerdeck
PRO
31
6.3k
The SEO Collaboration Effect
kristinabergwall1
1
590
Transcript
socket.io v1.0 intro @yosuke_furukawa
@yosuke_furukawa Node.jsϢʔβʔάϧʔϓද / DeNAॴଐ
socket.io v1.0 ͬͱग़·ͨ͠Ͷʂʂ
IUUQZPTVLFGVSVLBXBIBUFOBCMPHDPNFOUSZ ͋·Γͷڵฃʹ͍Ͱ1Ͱ ༁
ࠓճͷ༁ͷ·ͱΊ
༁Ͱ͖͑Εͳ͔ͬͨ͜ͱ ͕͖͑ΕΔͱ͍͍ͳͱࢥ͍ ·͢ɻ
New Engine, engine.io
Before, fallback style XFCTPDLFU
Before, fallback style XFCTPDLFU
Before, fallback style XFCTPDLFU 9)3MPOHQPMMJOH
Before, fallback style XFCTPDLFU 9)3MPOHQPMMJOH
Before, fallback style XFCTPDLFU 9)3MPOHQPMMJOH +40/1QPMMJOH
Before, fallback style XFCTPDLFU 9)3MPOHQPMMJOH +40/1QPMMJOH
Problem • ॳظଓ·Ͱʹ͕͔͔࣌ؒΔՄೳੑ͕͋Δ
After, Upgrade style 9)3+40/1QPMMJOH
After, Upgrade style 9)3+40/1QPMMJOH XFCTPDLFU
After, Upgrade style 9)3+40/1QPMMJOH XFCTPDLFU 6QHSBEFͨ͠Β QBVTFঢ়ଶʹͳΔɻ
Engine.io • ॳظଓ·Ͱͷ࣌ؒΛվળ • ଞʹtransportsͷௐ͜ͷͰߦ͏ͷͰɺক དྷతʹ৽͍͠tranports(Google Chrome Socketͱ ͔pure TCP
socket)͕ग़͖ͯͨ࣌ͦΕରԠͰ͖ ΔΑ͏ʹͯ͠ɺ֦ுੑ͕ߴ͍ࣄΛ͍ࣔࠦͯ͠Δ
Binary Support
Binary Support • sound • video • image • etc…
͜Ε·ͰemitͰ͖ͳ͔ͬͨͷ͕Ͱ͖ΔΑ͏ʹ ͳͬͨɻ
DEMO http://goo.gl/bMnN9k
࣮ݱํ๏ // 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 }); }); });
࣮ݱํ๏ // 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
Scalability
Scalability 3FEJT OHJOY TPDLFUJP
Scalability 3FEJT OHJOY TPDLFUJP OHJOYͰTPDLFUJP αʔόͷৼΓ͚ઌΛܾΊΔ ৼΓ͚ઌ*1ΛݩʹܾΊΔ ֤ϓϩηεؒ3FEJTͰ 1VC4VCͤ͞Δɻ
࣮ݱํ๏(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 <io.yourhost.com>; 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; } }
࣮ݱํ๏(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 <io.yourhost.com>; 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Λ͏ɻ
࣮ݱํ๏(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, })); ! ! // جຊ͜Ε͚ͩͰϓϩηεؒͷΓͱΓ࣮ݱՄೳɻ
Integration with other process
Integration with other process 3FEJT OHJOY TPDLFUJP 1)13VCZ(P1ZUIPO/PEFKT
Integration with other process 3FEJT OHJOY TPDLFUJP 1)13VCZ(P1ZUIPO/PEFKT TPDLFUJPFNJUUFS
࣮ݱํ๏(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͞Μ…)
Other tips
Other Tips • Debug͘͢͠ͳͬͨ # खલʹDEBUG=*ͱ͔͚ͭΔͱstdoutʹϩά͕දࣔ͞ΕΔ $ DEBUG=* node app.js
! visionmedia࡞ͷ debug module ͍ͬͯΔɻ ! # ΫϥΠΞϯταΠυͷ߹localStorage.debug=“*”ͱ͔ΔͱϩΪϯά͞ΕΔ > localStorage.debug=“*” !
Other Tips • ΫϥΠΞϯτ͕CDN ͔Β৴͞ ΕΔΑ͏ʹͳͬͨ # ࠓ·Ͱ <script src="/socket.io/socket.io.js"></script>
! # CDN͔Β৴͞ΕΔɻ <script src="https://cdn.socket.io/socket.io-1.0.6.js"></script>
·ͱΊ • New Engine • Binary Support • Scalability •
Integration with others • Other Tips
Socket.io meetup in JAPAN • Guillermo Rauch comes here soon