@codeatbusiness neat. Although your example only covers interaction between clients. How do I make websocket server interact with a laravel application? How do I publish messages from a Controller? How do I turn a received message into an Event?
Hoa\WebSocket with Laravel 5 Projects - Push notifications
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 or to participate in this conversation.