WebRTC Data Channels

An brief introduction with RTC.io

Glen Arrowsmith

@garrows

glen.arrowsmith@gmail.com

Bam

A two player game that determines who can press the spacebar the fastest

garrows.com/bam

https://github.com/garrows/bam

The Bad Old Days

Completely Static

The Bad Old Days

Set Timeout

setTimeout(function() {
   $.get('/api/status', function(data) {
      ...
   });
}, 5000);

A New Hope

WebSockets

Socket.IO

Nice wrapper and polyfil for WebSockets

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get(
  '/', 
  function(req, res){
    res.sendfile('index.html');
  }
);
io.on(
  'connection', 
  function(socket){
    socket.on(
      'chat message', 
      function(msg){
        io.emit('chat message', msg);
      }
    );
  }
);
http.listen(3000, function(){
  console.log('listening on *:3000');
});

...
<ul id="messages"></ul>
<form action="">
   <input id="m" autocomplete="off" />
   <button>Send</button>
</form>
<script src="/socket.io/socket.io.js" />
<script src="://code.jquery.com/jquery-1.11.1.js" />

<script>
   var socket = io();

   $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
   });

   socket.on('chat message', function(msg){
     $('#messages').append($('<li>').text(msg));
   });
</script>
...

Server

Browser