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
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
Webの地図
yosuke_furukawa
PRO
6
4.5k
XHTMLが残したもの
yosuke_furukawa
PRO
2
800
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
400
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
310
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
Other Decks in Programming
See All in Programming
アクセシビリティから考える情報設計
high_g_engineer
0
370
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
tkikuc
3
550
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
reimaru
1
1.8k
SONY CISC-NEWS NWS-1750 + NWB-225 フレームバッファの NetBSD/news68k ドライバ実装 / OSC2026Hiroshima
tsutsui
0
110
iOSDC2026登壇資料.pdf
riofujimon
0
160
A2UI for Android: Safely Rendering AI-Generated UI with Jetpack Compose - DroidKaigi 2026
itsmedreamwalker
0
140
ゲームコントローラやキーボードのファームウェアをSwiftで書く
kishikawakatsumi
1
240
20260828_品質と開発生産性を両立させる、AI時代のE2Eテストの考え方
magicpod
0
210
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
rockname
0
100
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
stkk
0
120
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
tinykitten
0
190
新卒PdEのリアル
ryu1013
1
500
Featured
See All Featured
Marketing to machines
jonoalderson
1
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.9k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Building Adaptive Systems
keathley
44
3.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
50
10k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
For a Future-Friendly Web
brad_frost
183
10k
We Have a Design System, Now What?
morganepeng
55
8.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.4k
The Language of Interfaces
destraynor
162
27k
What's in a price? How to price your products and services
michaelherold
247
13k
The Curious Case for Waylosing
cassininazir
1
510
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