Real-time Applications using the Pusher Service
Add messaging to your application with the Pusher service.
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.
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
Finally, you can specify the channel subscriptions.
- 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
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
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:
The text of the message that was received
The channel that the message was broadcast on
Will typically be __pusherEvent (unless a message is broadcast on the channel specifying a different event name)
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 ]])
Pusher app id (from your Pusher account)
Pusher key (from your Pusher account)
Pusher secret (from your Pusher account)
Pusher cluster (from your Pusher account)
The name of the channel that you want to broadcast the message
The text of the message to broadcast
Optional. If not specified, the default event name of __pusherEvent is used.
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)
When you create a new UX component you can select a Pusher Service template to get a quick start on building your Pusher application.
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.