WebSocket Back

We use WebSocket to create a connection between Client and Server, to send or receive data.

Client (JavaScript)

1. new an object

/**
 * [WebSocket]
 * @param {[string]} url      [url to connect]
 * @param {[string]} protocol [protocol designed by servers, which will be a empty string by default]
 */
var webSocket = new WebSocket('http://www.example.com/socketserver' 'socket');

2. available methods

/**
 * [close description]
 * @param  {[number]} code   [status code, which is 1000 by default, meaning normal closing]
 * @param  {[string]} reason [the reason why]
 */
webSocket.close('300', 'Personal Reson');

webSocket.send('data');

A list of Close Status Code:

3. available attributes

A list of Ready State Code

4. Compatibility Problems

• Desktop

Notice that: After Gecko 6.0, constructor has been changed to MozWebSocket.

Notice that: extensions attribute is only supported by Gecko 8.0 or more.

• Mobile

Server (PHP)

Even though you're building a server, a client still has to start the WebSocket handshake process. So you must know how to interpret the client's request. The client will send a pretty standard HTTP request that looks like this (the HTTP version must be 1.1 or greater, and the method must be GET):

GET /socketserver HTTP/1.1
Host: www.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: socket
Sec-WebSocket-Version: 13

1. create a class

<?php
class WebSocket
{
    /** the client */
    private $master;

    /** sockets with different state */
    private $sockets = [];

    /** whether has a handShake */
    private $handShake = false;

    /** extract key from the request header */
    private function getKey($req)
    {
        $key = null;

        if (preg_match('/Sec-WebSocket-Key: (.*)\r\n/'), $req, $match) {
            $key = $match[1];
        }

        return $key;
    }

    /** encrypt key */
    private function encry($req)
    {
        $key = $this->getKey($req);
        $mask = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';

        return base64_encode(sha1($key, $mask, true));
    }

    /** under Version 13 */
    private function encryOld($key1, $key2, $l8b)
    {
        $key1_num = implode($key1_num[0]);
        $key2_num = implode($key2_num[0]);

        /** count space */
        preg_match_all('/([ ]+)/', $key1, $key1_spc);
        preg_match_all('/([ ]+)/', $key2, $key2_spc);

        if ($key1_spc === 0 || $key2_spc === 0) { 
            $this->log("Invalid key");
            return;
        }

        /** some math */
        $key1_sec = pack('N', $key1_num / $key1_spc);
        $key2_sec = pack('N', $key2_num / $key2_spc);

        return md5($key1_sec . $key2_sec . $l8b, 1);
    }

    /** hand shake */
    private function doHandShake($socket, $req)
    {
        $acceptKey = $this->encry($req);

        $upgrade = "HTTP/1.1 101 Switching Protocols\r\n" .
           "Upgrade: websocket\r\n" .
           "Connection: Upgrade\r\n" .
           "Sec-WebSocket-Accept: " . $acceptKey . "\r\n" .
           "\r\n";

        socket_write($socket, $upgrade.chr(0), strlen($upgrade.chr(0)));

        $this->handShake = true;
    }

    /** parse data frames */
    private function decode($buffer)
    {
        $len = $masks = $data = $decoded = null;
        $len = ord($buffer[1]) & 127;

        if ($len === 126)  {
            $masks = substr($buffer, 4, 4);
            $data = substr($buffer, 8);
        } else if ($len === 127)  {
            $masks = substr($buffer, 10, 4);
            $data = substr($buffer, 14);
        } else  {
            $masks = substr($buffer, 2, 4);
            $data = substr($buffer, 6);
        }

        for ($index = 0; $index < strlen($data); $index++) {
            $decoded .= $data[$index] ^ $masks[$index % 4];
        }

        return $decoded;
    }

    /** generate data frames */
    private function encode($msg)
    {
        $str = str_split($msg, 125);

        if (count($str) === 1) {
            return "\x81" . chr(strlen($str[0])) . $str[0];
        }

        $ns = '';

        foreach ($str as $o) {
            $ns .= "\x81" . chr(strlen($o)) . $o;
        }

        return $ns;
    }

    /** send messages to the client */
    private function send($client, $msg)
    {
        $msg = $this->encode($msg);
        socket_write($client, $msg, strlen($msg));
    }

    public function __construct($address, $port = 80)
    {
        $this->master = socket_create(AF_INET, SOCK_STREAM, SOL_TCP) || die('socket_create() failed');

        socket_set_option($this->master, SQL_SOCKET, SO_REUSEADR, 1) || die('socket_option() failed');

        socket_bind($this->master, $address, $port) || die('socket_bind() failed');

        socket_listen($this->master, 2) || die('socket_listen() failed');

        $this->sockets[] = $this->master;

        /** loop for listen */
        for (;;) {
            $write = null;
            $except = null;

            socket_select($this->sockets, $write, $except, null);

            foreach ($this->sockets as $socket) {
                if ($socket === $this->master) {
                    $client = socket_accept($this->master);

                    if ($client < 0) {
                        echo 'socket_accept() failed';
                        continue;
                    } else {
                        /** connect($client); */
                        array_push($this->sockets, $client);
                        echo 'connect client';
                    }
                } else {
                    $bytes = @socket_recv($socket, $buffer, 2048, 0);

                    if ($bytes == 0) {
                        return;
                    }

                    if (!$this->handshake) {
                        /** echo 'shakeHands'; */
                        $this->doHandShake($socket, $buffer);
                    } else {
                        /** echo 'send file'; */
                        $buffer = $this->decode($buffer);
                        /** process($socket, $buffer); */
                    }
                }
            }
        }
    }
}
?>

The format of a Received Data Frame

 0               1               2               3              
 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
+-+-+-+-+-------+-+-------------+-------------------------------+
|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|             |                               |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
 4               5               6               7              
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|     Extended payload length continued, if payload len == 127  |
+ - - - - - - - - - - - - - - - +-------------------------------+
 8               9               10              11             
+ - - - - - - - - - - - - - - - +-------------------------------+
|                               |Masking-key, if MASK set to 1  |
+-------------------------------+-------------------------------+
 12              13              14              15
+-------------------------------+-------------------------------+
| Masking-key (continued)       |          Payload Data         |
+-------------------------------- - - - - - - - - - - - - - - - +
:                     Payload Data continued ...                :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|                     Payload Data continued ...                |
+---------------------------------------------------------------+

2. new an object

<?php
$ws = new WebSocket('localhost');
?>