Web development & API design

L012: Real-time updates with Web Sockets

HTTP (REST)

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

Client must request something from 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

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

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

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

const ws = require('ws');

exports.connect = httpServer => {
    const wsServer = new ws.Server({
        server: httpServer,
    });

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

sockets.js

regular server file

Simple client: wscat

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

"cURL for WS"

Important functions

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

Not a lot!

(Demo: echo server)

socket.send('some message');

socket.on('message', message => { ... });

"Broadcast"

const clients = [];

wsServer.on('connection', socket => clients.push(socket));

const broadcast = message => {
    clients.forEach(client => client.send(message));
};

Maintain a list of connected clients
Iterate and send <message> to all

WebSockets and React

constructor() {
 super();

 this.state = {
  messages: []
 }
}

componentWillMount() {
 const url = 'ws://localhost:3456';
 const connection = new WebSocket(url);

 connection.onopen = () => console.log('WebSocket opened!');

 connection.onmessage = message => {
  const text = JSON.parse(message.text);
  this.setState({
   messages: [...this.state.messages, text],
  }};
}

...