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
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
2k
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
ローカルLLMを使ってB2Bサービスを作っていての学び
yaotti
0
200
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
11
4.3k
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
nrslib
4
1.4k
その問い、本当に正しいですか?AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
minodriven
11
5.9k
Go1.27で導入されるジェネリクスメソッドでできること
mackee
0
140
Hunting Vulnerabilities in Symfony with LLMs
vinceamstoutz
0
550
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
manfredsteyer
PRO
0
160
さぁV100、メモリをお食べ・・・
nilpe
0
150
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
260
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
590
AI時代のUIはどこへ行く?その2!
yusukebe
22
7.4k
Claspは野良GASの夢をみるか
takter00
0
200
Featured
See All Featured
Heart Work Chapter 1 - Part 1
lfama
PRO
7
36k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
Building the Perfect Custom Keyboard
takai
2
800
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.4k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
163
24k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
Done Done
chrislema
186
16k
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