Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
socket.io v1.0 introduction
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
230
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
5.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.7k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
340
Removing Corepack
yosuke_furukawa
PRO
9
1.9k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
3.1k
Strip Types と Storage
yosuke_furukawa
PRO
4
510
Module Harmony について
yosuke_furukawa
PRO
4
1.9k
LTのやり方
yosuke_furukawa
PRO
16
3k
Other Decks in Programming
See All in Programming
dRuby over BLE
makicamel
2
320
エージェンティックRAGにAWSで入門しよう!
har1101
8
1.2k
代数的データ型って何が嬉しいの? #frontend_phpcon_do
kajitack
8
3.2k
3Dシーンの圧縮
fadis
1
650
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
susisu
1
1.6k
SPMマルチモジュールで テストカバレッジを取得する技法
yosshi4486
0
140
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
ternbusty
1
140
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
230
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
kishida
2
110
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
d0riven
0
290
Webフレームワークの ベンチマークについて
yusukebe
0
130
キャリア迷子上等 ─ "ない道"は自分で作ればいい
16bitidol
3
1.6k
Featured
See All Featured
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
320
A designer walks into a library…
pauljervisheath
211
24k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.3k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
1
340
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
160
Chasing Engaging Ingredients in Design
codingconduct
0
210
Un-Boring Meetings
codingconduct
0
310
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
The Spectacular Lies of Maps
axbom
PRO
1
790
Writing Fast Ruby
sferik
630
63k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2k
Building AI with AI
inesmontani
PRO
1
1.1k
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