Get started with a free 7-day trial on our Startup plan.

start trial

PushRadar's JavaScript Library

Welcome to PushRadar's documentation for our JavaScript client library. This article covers subscribing to channels, and receiving notifications published to those channels in realtime.

(JavaScript)PushRadar.js

PushRadar's JavaScript client library, pushradar.js should be included above the closing </body> tag of all your webpages:

<script src="//www.pushradar.com/pushradar.js"></script>

After you have linked to the above library, you can get started subscribing to channels.

You will need to use a server library to broadcast notifications. We have produced server libraries for PHP, Node.js, .NET, Ruby and Python. You can also use cURL to broadcast notifications.

(client)"Hello World!" example

The following example demonstrates subscribing to a channel called test-channel and receiving a message broadcast on it (for this example, the message "Hello World!"). Replace your-api-key with your actual PushRadar API key, which may be obtained from the API page of your dashboard.

  • JavaScript
<script src="//www.pushradar.com/pushradar.js"></script>
<script>
    var radar = new PushRadar("your-api-key");
    radar.subscribe.to("test-channel", function (notification) {
        alert(notification.message); // "Hello World!"
    });
</script>
(channels)Subscribing to channels

As you have seen from the code above, subscribing to channels is as easy as calling the subscribe to method on the PushRadar instance, passing in the channel name and a callback which receives a notification when one is broadcast on that channel.

Channel names cannot contain spaces, and by convention are lowercase and alphanumerical (a-z0-9), with dashes separating words, e.g. custom-channel-20. Optionally, you can specify events in channel names using a colon character, for instance messages:new

The example below shows how to subscribe to multiple channels:

  • JavaScript
<script src="//www.pushradar.com/pushradar.js"></script>
<script>
    var radar = new PushRadar("your-api-key");
    radar.subscribe.to("first-channel", function (notification) {
        alert(notification.message);
    });

    radar.subscribe.to("second-channel", function (item) {
        alert(item.height);
    });
</script>
(feature)Private and encrypted channels

PushRadar supports private channels, which allow you to ensure that certain channels are only subscribed to by certain users, and encrypted channels, whereby the data broadcast is protected by end-to-end encryption (PHP and Node.js only).

For both private and encrypted channels, you are required to register your authentication endpoint, which is a URL that PushRadar will call to authenticate users when they subscribe to a channel. You can register an authentication endpoint as follows:

  • JavaScript
var radar = new PushRadar("your-api-key");
radar.setAuthenticationEndpoint("http://localhost/channel-auth");

Note:   Private channels must start with the prefix "private-", and encrypted channels must start with the prefix "private-encrypted-"

(feature)Setting endpoint headers

You may need to set headers for authentication endpoint requests, for instance if your authentication endpoint requires a CSRF token. You can do this using the setHeaders method of the PushRadar object:

  • JavaScript
// ... var radar = new PushRadar(...)
radar.setHeaders({
    'X-CSRF-Token': "your-csrf-token"
});
(data)PushRadar and Local Storage

PushRadar's JavaScript client library relies on HTML5 Local Storage for core functionality. Items set in Local Storage are prefixed with "pushradar-ls-".

You should state in your website's privacy policy that you collect the following types of personal information from your visitors or users:

  • (a)their IP address, geographical location, browser type and version and other information.

This is done for the purpose of providing realtime functionality on your service.

If you need any assistance setting up, please do not hesitate to contact us.