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

V8

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

V8

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

Menu

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

Node.JS #5

By Gustav Jorlöv

Made with Slides.com

Node.JS #5

  • 734

More from Gustav Jorlöv