websockets chat

Serveur de discussion Laravel WebSocket

Exigences

• Unix (extension pcntl_fork)
• PHP7.1+
• Laravel5
• compositeur

Installation websockets chat

La méthode recommandée pour installer WebSockets consiste à utiliser Composer.

 # Install Composer
curl -sS https://getcomposer.org/installer | php

Ensuite, exécutez la commande Composer pour installer la dernière version stable de WebSockets :

php composer.phar require ollyxar/websockets-chat

Après avoir mis à jour Composer, ajoutez le fournisseur de services au tableau providers dans config/app.php

 Ollyxar  WSChat WSChatServiceProvider::class,

Configuration

Vous pouvez personnaliser les variables ci-dessous en ajoutant le fichier de configuration : websockets-chat.php dans le dossier de configuration :

paramètre	description	exemple
gestionnaire	Classe de gestionnaire (étend le travailleur)	AppMyHandler
hôte	Hôte (adresse IP)	0.0.0.0
port	Port	2083
nombre_travailleur	Nombre de processus fourchus	4
utiliser_ssl	Protocole utilisé	false
certificat	Certificat PEM	/etc/nginx/conf.d/wss.pem
phrase_de_passe	Phrase de passe du certificat PEM	secret$#%

Classe de gestionnaire étendu

Ceci est un exemple d'utilisation du gestionnaire avec l'authentification de l'utilisateur. Si vous disposez d'une configuration et d'un stockage de session de fichiers par défaut, vous pouvez utiliser cet exemple.

Vous devez d’abord installer auth-helper :

php composer.phar require ollyxar/laravel-auth

Créez ensuite votre Handler.php :

 namespace App ;

use Generator ;
use Ollyxar  LaravelAuth  FileAuth ;
// or you can use RedisAuth if you're storing sessions in the Redis-server:
// use OllyxarLaravelAuthRedisAuth;
use Ollyxar  WebSockets {
   Frame ,
   Handler as Worker ,
   Dispatcher
};

/**
 * Class Handler
 * @package App
 */
class Handler extends Worker
{
    /**
     * Connected users
     *
     * @var array
     */
    protected $ users = [];

    /**
     * Append connected user
     *
     * @param array $headers
     * @param $socket
     * @return bool
     */
    private function fillUser ( array $ headers , $ socket ): bool
    {
        if ( $ userId = FileAuth:: getUserIdByHeaders ( $ headers )) {
            // allow only one connection for worker per user
            if (! in_array ( $ userId , $ this -> users )) {
                $ this -> users [( int ) $ socket ] = $ userId ;
                return true ;
            }
        }

        return false ;
    }

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

    /**
     * @param array $headers
     * @param $socket
     * @return bool
     */
    protected function validateClient ( array $ headers , $ socket ): bool
    {
        return $ this -> fillUser ( $ headers , $ socket );
    }

    /**
     * @param $clientNumber
     * @return Generator
     */
    protected function onClose ( $ clientNumber ): Generator
    {
        $ user = User:: where ( ' id ' , ( int )@ $ this -> users [ $ clientNumber ])-> first ();
        $ userName = data_get ( $ user , ' name ' , ' [GUEST] ' );

        yield Dispatcher:: async ( $ this -> broadcast (Frame:: encode ( json_encode ([
            ' type '    => ' system ' ,
            ' message ' => $ userName . " disconnected. "
        ]))));

        unset( $ this -> users [ $ clientNumber ]);
        yield ;
    }

    /**
     * @param string $message
     * @param int $socketId
     * @return Generator
     */
    protected function onClientMessage ( string $ message , int $ socketId ): Generator
    {
        $ message = json_decode ( $ message );
        $ userName = User:: where ( ' id ' , ( int ) $ this -> users [ $ socketId ])-> first ()-> name ;
        $ userMessage = $ message -> message ;

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

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

Ajoutez ensuite un balisage au début :

 < div class =" chat-wrapper " >
    < div class =" message-box " id =" message-box " > </ div >
    < div class =" panel " >
        < input type =" text " name =" message " id =" message " placeholder =" Message " />
        < button id =" send-btn " class =" button " > Send </ button >
    </ div >
</ div >

Et le code JS :

 var wsUri = "ws://laravel5.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 ;

    if ( mymessage === '' ) {
        alert ( "Enter Some message Please!" ) ;
        return ;
    }

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

    var msg = {
        message : mymessage
    } ;
    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 ) ;
} ;

Démarrage du serveur WebSocket

php artisan websockets-chat:run

Envoi d'un message direct au serveur

php artisan websockets-chat:send " Hello from system! "