MAY 15, 2024 ---------------
## Xano Real-Time Functionality Tutorial

This tutorial provides an overview of the new real-time functionality in Xano using the Xano connector plug-in.

### Initialization

- Initialize real-time setup with the Xano connector to access real-time functionality.
- Options include using the HTML element, the toolbox plug-in, or building a custom plug-in as an extension.

### Setting Up Real-Time

1. Enable real-time in your Xano workspace settings.
2. Obtain the connection hash provided after enabling real-time.
3. Update the Xano plug-in in your Bubble app with the real-time hash.

### Components in the Xano Plug-In

- **Xano Real-Time Listener:** Listens for messages on specified channels.
- **Actions:**
 - Join real-time channel
 - Leave real-time channel
 - Send real-time message

### Working with Channels

- Users can join multiple channels to receive messages.
- Messages sent to a channel are surfaced and triggered in the browser.

### Usage Example

1. Add a Xano real-time listener element to the page.
2. Define channels and set up join/leave buttons.
3. Send messages using the send real-time message action.
4. Listen for messages on specific channels using the listener element.

### Real-Time Interaction

- Messages can be strings, JSON objects, or arrays.
- Real-time updates allow for collaboration, chats, notifications, and more.

### Testing Real-Time Functionality

- Test real-time functionality within the same browser across different tabs or windows.
- Ensure messages are received and sent across channels for seamless communication.

### Conclusion

- The Xano real-time functionality offers a simple yet powerful way to enable real-time communication in your Bubble app.
- Stay tuned for more detailed tutorials and resources from Xano for maximizing the potential of real-time functionality.

Link to Loom

https://www.loom.com/share/35a6797a6edc49e281fef10c177937ec


----------------------

Built with love ❤️

Eli
Twitter - @elibeachy
Forum - @eli

The Xano Connector uses the official Xano SDK and makes connecting your Bubble app to a Xano backend super simple by persisting user login states across browser tabs and windows and calling data from Xano directly from the browser for super fast data retrieval.

Visit the service url for detailed instructions on setting up this plugin.