Hello Realtime

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.