Who are you?

(oral self-presentations)

Welcome!

Who am I?

Ivan Enderlin:

ivan.enderlin or hywan ••@ { hoa-project.net•,•• tagua.io liip.ch php.net••

Agenda

  1. Introduction
  2. Exercise 1: Chat
  3. Exercise 2: Bubble Game
  4. Conclusion

Introduction

Classical HTTP model

client server request response request response

WebSocket model

client server bidirectional full-duplex

Implementations

Based on TCP.

Standardized in RFC6455.

All browsers support it (IE 11+, Firefox 11+, Chrome 16+, Safari 7+…).

All major languages have an implementation of it.

Some HTTP servers support it (as proxy, nginx, Apache CXF…).

History

Handshake and challenge

client server HTTP request Sec-WebSocket-Key: Y2FzZV9kb1… HTTP response 101 Switching Protocols Upgrade: websocket Sec-WebSocket-Accept: BnK2jqfE7… WebSocket frames

Frame

           0                   1                   2                   3
       0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
      +-+-+-+-+-------+-+-------------+-------------------------------+
      |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
      |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
      |N|V|V|V|       |S|             |   (if payload len==126/127)   |
      | |1|2|3|       |K|             |                               |
      +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
      |     Extended payload length continued, if payload len == 127  |
      + - - - - - - - - - - - - - - - +-------------------------------+
      |                               |Masking-key, if MASK set to 1  |
      +-------------------------------+-------------------------------+
      | Masking-key (continued)       |          Payload Data         |
      +-------------------------------- - - - - - - - - - - - - - - - +
      :                     Payload Data continued ...                :
      + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
      |                     Payload Data continued ...                |
      +---------------------------------------------------------------+

5.2. Base Framing Protocol

Opcodes

TEXT_FRAME always in UTF-8

Close reasons

And a message explaining the reason.

Expected developer API

// Allocate a server.
$server = new Server($socket);

// Set listeners.
$server->on('message', …);
$server->on('close', …);
$server->on('error', …);

// Send messages.
$server->send(…);
$server->broadcast(…);
$server->broadcastIf(…);

// Close a connection.
$server->close(…);

// Start the server.
$server->run();

Hoa\Websocket

Presentation

Architecture

Client Server Connection Hoa\Socket\Connection\Handler send(string $message, Node $node) broadcast(string $message) broadcastIf(Closure $predicate, string $message) run()

Architecture

Server network Node 1 $server     ->getConnection()     ->setNodeName(ModelX::class); <ModelX> Node 2 Node 3 Node 4 Node 5

Smallest server

use Hoa\Event;
use Hoa\Socket;
use Hoa\Websocket;

$server = new Websocket\Server(
    new Socket\Server('ws://127.0.0.1:8080')
);
$server->on(
    'message',
    function (Event\Bucket $bucket) {
        echo '> ', $bucket->getData()['message'], "\n";
    }
);

$server->run();

Demo: SmallestServer.php + hoa websocket:client

Exercise 1: Chat

Goals

A chat application to see the basis:

  1. Send messages to every person on the channel,
  2. Notify when someone joins or leaves the channel,
  3. Identify a person with a pseudo.

We are interested only by the server-side as a first-step.

Then we will get fun with a game.

Workspace setup

Download the application:

$ git clone git@github.com:Hywan/ForumPHP2016.git
$ cd ForumPHP2016/Chat

Install dependencies:

$ composer install

Test it:

$ php ChatServer.php
$ open index.html // twice

Let's put the work tree into the “lesson mode”:

$ git checkout lesson-1

Developing the server

  1. Log what comes from the client,
  2. Close the client connection with an appropriated reason,
  3. Decide what to do with the data,
  4. If useful, compute it and “unclose” the client connection,
  5. Restart the process.

Exercise 2: Bubble Game

Goals

A bubble game to get hands dirty:

  1. Automatic team joining,
  2. Bubble type detection,
  3. Scores,
  4. Restore the state on connect,
  5. and maybe new features if we have time (on client and server)!

Workspace setup

Download the application (if not previously done):

$ git clone github.com:Hywan/ForumPHP2016.git
$ cd ForumPHP2016/Bubble

Install dependencies:

$ composer install

Test it:

$ php GameServer.php
$ open index.html

Let's put the work tree into the “lesson mode”:

$ git checkout lesson-2

Thanks! 😄︎

hoa-project.net & liip.ch
@hoaproject & @mnt & @liip