This document discusses Socket.io and websockets. It begins by explaining why Socket.io was created, as websockets were not supported by older browsers. It then details the different layers of communication in Socket.io, including the API layer where events are emitted and received, the packet layer which defines the format of messages, and the various underlying protocols like websockets that are used for actual transmission. It encourages further reading on how Socket.io and websockets work under the hood.

1. Hao-kang Den @_hden
Socket.io under the hood

3. Agenda
● Why socket.io?
● What’s socket.io? What’s websocket?
● Socket.io in detail

4. HTTP
serverclient
(1) request
(2) response
WTF?
X

5. Bi-directional Communication
serverclient
(1) signal
(2) acknowledgement
(3) signal
(4) acknowledgement

6. Why don’t we use websocket?
● Standardized by
○ RFC 6455
○ W3C
● IE9 says NO

7. Why socket.io?
+ native iOS & Android

8. Socket.io Communication Layers
API
packet
communication (ws, jsonp, etc.)

10. API
# client
socket.emit(‘foo’, param1, param2, ...)
socket.on ‘bar’, (param1, param2, ...) ->
console.log(‘yay got a bar!’)
# server
socket.on ‘foo’, (param1, param2, ...) ->
console.log(‘yay got a foo!’)
socket.emit(‘bar’, param1, param2, ...)

11. Packet
socket.emit(‘foo’, param1, param2, ...)
# socket.io v0.9.x
packet = {
type: ‘event’
id: ‘unique packet id’
name: ‘foo’
args: [param1, param2, ...]
}
# socket.io v1.0.x
packet = {
type: ‘event’
id: ‘unique packet id’
name: ‘foo’
data: [param1, param2, ...]
}
https://github.com/LearnBoost/socket.io-protocol

12. Communication Layer
# socket.io v0.9.x
packet = {
type: ‘event’
id: 1
name: ‘foo’
args: [param1, param2, ...]
}
# socket.io v0.9.x
5:1::{“name”:”foo”,”args”:[param1, param2, ...]}
https://github.com/LearnBoost/socket.io-spec

13. Further Reading
● http://davidwalsh.name/websocket
● test/spec https://github.com/LearnBoost/socket.io/blob/master/test/socket.io.js
● code https://github.com/LearnBoost/socket.io/blob/master/lib/socket.js
read!