Integration

Realtime (Websockets) in Xano

Summary

Xano now offers real-time functionality powered by WebSockets, enabling you to maintain an always-open connection between your Xano backend and your front-end application. This unlocks new possibilities for building real-time features like chat rooms, live notifications, and more, without relying on third-party services.

Enabling Real-time in Xano

To get started with real-time functionality, follow these steps:

In your Xano dashboard, click the context menu in the top-right corner and select "Real-time Settings."
Enable real-time by clicking the toggle button. If this is your first time enabling real-time, it may take a minute or two to provision the necessary resources.
Once enabled, you'll see a "Connection Hash" displayed, which you'll need to connect to the real-time server from your front-end application.

Configuring Real-time Channels

Real-time channels are where messages or events are sent and received. To set up a channel:

In the "Real-time Settings," click the "Add Channel" button.
Provide a name for your channel (e.g., "chatroom").
(Optional) Enable "Nested Channels" to allow dynamic channel creation with a prefix (e.g., "chatroom/*" would allow channels like "chatroom/general," "chatroom/announcements," etc.).
Set permissions to control who can connect and send messages to the channel. You can enable anonymous connections or authenticated connections, and set granular permissions for each.
(Optional) Configure "Real-time Triggers" to execute function stacks based on specific events (more on this later).
Click "Save" to create the channel.

Connecting to Real-time Channels

To connect to a real-time channel from your front-end application, you'll need:

The "Connection Hash" from your real-time settings
Your API Group Base URL (found under "API" in your Xano dashboard)

With these values, you can use the Xano JavaScript SDK to establish a real-time connection:

javascript import { XanoClient } from '@xano.io/client'; const client = new XanoClient({ baseUrl: 'YOUR_API_GROUP_BASE_URL', realtimeConnectionHash: 'YOUR_CONNECTION_HASH' }); const channel = client.realtime.channel('YOUR_CHANNEL_NAME'); channel.on('message', (message) => { console.log('Received message:', message); }); channel.send('Hello from the front-end!');

This code snippet imports the Xano SDK, creates a client with your connection details, connects to the specified channel, listens for incoming messages, and sends a message to the channel.

Xano's documentation provides more details on using the JavaScript SDK and connecting to real-time channels from various front-end frameworks.

Sending and Receiving Real-time Messages

Once connected to a channel, you can send and receive messages in real-time. Xano's real-time functionality supports different message types and events, such as:

Text messages
JSON data (e.g., notifications with images, descriptions, titles)
Join and leave events (when clients connect or disconnect from a channel)
Presence updates (list of all connected clients)

To send a message, use the `channel.send()` method:

javascript channel.send('Hello, world!'); channel.send({ type: 'notification', title: 'New Product', image: 'https://example.com/product.jpg' });

To listen for incoming messages, use the `channel.on('message', callback)` method:

javascript channel.on('message', (message) => { console.log('Received message:', message); });

Using Real-time Triggers in Function Stacks

Xano's real-time functionality integrates with function stacks, allowing you to execute logic based on real-time events. You can use real-time triggers to log messages, perform filtering, or take any other desired action.

To set up a real-time trigger:

In your real-time channel settings, click "Add Channel Trigger."
Provide a name and description for the trigger.
Select the events that should trigger the function stack (e.g., messages, joins, or both).
Create a new function stack or select an existing one to execute when the trigger fires.

Within the function stack, you'll have access to various inputs related to the real-time event, such as the channel name, client information, and the message payload.

Conclusion

Xano's real-time functionality opens up a world of possibilities for building responsive, interactive applications without the need for third-party services or complex setup. By following the steps outlined in this guide, you can enable real-time, configure channels, connect from your front-end, and leverage real-time triggers in your function stacks.

As always, the Xano community (community.xano.com) and support team are available to assist with any questions or issues you may encounter while working with real-time functionality.

This transcript was AI generated to allow users to quickly answer technical questions about Xano.

Was this helpful?

I found it helpful

I need more support