Hello Realtime

Allows site visitors to publish updates to specific channels in realtime.

Introduction Last updated: 14 Apr 2025

About

In this example, we use the wix-realtime APIs to publish site visitors' messages to channels.

APIs

How we built it

We added the following to our site:

Page Elements

Simple
  • A text input for the site visitor to write the message to publish.
  • A button to publish the message.
  • A text box to display the published messages. 
Channels
  • A text input for the site visitor to write the message to publish.
  • 4 buttons to publish the message. Each one corresponds to a specific channel.
  • 4 text boxes to display the published messages. Each one corresponds to a specific channel.
Permissions
  • A text input for the site visitor to write the message to publish.
  • 3 buttons to publish the message. Each one corresponds to a specific channel. Only site visitors with sufficient permissions can publish to each channel.
  • A text box to display the published messages. 
  • A login bar for site visitors to log in to the site.

Frontend Code

Simple

The code in this file enables site visitors to publish messages to a channel. The messages are displayed on the site. In this file, we:

  1. Defined a channel.
  2. Subscribed the site visitor to the channel, and defined that messages should be displayed in the text box when they are published.
  3. Added an onClick event handler to the Publish button that publishes the message entered by the site visitor to the channel.
Channels

The code in this file enables site visitors to publish messages to 1 of 4 channels. The messages are displayed on the site, grouped by channel. In this file, we:

  1. Defined 4 channels.
  2. Subscribed the site visitor to the channels, and defined that messages should be displayed in the text box corresponding to the specified channel when they are published.
  3. Added onClick event handlers to the Publish buttons that publishes the message entered by the site visitor to the specified channel.
Permissions

The code in this file enables site visitors to publish messages to 1 of 3 channels:

  • updatesChannel: All site visitors can publish to this channel.
  • updatesMembersChannel: Only site members can publish to this channel.
  • updatesAdminsChannel: Only site admins can publish to this channel.

The messages are displayed on the site, collated by channel.

In this file, we

  1. Defined 3 channels.
  2. Subscribed the site visitor to the channels they have permissions to publish to, and defined that messages should be displayed in the text box when they are published.

Added onClick event handlers to the Publish buttons that publishes the message entered by the site visitor to the channel. The messages aren't published if the site visitor isn't subscribed to the channel.

Backend Code

realtime.web.js

The code in this web module publishes messages to channels. We defined and exported the following method:

  • publishMessage: Publishes a specified message to a specified channel.
realtime-permissions.js

The code in this file uses a permissions router to define the permissions you want to grant to subscribers on channels. We defined permissions for the channels used on the Permissions page.

Code Snippets

realtime-permissions.js
Copy
realtime.web.js
Copy
Channels
Copy
Permissions
Copy
Simple
Copy

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.

Did this help?