Polycast
, (*1)
Laravel Websocket broadcasting polyfill using ajax and mysql. Laravel 5.1 or Later, (*2)
Installation
Require this package with composer:, (*3)
composer require leemason/polycast
After updating composer, add the ServiceProvider to the providers array in config/app.php, (*4)
Laravel 5.1:
LeeMason\Polycast\PolycastServiceProvider::class,
Add the following in your broadcasting connections array located in config/broadcasting.php, (*5)
'polycast' => [
'driver' => 'polycast',
'delete_old' => 2, //this deletes old events after 2 minutes, this can be changed to leave them in the db longer if required.
]
Copy the package assets to your public folder with the publish command:, (*6)
php artisan vendor:publish --tag=public --force
Migrate the packages database migrations (creates the polycast_events table):, (*7)
php artisan migrate --path=vendor/leemason/polycast/migrations
Usage
To Optionally set Polycast as your default broadcast events driver set polycast as the default in your config/broadcasting.php or BROADCAST_DRIVER=polycast in your .env file., (*8)
Once installed you create broadcastable events exactly the same as you do now (using the ShouldBroadcast trait), except you have a way to consume those events via browsers without the need for nodejs/redis or an external library to be installed/purchased., (*9)
This package doesn't aim to compete with libraries or solutions such as PRedis/SocketIO/Pusher.
But what it does do is provide a working solution for situations where you can't install nodejs and run a websocket server, or where the cost of services like Pusher aren't feasible., (*10)
The package utilizes vanilla javascript timeouts and ajax requests to "simulate" a realtime experience.
It does so by saving the broadcastable events in the database, via a setTimeout javascript ajax request, polls the packages receiver url and distrubutes the payloads via javascript callbacks., (*11)
To add to the simulation of realtime events each event found is parsed from the time its requested, and when the event was fired.
The difference in seconds is then used to delay the callbacks firing on that specific event., (*12)
What this does is prevent every event callback dumping into the dom when the ajax request has completed, but instead fires then in sequence as if it was loading live., (*13)
To the user the only real difference to websockets is that they will be a few seconds behind (depending on the polling option provided "default 5 seconds")., (*14)
I have tried to keep the javascript api similar to current socket solutions to reduce the learning curve., (*15)
Here's an example:, (*16)
Breaking down the example you can see we include the library:, (*17)
<script src="<?php echo url('vendor/polycast/polycast.min.js');?>"></script>
Create a Polycast object inside a self executing function (this can be done a few ways, and has a few options):, (*18)
We register any callbacks on the connection events:, (*19)
//register callbacks for connection events
poly.on('connect', function(obj){
console.log('connect event fired!');
console.log(obj);
});
poly.on('disconnect', function(obj){
console.log('disconnect event fired!');
console.log(obj);
});
We create channel objects by subscribing to the channel:, (*20)
//subscribe to channel(s)
var channel1 = poly.subscribe('channel1');
var channel2 = poly.subscribe('channel2');
And we register callbacks for specific events fired on those channels:, (*21)
//fire when event on channel 1 is received
channel1.on('Event1WasFired', function(data){
console.log(data);//data is a json decoded object of the events properties
});
Should something go wrong, or you need to disconnect you can at any point in time:, (*22)
//at any point you can disconnect
poly.disconnect();
//and when you disconnect, you can again at any point reconnect
poly.reconnect();
And that's it! (for now), (*23)
Bower Usage
The polycast package is registered on Bower using the name leemason-polycast and can be installed by running:, (*24)
bower install leemason-polycast
The package script can then be accessed from the bower_components/leemason-polycast/dist/js/polycast(.min).js path., (*25)
NPM Usage
The polycast package is registered on npm using the name leemason-polycast and can be installed by running:, (*26)
npm install leemason-polycast
The package script can then be accessed from the node_modules/leemason-polycast/dist/js/polycast(.min).js path., (*27)
Webpack Usage
The polycast package script files are generated using gulp/webpack, this offers advantages when developing your javascript via script loaders., (*28)
Usage is as follows:, (*29)
var Polycast = require('leemason-polycast');//this is npm usage, if using bower you will need to provide the full path
var poly = new Polycast({...});
The package is still in early development (but is stable) so expect new methods and features soon., (*30)
FAQ
Does this require jQuery?, (*31)
Nope, all vanilla js here including the ajax requests., (*32)
What if there is a problem during the request? Will my javascript enter a loop?, (*33)
Nope, the next setTimeout call wont happen until the previous one has been compeleted., (*34)
How does it work out what events get sent to who?, (*35)
This is done by the channel and event names, but the package also monitors times.
When the js service creates a connection the server sends back its current time.
This is stored in the js object and is sent/updated on subsequent requests creating a "events named ? on channel ? since ?" type database query., (*36)
Notes
The is my first real javascript heavy package, which is great as it gives me more opportunity to learn the language.
That being said if there are any improvements you could make please let me know or send a pull request., (*37)
The Future
- Add authorization options to channels
- Add helpers here and there for removing channel/event subscriptions
- Add wildcard event name listening
- Add ability to subscribe to events without supplying channel.
Wallogit.com
leemason