Slide 1

Slide 1 text

Messaging Patterns + WebSockets

Slide 2

Slide 2 text

Me • I write full stack javascript • I work at Fractal • I like to code • I love open source

Slide 3

Slide 3 text

SOAP

Slide 4

Slide 4 text

Just kidding

Slide 5

Slide 5 text

Websocket? • Bidirectional • Always open • Less overhead than HTTP • Faster • Binary data • “Real-time web cloudscale 3.0”

Slide 6

Slide 6 text

Browser Support Use shims

Slide 7

Slide 7 text

Implementations • Socket.io • Engine.io • SockJS • ws

Slide 8

Slide 8 text

RPC • Remote Procedure Call • Request-Response cycle

Slide 9

Slide 9 text

Server Client Request Response Thinking…

Slide 10

Slide 10 text

RPC History • Used to be a big deal for cross-process communication • REST/HTTP knocked it out of the game • WebSockets are bringing it back

Slide 11

Slide 11 text

RPC – Use Cases • Scaling procedures horizontally • Replacement for REST over HTTP • Communicating between the client and server

Slide 12

Slide 12 text

RPC – Example Sequence • Client sends request for procedure “hello” with arguments [“world”] • Server receives and unpacks message • Server calls procedure “hello” with arguments [“world”] • Server sends response with procedure return value • Client handles response

Slide 13

Slide 13 text

RPC - Implementations • Vein • DNode • NowJS* • jsonrpc2

Slide 14

Slide 14 text

PubSub • Client (subscriber) subscribes to a topic • Client (publisher) publishes a message about the topic without knowledge of subscribers • Similar to EventEmitter

Slide 15

Slide 15 text

PubSub - Diagram

Slide 16

Slide 16 text

PubSub – Use Cases • Chat • Watching realtime changes – Whiteboards – File collaboration – Auction/trading systems

Slide 17

Slide 17 text

PubSub – Example Sequence • Subscribers (Client A and B) subscribe to channel “test” • Publisher (Client C) publishes message “hey” to channel “test” • Client A and B receive message “hey” on channel “test”

Slide 18

Slide 18 text

PubSub - Implementations • Pulsar • Socket.io • PubNub (PubSub as a service)

Slide 19

Slide 19 text

DSTM • Distributed Software Transactional Memory • Shared object between all clients • Changes to the shared object happen in “transactions” • Changes to the shared object are synchronized between all clients • Conflict resolution guarantees atomic transactions

Slide 20

Slide 20 text

DSTM - Diagram Server Object Conflict Resolution Object Conflict Resolution Clients Clients

Slide 21

Slide 21 text

DSTM – Use Cases • Data synchronization • Distributed/scalable systems • Financial transactions • Anything where accuracy is involved

Slide 22

Slide 22 text

DSTM – Example Sequence • Client A connects and receives object • Client B connects and receives object • Client B changes key “hello” to “world” • Client A changes key “hello” to “code camp” • Transaction from Client A is rejected due to conflict – synchronization is forced • Client A retries it’s transaction

Slide 23

Slide 23 text

DSTM – Implementations • Warlock • AtomizeJS

Slide 24

Slide 24 text

“Fat Client” - The Philosophy • Lower server requirements • Working offline • Higher server capacity • Scales easily • Uses less bandwidth

Slide 25

Slide 25 text

“Fat Client” – Example Sequence • Client A receives index.html which then loads all static resources • If Client A needs something from the server it is either work or message passing which can be done over WebSockets • After the initial grab of static files everything is done via WebSockets

Slide 26

Slide 26 text

Questions?

Slide 27

Slide 27 text

Sandbox

Slide 28

Slide 28 text

End • Follow me on Twitter @eschoff @wearefractal