Real Time

Outside The Box!

and...

But first

BREAKING NEWS!

Node.JS

io.js

Node.JS

io is a fork of node v0.12
io.js will be totally compatible with node.js
io is the 4th largest moon of jupiter. it also means 'input/output', which is what io.js is good at
the first release of io will be in January
bugs etc fixed in node will be cherry-picked as necessary into io

Communication

HTTP

GET / HTTP/1.1
Host: jorlov.se
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Accept-Encoding: gzip, deflate, sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4

payload...

376 characters

WebSockets

Full Duplex
Port 80
HTTP handshake
TCP data transfer

In a full duplex system, both parties can communicate to the other simultaneously.

HTTP Upgrade mechanism

GET ws://livelogger.herokuapp.com/socket.io/?EIO=3&transport=websocket&sid=bzwFSQCmey3XpKJzAAAE HTTP/1.1
Host: livelogger.herokuapp.com
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
Origin: http://livelogger.herokuapp.com
Sec-WebSocket-Version: 13
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Accept-Encoding: gzip, deflate, sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4
Cookie: io=bzwFSQCmey3XpKJzAAAE
Sec-WebSocket-Key: JBfrFQC/cg7qwI7tRxKJ+w==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-Websocket-Accept: CdKLlbG+OfTbhvMn6kD0sudUs3w=
Via: 1.1 vegur

Response

Request

...after that

2 bytes

HTTP

WebSockets

Problems?

Horizontal scaling
REST is really well defined on HTTP
Caching, routing, gzipping, multiplexing
Firewalls, proxies
Security?

http://socket.io/

socket.io enables real-time bidirectional event-based communication.
It works on every platform, browser or device, focusing equally on reliability and speed.

Server

Client

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(3000);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
});

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
  });
</script>

{
  "name": "examples",
  "version": "0.0.1",
  "dependencies": {
    "express": "^4.10.2",
    "socket.io": "^1.2.0"
  }
}

app.js

package.json

index.html

Server

Client

io.on('connection', function (socket) {

  socket.emit('news', { hello: 'world' });

  socket.broadcast.emit('hey', {
    'every': 'client', 
    'will': 'get this', 
    'except': 'me'
  });

  io.sockets.emit('news_to_all', {
    'hey': 'all'
  });

  socket.on('msg', function(data){
    console.log(data);
  });

});

var socket = io.connect('http://localhost');
socket.on('news', function (data) {
  console.log(data);
});

socket.emit('msg', {
  'some': 'kind', 
  'of': 'message'
});

app.js

index.html

Common communication

Server

Client

//... same as before

io.on('connection', function (socket) {
    socket.emit('news', { hello: 'world' });
});

var nsp = io.of('/gurra');
nsp.on('connection', function(socket){
    socket.on('news', function(data){
        console.log("news to gurra: ", data);
    });
});

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io('/gurra');
  socket.on('news', function (data) {
    console.log(data);
  });
  socket.emit('news', {'a': 'b'});

</script>

app.js

index.html

> news to gurra:  { a: 'b' }

run

Rooms

Chrome, Chromium, V8 WebKit, Blink

HTML

CSS

JavaScript

...more

Chrome

Blink

GUI

node-webkit

App runtime based on Chromium and Node.JS

http://github.com/rogerwang/node-webkit/wiki

HTML

CSS

JavaScript

...more

node-webkit

WebKit

GUI

Download

https://github.com/rogerwang/node-webkit

Run

{
  "name": "native-example",
  "main": "index.html",
  "window": {
    "width": 700,
    "height": 500
  }
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1 id="my_text"></h1>
    
    <script type="text/javascript">

    var fs = require('fs');

    fs.readFile('package.json', function(err, file){
        document.getElementById('my_text').innerHTML = file;
    });

    </script>
</body>
</html>

index.html

package.json

> ../node-webkit.app/Contents/MacOS/node-webkit .

Terminal

frame: true

toolbar: true

frame: true

toolbar: false

frame: false

toolbar: false

Window properties

var gui = require('nw.gui');

var menubar = new gui.Menu({
    type: "menubar"
});

//MAC ONLY
menubar.createMacBuiltin('Native-Example');

var menuItem = new gui.MenuItem({
    label: "File",
    submenu: new gui.Menu()
});

var newItem = new gui.MenuItem({
    label: "New",
    click: function(){
        alert('Hello again');
    }
});

menuItem.submenu.append(newItem)

menubar.append(menuItem);

gui.Window.get().menu = menubar;

Basics

npm

REPL

Web Servers
Desktop
CLI Tools

Template engines

Blocking io

Single thread

TCP chat

HTTP server

Shared state

Streams

Connect

Express JS

REST

Sessions

File upload

Heroku
(Git)

MongoDB

MongoLab

Cloudinary

Mocha
Chai

Nightmare

Grunt

socket.io

WebKit
V8

node-webkit