Skip to content

Angular.js service to implement polling technique to fetch content from a server

License

Notifications You must be signed in to change notification settings

MasterDaveh/ngPoller

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ngPoller

Lightweight angular service to fetch updates from a server via the polling technique

Dependancies

You will only need angular installed, so make sure to run

npm install --save angular

Installation

Just run npm install --save ng-poller or git clone this repository, and include the ngPoller.js file in your project. Make sure to include ngPoller as a dependancy both in your angular module and in your controller.

How to use it

There are a couple of steps involved to have poller up and running, both on your frontend and your backend.
First, declare on your frontend the resources you will be watching for updates:

poller.listeners({
  'rowsUpdate': { url: `http://localhost:8001/row`, frequency: 1000 }
});

Then start listening for changes:

poller.listen('rowsUpdate', (data) => {
  console.log(data);
});

I'd suggest adding the .listeners() function inside the .run() method of your main module, but it's not a requirement, I just like to separate the configuration from the actual logic. What is required is that it is called before the .listen() function. The .listeners() function gets passed an object that holds the settings for every url to monitor. The keys of this object are identifiers which will be required by the .listen() function in order to identify the resource to watch. The frequency is how often you want to ask the server for changes, in millisecond. Defaults to 2000.

On your backend you will need to implement the formatForPoller() function as below

const formatForPoller = (hasNew, def, success) => {
  const ret = {
    state: 'old',
    data: def
  }

  if( hasNew ){
    ret.state = 'new';
    ret.data = success;
  }

  return ret;
}

This function needs to be called on the result you want to send the client, when changes are found. The implementation may vary slightly depending upon the language the backend is built on.
Its parameters are:

  • hasNew: whether or not there are new results
  • def: default result to send the client when no updates are found
  • success: result to send if updates are found

Don't forget to call this function before sending results to the client, as this is the only format supported by the poller service.
Two parameters are also available to the resource watched:

  • newOnly: true if it's the first time the resource is called
  • frequency: how many milliseconds separate one call from another

This is basically it, you will only need to determine if new results are found on every call, since "new result" it's a pretty generic concept, and you are the only one who can extablish what it means in your particular scenario.
You can find an example implementation in node.js, under the /example directory.
Add new lines to the .txt file to see the html page updating.

The service provides also a .detach() function to, yeah, you guessed it, detach a listener, passing in the event name, like so:

poller.detach('rowsUpdate');

Contact me

If you find bugs feel free to open an issue and/or send a pull request.
If you feel something is not clear, or the documentation needs to be updated send me a DM on Twitter or on Facebook

About

Angular.js service to implement polling technique to fetch content from a server

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published