F08: For real this time!

Real-time updates with Web Sockets

HTTP (REST)

http://prideparrot.com/Source-Codes/Images/REST.png

Klient må requeste noe fra server

Pre-standard

http://blogs.adobe.com/conversations/files/2010/06/flash-logo.png

Enter WebSockets

http://i.stack.imgur.com/ziR5h.png

WebSockets + Node.js

https://www.npmjs.com/package/ws

var app = require('express')();

var server = app.listen(3456, function () {
    console.log('Server listening on port ' + 3456);
});

require('./sockets').connect(server);

var ws = require('ws');

exports.connect = function (httpServer) {
    var wsServer = new ws.Server({server: httpServer});

    wsServer.on('connection', function (socket) {
        socket.send('Hello, sockets!');
    });
};

sockets.js

normal server file

Viktige funksjoner

wsServer.on('connection', function(socket) { ... });

Skulle gjerne sagt at det var mange

socket.send('some message');

socket.on('message', function(message) { ... });

"Broadcast"

var clients = [];

wsServer.on('connection', function (socket) {
    clients.push(socket);
});

var broadcast = function (message) {
    clients.forEach(function (client) {
        client.send(message);
    }); 
};

Enkel klient: wscat

https://www.npmjs.com/package/wscat

"cURL for WS"

WebSockets i Angular

app.run(function ($rootScope) {
    var url = 'ws://localhost:3456';
    var connection = new WebSocket(url);

    connection.onopen = function () {
        console.log('WebSocket opened!');
    };

    connection.onmessage = function (event) {
        var payload = JSON.parse(event.data);
        $rootScope.$broadcast('ws:' + payload.topic, payload.data);
    };
});

$scope.$on('ws:new_user', function(event, newUser) {
    $scope.$apply(function() {
        $scope.users.push(newUser);
    });
});