BeamzerClient
This is a wrapper script and libarary which makes use of the JS polyfill for Server-Sent Events located at https://github.com/amvtek/EventSource/ and makes it easy to manage several connections to push notification or event sources. This library can also be used inside Web Workers (Dedicated or Shared workers)
File Size
- 15.2kb (Minified)
Usage
BeamzerClient - Example
It is important to note that whenever.
AngularJS UseCase Example
The idea here is to loosely couple communications to beamzer-client in an AngularJS app and
/* The idea here is to loosely couple the different controllers to the beamzer-client event stream from the server. Instead of having multiple observers for each controller scope listening for incoming streams, we have a single mediator object powered by $rootScope for this purpose. */ ;{ var module = angular; // assumes this module has been defined before module; }this thisangular; ;{ var module = angular; module; }this thisangular; ;{ var usebuffer = false app = angular; // we assume here that this ficticious app (TheAppServices) has a '#/feeds' route registered prior app; }this thisangular; /* controller action */ ;{ var app = angular; app; }this thisangular;
This is a simple SSE server script written in PHP
# Simple Implementation of event streams on the server - http://www.example.com/streamer.php sleep(5); // simulate real prod server activity e.g. database read operation $data = array('status' => 'OK'); $payload = "id: 5RWF637yh9983az021mn \n"; $payload .= "event: update \n"; $payload .= "data: " . json_encode($data) . " \n\n"; // the last line must end with 2 line feed characters header('Content-Type: text/event-stream'); echo $payload; exit;
This is another simple SSE server script written in Node.js (using ssenode)
// Simple Implementation of event streams on the server - http://www.example.com/stream const Source EventStream = ;const uuidv4 = ;const exp = ; const app = const source = uuidv4; app; app
Web Worker example
const worker = "./push-notifs.js"; worker; worker; ; // push-notifs.js file ; let globale = self beam = null; ;
Helper Hints
While you implement beamzer-client, there are afew things to watch out for.
-
If users create multiple tabs for your beamzer-enabled web app, they will invariably be creating multiple SSE (EventSource) connection to your server. So, you might want to consider disconnecting from the server, whenever a user minimizes the window where your web app is loaded or switches from the tab where your web app is loaded. Use the page-visiblity JavaScript API or
document.hasFocus()
. Thankfully, there's this JavaScript Library called Idle.js for watching the users' every move and it's easy to setup and use and i very much recommend it. -
Use
localStorage
"storage" events to update event-source data across all non-active tabs. Watch out for Edge though (you may have to use cookie polling as a fall back) as it lacks support for cross-tab "storage" events. I think it should be fixed by Edge 16+
Support
Available on all major browsers including IE8 - If you discover any bugs, please log an issue for it and i'll surely get look into it. If you wish to provide fallback support for web workers in Old IE (IE 8 / 9). Then you can check out this polyfill library
Credits
@isocroft.
Contributing
I welcome all contributions to make this software better. please send an email to communicate your thoughts on imporvements and features.