Real-time Applications using the Pusher Service
Description
Add messaging to your application with the Pusher service.
Discussion
Real-time applications are typically built using web sockets. Setting up web sockets can be tricky, especially if an application is behind a load balancer or running on Alpha Cloud. An alternative to setting up web sockets is a 3rd party service called Pusher. You can easily create real-time applications using the Pusher service. You can sign up for a free Pusher account at www.pusher.com.
Pusher applications follow a publish/subscribe model. Components can subscribe to channels. Server-side code can broadcast messages on channels. When a message is broadcast on a channel, all clients that are subscribed to that channel will receive the message.
Configuring a Component as a Pusher Application
To configure a UX component as a Pusher application, go the the Pusher Real-time Application section in the UX Builder Properties and check the Pusher application property.
This will enable the Pusher configuration property where you can specify your Pusher account credentials and other properties.
The Pusher Configuration dialog is shown below.
This dialog allows you to specify the properties listed below. These properties correspond to your Pusher account:
- App Id
- Key
- Secret
- Cluster
You must also specify the URL from where the Pusher JavaScript library will be loaded.
Finally, you can specify the channel subscriptions.
You can leave the Channels prompt blank and use Action Javascript to create an action that subscribes to a channel on-demand.
Action Javascript
Action Javascript allows you to perform certain Pusher service actions.
Pusher Service Actions
- Action
- Description
- Initialize Pusher Service
In most cases the Pusher service is initialized when the component is initially rendered. However, in the case of a Cordova application, or an Application Cache application, it is possible that a network connection is not available at the time the application is launched. If so, the Pusher server will not be initialized when the application is launched and it will have to be initialized later, when a network connection is available.
- Subscribe to a channel
Allows you to subscribe to messages that are broadcast on a particular channel. You can optionally specify an event name and a corresponding handler. By default, the client-side onPusherMessage event is fired when a Pusher message is received. However, you can specify custom Javascript code to call when a message is received. You can also specify a custom event name. For example, you might specify an event name of 'event1' in this action and you might specify the following Javascript handle this event:
alert('The following message was received: ' + data)- Un-subscribe from a channel
Allows you to stop listening for messages on a particular channel. You can stop listening to all events on the channel (by specifying <all> as the event name), or just a specified event name.
- Send a message
Sends a message on a specified channel, You can optionally specify an event name. If you leave the event name blank (or you specify <default>) , the default event name of __pusherEvent is used. If you subscribed to this channel using the Subscribe to a channel action, and you broadcast the message with an event name other than <default>, clients who are subscribed to the channel will handle the message using either the onPusherMessage client side event (if you did not specify a handler when you subscribed), or using the custom Javascript handler that you defined (when you subscribed).
Client-side Events
The onPusherMessage client-side event fires when a message is broadcast on a channel that the client is subscribed to. The code in your client-side event handler can reference these properties:
- Property
- Description
- e.message
The text of the message that was received
- e.channel
The channel that the message was broadcast on
- e.eventName
Will typically be __pusherEvent (unless a message is broadcast on the channel specifying a different event name)
Broadcasting Messages
Messages are broadcast using server-side code. The pusher_sendMessage() Xbasic function is used to broadcast messages. The syntax for the pusher_sendMessage() function is:
pusher_sendMessage(C appId ,C key ,C secret ,C cluster ,C channel ,C message [,C eventName [,C componentConfigJSON ]])
Where
- Argument
- Description
- appid
Pusher app id (from your Pusher account)
- key
Pusher key (from your Pusher account)
- secret
Pusher secret (from your Pusher account)
- cluster
Pusher cluster (from your Pusher account)
- channel
The name of the channel that you want to broadcast the message
- message
The text of the message to broadcast
- eventName
Optional. If not specified, the default event name of __pusherEvent is used.
- componentConfigJSON
Optional. Can be used if this function from an Xbasic function that handles an Ajax callback in a UX component that is configured as a Pusher application. Rather than specifying the appId, key, secret and cluster, you can specify blanks for each of these properties and then you can specify e.tmpl.pusherConfigJSON for the componentConfigJSON property.
Example: Send a message on the 'channel3' channel using Pusher settings that are stored in the component's Pusher configuration:
dim message as c = "This is a Pusher message sent at: " + now()
dim channel as c = "channel3"
dim configJSON as c = e.tmpl.pusherConfigJSON
pusher_sendMessage("","","","",channel,message,configJSON)Sample Components
When you create a new UX component you can select a Pusher Service template to get a quick start on building your Pusher application.
Videos
Real-time Messaging using the Pusher Service
Real-time applications are typically built using web sockets. However, it can be tricky to set up web-socket applications, especially if your application is behind a load balancer. The 3rd party Pusher service (www.pusher.com) makes it very easy to build real-time applications that allow you to broadcast messages on a 'channel'. All clients that subscribe to that channel will receive the message.
In this video, we show how the UX component can be configured for real-time applications using the Pusher service.
Real-time Location Reporting using the Pusher Service
In this video we show how you can build a real-time location reporting application. When a user 'reports' their location, a marker is automatically added to a map control showing the location of the user.
Pusher Service Webinar
In this Alpha Anywhere and Demo Q&A webcast, we demonstrate how to use the Pusher Service to send messages in a simple Alpha Anywhere application.