Updating UI
Required plan: EmergingThis is a basic example of how you can use a web sockets service like Pusher to trigger UI updates when a change happens in a user’s calendar.
The code samples assume a Rails app using the Cronofy and Pusher libraries.
1. Setup the web hook receiver #
Create a controller to receive the push notification for a user. We’re going to identify which user this relates to by passing a user_id
parameter as part of the URL.
When a change notification is received from Cronofy, we then trigger a calendar_changed
event on a Pusher Channel for the user_id
.
# config/routes.rb
post "/cronofy_webhooks/:user_id", to: 'cronofy_webhooks#create'
# app/controllers/cronofy_web_hooks
class CronofyWebhooksController < ApplicationController
def create
user_id = params[:user_id]
Pusher.trigger(user_id, "calendar_changed", {})
end
end
2. Open Cronofy Channel for the User #
When the user is authorized, we add a channel that is configured to receive change notifications for that user.
callback_url = cronofy_webhooks_url(user_id: user.id)
cronofy.create_channel(callback_url)
3. Listen for changes and reload the element #
In the client code, we subscribe to the Pusher Channel for that user and bind a function to the calendar_changed
event.
The function will call the .update()
method on the Cronofy UI Element variable to reflect the latest changes.
var availabilityViewer = CronofyElements.AvailabilityViewer({...});
var pusher = new Pusher('<%= Pusher.key %>', {
encrypted: true
});
var userId = '<%= user.id %>';
var channel = pusher.subscribe(userId);
channel.bind('calendar_changed', function(data) {
availabilityViewer.update();
});