Example Description
The Realtime API is used to send messages in real time over channels that site visitors subscribe to. In this example, we demonstrate how to send messages over a single channel, over multiple channels and resources, and with permissions checks.
The SIMPLE page demonstrates how to send and receive messages across a single channel.
The CHANNELS page demonstrates how to send and receive messages across multiple channels and channel resources. Take note of what happens when you publish messages on the various channels and resources.
The PERMISSIONS page demonstrates how to check permissions across multiple channels and channel resources. Take note of what happens when you publish messages on the various channels and resources while visiting the site with different user roles. Also note that this scenario is only meant to demonstrate the permissions capabilities of subscribing to channels and channel resources. We have not included any permissions checks on who can call the backend function used to publish messages in this scenario.
When testing the various scenarios in this example, we suggest having more than one instance of the site running in multiple browser windows to see how messages are sent to multiple site visitors. For the scenarios that demonstrate permissions checks, we suggest you use different roles (visitor, member, and admin) to see how the permissions change which channels and resources site visitors can subscribe to.
How We Built It
Simple Page Elements
On the SIMPLE page, we added a text input and a button for creating and publishing messages. We also added a text box for displaying received messages.
Simple Page Code
On the SIMPLE page, we added code to subscribe to the `hello-world` channel. This means the page will receive all messages published on the channel. When subscribing, we also define how we want to handle messages that are received. In this case, we add the received payload to the text in the text box.
We also added code to publish messages when the publish button is clicked. This code calls a backend function in the realtime.jsw file to publish the message since publishing can only be done from the backend.
Channels Page Elements
On the CHANNELS page, we scaled up the UI from the SIMPLE page so that we can send and receive messages across multiple channels and channel resources. We added an additional set of publish buttons to select which channel and resource to publish on. We also added additional text boxes for receiving messages across the various channels and channel resources.
Channels Page Code
On the CHANNELS page, we added code to subscribe to 4 different channel and resource combinations. All of these subscriptions use the same handler function to handle messages received on these channels and resources. The handler function checks which channel and resource the message was published on and adds it to the text in the corresponding text box.
We also added code to publish messages on the specified channel and resource when the publish buttons are clicked. This code calls the same backend function in the realtime.jsw file as the SIMPLE page did to publish the messages.
Permissions Page Elements
On the PERMISSIONS page, we added elements similar to the ones we added on the SIMPLE and CHANNELS pages to publish messages and display received messages. We also added a login bar so you can test the page using users with different roles.
Permissions Page Code
On the PERMISSIONS page, we added code similar to the code on the CHANNELS page to subscribe to a bunch of channels and channel resources and to handle messages received on those channels and resources. The difference here is that some of these channels have permissions set in the backend realtime-permissions.js file.
realtime-permissions.js
We use this file to define permissions for our channels and channel resources using a permissions router.
We start by adding the default permission for channels to be readable for all visitors.
Then we add permissions for the `updates` channel and `members` resource. We only allow site members to subscribe to this channel.
Similarly, we add permissions for the `updates` channel and `admins` resource. We only allow site admins to subscribe to this channel.
Finally, we use the router to check for the proper permissions in the `realtime_check_permissions` function. This function will be called each time a visitor tries subscribing to a channel.
Related Examples
Did this help?
|
Thanks for your feedback!

Add to Cart Gallery
Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements
Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements
Hide and show elements in response to user interactions

BEGGINER