PHP WebSocket server

Introduction
Installation
- Requirements
- Installing component
Features
- Main features
- Customizing

Introduction

WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection. Therefore with WebSocket protocol, you can create webchats, real-time notifications or even online games.

This component provides you easy access to all features of this protocol. Even more - you can send data, not from client-size. You can send data from your PHP application to defined unix-socket (created within component)

Installation

Requirements

The recommended way to install WebSockets is through Composer. Here is requirements for this component:

Linux (cause of pcntl_fork)
Composer

Installing WebSockets

Next, run the Composer command to install the latest stable version of WebSockets:

After installing, you need to require Composer's autoloader:

Features

Main features

The WebSockets component has all defined features from the WebSocket protocol. And in addition, it also has communication socket (to send data from PHP or somewhere else) via unix-socket

Customizing

Simple implementation of WebSocket server:

<?php
use Generator;
use Ollyxar\LaravelAuth\FileAuth;
use Ollyxar\WebSockets\{
    Frame,
    Handler as BaseHandler,
    Dispatcher
};

class MyHandler extends BaseHandler
{
    /**
     * MyHandler constructor.
     * @param $server
     * @param $master
     */
    public function __construct($server, $master)
    {
        parent::__construct($server, $master);
        echo "I'm: #{$this->pid}\n";
    }

/**
     * @param $client
     * @return Generator
     */
    protected function onConnect($client): Generator
    {
        yield Dispatcher::async($this->broadcast(Frame::encode(json_encode([
            'type'    => 'system',
            'message' => 'User {' . (int)$client . '} Connected.'
        ]))));
    }

/**
     * @param $clientNumber
     * @return Generator
     */
    protected function onClose($clientNumber): Generator
    {
        yield Dispatcher::async($this->broadcast(Frame::encode(json_encode([
            'type'    => 'system',
            'message' => "User {$clientNumber} disconnected."
        ]))));
    }

/**
     * @param string $message
     * @param int $socketId
     * @return Generator
     */
    protected function onClientMessage(string $message, int $socketId): Generator
    {
        $message = json_decode($message);
        $userName = $message->name;
        $userMessage = $message->message;

$response = Frame::encode(json_encode([
            'type'    => 'usermsg',
            'name'    => $userName,
            'message' => $userMessage
        ]));

yield Dispatcher::async($this->broadcast($response));
    }
}

/**
 * Lets start our server
 */
(new WServer('0.0.0.0', 2083, 6, true))
    ->setCert()
    ->setPassPhrase()
    ->setHandler(MyHandler::class)
    ->run();

Communicate with server outside the wss protocol:

Client-side markup:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

html, body {
            height: 100%;
            font: 14px arial, sans-serif;
        }

.panel {
            width: 100%;
        }

.button {
            background: #5d8fde;
            border: none;
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            cursor: pointer;
            height: 40px;
        }

input[type=text] {
            width: 100%;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
        }

.chat-wrapper {
            width: 90%;
            height: 90%;
            padding: 20px;
            background: #fff;
            margin: 0 auto;
        }

.chat-wrapper .message-box {
            background: #fafafa;
            overflow: auto;
            border: 1px solid #999999;
            height: 80%;
        }

.system-msg {
            color: #ccc;
            font-style: italic;
        }

.user-name {
            font-weight: bold;
        }

.user-message {
            color: #5d8fde;
        }

#message {
            width: 80%;
            display: inline-block;
            float: left;
        }

#send-btn {
            width: 20%;
            display: inline-block;
            float: left;
        }
    </style>
</head>
<body>

var wsUri = "wss://tmp.dev:2083",
            ws = new WebSocket(wsUri);

ws.onopen = function () {
            var el = document.createElement('div');
            el.classList.add('system-msg');
            el.innerText = 'Connection established';
            document.getElementById('message-box').appendChild(el);
        };

document.getElementById('message').addEventListener('keydown', function (e) {
            if (e.keyCode === 13) {
                document.getElementById('send-btn').click();
            }
        });

document.getElementById('send-btn').addEventListener('click', function () {
            var mymessage = document.getElementById('message').value,
                myname = document.getElementById('name').value;

if (myname === '') {
                alert("Enter your Name please!");
                return;
            }
            if (mymessage === '') {
                alert("Enter Some message Please!");
                return;
            }
            document.getElementById("name").style.visibility = "hidden";

var objDiv = document.getElementById("message-box");
            objDiv.scrollTop = objDiv.scrollHeight;

var msg = {
                message: mymessage,
                name: myname
            };
            ws.send(JSON.stringify(msg));
        });

ws.onmessage = function (ev) {
            var msg = JSON.parse(ev.data),
                type = msg.type,
                umsg = msg.message,
                uname = msg.name;

var el = document.createElement('div');

if (type === 'usermsg') {
                el.innerHTML = '<span class="user-name">' + uname + '</span> : <span class="user-message">' + umsg + '</span>';
                document.getElementById('message-box').appendChild(el);
            }
            if (type === 'system') {
                el.classList.add('system-msg');
                el.innerText = umsg;
                document.getElementById('message-box').appendChild(el);
            }

document.getElementById('message').value = '';

var objDiv = document.getElementById('message-box');
            objDiv.scrollTop = objDiv.scrollHeight;
        };

ws.onerror = function (e) {
            var el = document.createElement('div');
            el.classList.add('system-error');
            el.innerText = 'Error Occurred - ' + e.data;
            document.getElementById('message-box').appendChild(el);
        };
        ws.onclose = function () {
            var el = document.createElement('div');
            el.classList.add('system-msg');
            el.innerText = 'Connection Closed';
            document.getElementById('message-box').appendChild(el);
        };
    });

</script>
</body>
</html>