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
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
320
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
250
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
5.3k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.8k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
360
Removing Corepack
yosuke_furukawa
PRO
9
2k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
3.2k
Strip Types と Storage
yosuke_furukawa
PRO
4
520
Module Harmony について
yosuke_furukawa
PRO
4
1.9k
Other Decks in Programming
See All in Programming
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.8k
20260722_microCMSで考える、AI時代のコンテンツ運用設計
yosh1
0
400
PostgreSQL 18で考えるUUID主キー
kazuhiro1982
0
470
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
seike460
PRO
1
550
freeeにおけるEvalsの実践例の紹介
freee
PRO
0
110
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
4
1.6k
自動化したのに回らない テスト運用の壁―AI時代の品質責任と生産性
mfunaki
0
170
運用ダッシュボードの設計を誰も教えてくれないのだけどみなさんどうしてるんですか? - チームに監視するという文化を根付かせるための第一歩を踏みたい -
satoshi256kbyte
1
120
属人化した知識を、 AIが辿れる地図にする
pkshadeck
PRO
1
170
Flow は今どうなっているか
mizdra
PRO
0
530
OpenSpecのproposalにbrainstormingを持たせてみた
tigertora7571
1
230
5分で問診!Composer セキュリティ健康診断
codmoninc
0
1k
Featured
See All Featured
Un-Boring Meetings
codingconduct
0
390
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
460
Discover your Explorer Soul
emna__ayadi
2
1.3k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
460
Paper Plane (Part 1)
katiecoart
PRO
1
10k
RailsConf 2023
tenderlove
30
1.5k
Practical Orchestrator
shlominoach
191
12k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
520
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.4k
30 Presentation Tips
portentint
PRO
1
370
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
360
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