xingfucoder
4 years ago
54
16
Tips

Hoa\WebSocket with Laravel 5 Projects - Push notifications

Posted 4 years ago by xingfucoder

Using the Hoa\Websocket Package within Laravel 5 Projects for Server-Client push notifications

Installation

To use the Hoa\Websocket package with your Laravel 5 Projects you need to add that package to the Composer.json file or use the composer require command.

This is the composer require sentence:

{
    "require": {
        "hoa/websocket": "~2.0"
    }
}

For more information go to the next link: HoaProject\WebSocket Github Repository

The next step is create the Server file.

You may use a custom root file within your app folder as follow:

app\server.php

The content of this file will be:

<?php
/*Create a server variable with the link to the tcp IP and custom port you need to
specify the Homestead IP if you are using homestead or, for local environment using
WAMP, MAMP, ... use 127.0.0..1*/

$server = new Hoa\Websocket\Server(
    new Hoa\Socket\Server('tcp://192.168.10.10:8889')
);

//Manages the message event to get send data for each client using the broadcast method
$server->on('message', function ( Hoa\Core\Event\Bucket $bucket ) {
    $data = $bucket->getData();
    echo 'message: ', $data['message'], "\n";
    $bucket->getSource()->broadcast($data['message']);
    return;
});
//Execute the server
$server->run();

You should execute this file within your Server Host to begin the process. Then you need to manage the Client code.

Create a custom view, for instance you may create the following file:

resources\views\client.blade.php

You could put the next code within this file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laravel 5 | WebSockets</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
    <div class="row ">
        <div class="col-xs-12">
            <br/>
            <input type="text" id="input" placeholder="Messageā€¦"/>
            <hr/>
            <pre id="messages">
            </pre>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
    //The homestead or local host server (don't forget the ws prefix)
    var host = 'ws://192.168.10.10:8889';
    var socket = null;
    var input = document.getElementById('input');
    var messages = document.getElementById('messages');
    var print = function (message) {
        var samp = document.createElement('samp');
        samp.innerHTML = '\n' + message + '\n';
        messages.appendChild(samp);
        return;
    };

    //Manges the keyup event
    input.addEventListener('keyup', function (evt) {
        if (13 === evt.keyCode) {
            var msg = input.value;
            if (!msg)
                return;
            try {
                //Send the message to the socket
                socket.send(msg);
                input.value = '';
                input.focus();
            } catch (e) {
                console.log(e);
            }
                print(msg);
            return;
        }
    });

    try {
        socket = new WebSocket(host);
        
        //Manages the open event within your client code
        socket.onopen = function () {
            print('Connection Opened');
            input.focus();
            return;
        };
        //Manages the message event within your client code
        socket.onmessage = function (msg) {
            print(msg.data);
            return;
        };
        //Manages the close event within your client code
        socket.onclose = function () {
            print('Connection Closed');
            return;
        };
    } catch (e) {
        console.log(e);
    }
</script>
</body>
</html>

Put the Server to work

The next step is start the server. You need to go to the CLI and use the following command:

    //If your server file is located within the root folder
    php app\server.php

Then open two clients (before this step you need to create the custom route to load the previous view), for instance, a Google Chrome tab, and a Mozilla Firefox tab with your custom domain server. You may view within each client windows the connection opened message. Next tip any message, and you will view those within each client and the CLI Server windows.

If you exit from your server you will view the Connection Closed message within ech of the client windows.

More info

If you want to view more info about that package, go to the next link:

Hoa\WebSocket Project Documentation

Hope it helps you.

Please sign in or create an account to participate in this conversation.