1

OMGDATA CHANNELSAND HOW TO USE THEM

ERIC ZHANG

2

BINARY TYPES IN JAVASCRIPT

Yes binary types exists:

ArrayBuffer

Blob

ArrayBufferView: Uint8Array, etc..

3

WHY IS THIS COOL

Binary support means we can do anything we want with data

4

BINARY TYPES IN JAVASCRIPT

Do these things with them:

URL.createObjectURL(blob)

XHR2

WebSocket

DataChannel

5

BACK TO DATACHANNEL

Video and audio is pretty cool

But I’m excited about DataChannel because

6

BACK TO DATACHANNEL

Arbitrary binary data between arbitrary people

That is a lot of power

No permissions. No flags.

7

BUT WAIT THERES MORE

Based on UDP – essential when transmission delay matters

Configurable with SCTP, for TCP like reliability if you want

8

WHAT I REALIZED

DataChannel fundamentally changes the web.

Data has always flowed between server and client.

DataChannel allows client to client flow

9

THE POSSIBILITIES

File transfer

Faster

No privacy issues

No bandwidth costs

10

THE POSSIBILITIES

Multiplayer games

Substantially higher performance because of lower UDP latency + binary data

11

THE POSSIBILITIES

High frequency events and messaging

Higher message rates possible with UDP based transport

12

PRIVACY

Imagine a decentralized Facebook

Data actually downloaded from your browser while you browse the web.

Seamless experience

13

DATACHANNELCHALLENGES

14

BROWSER COMPATIBILITY

Google Chrome - March 7th 2013

GOODGOODGOODBAD

No SCTP implementation = No binary, reliableNot coming until later in 27

15

BROWSER COMPATIBILITY

Firefox – March 7th 2013

Nightly 22.0a1 - Several spec issues being fixed RIGHT NOWBug 837919 - WebRTC: RTCPeerConnection constructor: FQDN not yet implemented (only IP-#s).

Bug 846110 - PeerConnection ondatachannel callback receives channel in Firefox, but in Chrome an event is passed in

Bug 837035 - Hook up DataChannel SDP to implementation (in particular port and options)

Aurora 21.01a2 - Flagless support

16

BROWSER COMPATIBILITY

Binary, reliable, and FF/Chrome interop in stable versions at most a few months away

17

PROBLEM: JSON

I now have a binary DataChannel between two browsers.

I want to send some binary data.

18

PROBLEM: JSON

JSON is an extremely bad choice for binary data. Base64 uses 37% more bandwidth and is slow to encode/decode.

You can never do this in JSON:

JSON.stringify({x: 1, y: binary });

19

PROBLEM: JSON

Our DataChannel supports binary, why use string serialization at all?

Binary serialization options:

MsgPack, Thrift, Avro, BSON, ProtoBufs, BERT, and many more

20

PROBLEM: JSON

MessagePack: Most JSON like. Very compact. No schema, not designed for typed languages like others.

Shitty for Javascript. JS has distinct string / byte array types unlike many other dynamic languages.

21

PROBLEM: JSON

Solution is simple. Add string type to MessagePack.

They hate this. https://github.com/msgpack/msgpack/issues/121

https://github.com/msgpack/msgpack/issues/128

Talk to me about this afterwards

22

PROBLEM: JSON

With a binary serialization format you can do this:

blob = pack({x: 1, y: binary });

unpack(blob)

-> {x:1, y: binary}

Caveat: JS makes serializing part of UTF8 to binary hard. JSON is much better.

23

PROBLEM: NAT TRAVERSAL

WebRTC takes care of NAT traversal for you

But not if they are behind symmetric NATs

~8% of connections according to Google Talk dev help pagehttps://code.google.com/p/libjingle/wiki/FAQ

24

PROBLEM: NAT TRAVERSAL

You must provide both a TURN server, a proxy for connections when things don’t work right.

No bandwidth , latency savings in this case.

25

PROBLEM:NOTIFYING CLIENTS

In order to establish connection, offer/answer and ICE candidates must be exchanged.

Solution:

You have to keep a WebSocket or XHR stream or similar open. Consider scaling issues.

26

WEBRTC IS SUPER HAPPENINGGUARANTEED

27

THIS ISNT LIKE THE IPHONE

Whether you like it or not, almost everyone is going to have WebRTC and DataChannels in their browser within a year.

28

THIS IS CRAZY

The model of the web can fundamentally change

29

THIS IS CRAZY

Someone is going to build the P2P file transfer app that is ridiculously easy

30

THIS IS CRAZY

Someone is going to build the networking library for MMOs in the browser

31

THIS IS CRAZY

Someone is going to build the BitTorrent of the web – just go on the damn page and start downloading movies (I mean Ubuntu ISOs). Crazy.

32

THIS IS CRAZY

Someone is going to build the Node.js of the browser.

File/network I/O, Sessions, persistent memory in HTML5 storage, database drivers, etc.

33

THIS IS CRAZY

Someone is going to replace Skype, and fragmented VOIP apps , and telephones in general with the one that just works in your browser.

34

THIS IS CRAZY

Someone is going to build the peer-to-peer CDN of the future.

http://peerkit.com

35

THIS IS CRAZY

These aren’t novel ideas.

These are real problems. People have been talking about them forever.

The technology just hasn’t existed until today.

36

THANKS FOR PAYING ATTENTION

Now go home and code.

Twitter: @reallyez

Github: ericz

I’m currently working on PeerJS and PeerKit. If you’re interested in this stuff, I’d love to talk to you.