What is Realtime?
How does Realtime work in Xano?
When your client (user or application) connects to a Realtime channel in your backend, it will start listening for new messages. A **channel **is just a way to segregate messages into ‘sections’; similar to having separate chat threads with different people, each thread would have its own channel.A message can be anything you want, from plain text to complex JSON. To keep things easy to understand, the instructions below will be using plain text messages.


How do I use Realtime?
Enabling Realtime
If you haven’t done so already, you’ll need to enable Realtime at the workspace level. From your workspace dashboard, open the menu in the top-right corner, choose Realtime Settings, change the dropdown to Yes, and then click Save.
If this is the first workspace to have Realtime enabled in your instance (even if you’ve had it enabled and then disabled it previously), Xano will need to provision the additional resources required for Realtime to function. This should only take a few minutes to complete, and you can check progress from the Realtime Settings panel.
Implementation using the Xano SDK
We’ve made using Xano Realtime as easy as possible to build into your application by integrating it into our Xano SDK.Access the Xano SDK here.
- An instance base URL, which you can find anywhere when logged into Xano.
- The realtime connection hash, which is located in your Realtime Settings panel.
If you are already initializing the SDK for other purposes, just add the
realtimeConnectionHash
parameter. You do not need to specify instanceBaseUrl if you are providing an API group base URL.Code Explanation
Code Explanation
Code Explanation
Code Explanation
const marvelChannel
For the value, we are referencing this.xanoClient
. ‘this’ refers to the global object. Without getting into too much detail, the global object can just be thought of as the entirety of your Javascript code. channel("marvel-chat-room");
just defines the channel name.Code Explanation
Code Explanation
marvelChannel
, so now we can issue commands to it. In this case, the ‘on
’ command just tells the SDK “I’m ready to listen for messages; whenever there is a message, run the code inside the {}
brackets.Switch
starts a decision-making process (kind of like our If/Then statements) based on the contents of the command received.switch
command “When you see [Realtime] Message
sent to you, call a function called messageReceived
with the message contents from message.payload
and then stop (break
). Don’t worry, we haven’t gone over messageReceived yet, so it’s okay if that seems strange. This would be the function that your frontend uses to actually display the message, so it will vary based on your specific application.switch
command “If the message is anything else but [Realtime] Message
, do this instead. In this case, ‘this’ is just logging the message so we can review it in our browser’s Developer Console.Code Explanation
Code Explanation
Be aware that the demo code below assumes you have a channel called marvel-chat-room defined in your channel permissions. If you’d like to use a different channel name, find this line:and update “marvel-chat-room” to your channel name.
- Click here to open the demo in a new tab.
- Fill in your API group base URL and Connection Hash.
- Click ‘Submit’.
Xano Auth + Realtime
To authenticate your users with channels that require authentication, you will use yourxanoClient
as usual. The client will automatically authenticate if the realtimeAuthToken
setting is set.
After your xanoClient
is defined, perform an API request to your login or signup endpoint and store the returned auth token using the setRealtimeAuthToken command.
You can generate separate auth tokens when your users log in, sign up, or otherwise are ready to initiate a connection to Realtime.
Previously, this was accomplished with setAuthToken, and will continue to function as such until July 1, 2024. On that date, it will become required to use setRealtimeAuthToken instead to authenticate a realtime connection. If you don’t need separate tokens, you can just supply the same auth token for both values.
Message Types
The realtime connection has several different message types that can be sent, and you can modify your custom code to react differently to each message type.Status | Meaning |
---|---|
connection_status | Informs the status of the connection to your Realtime server. This appears in your console log when initiating a connection to a channel. |
error | An error has occurred connecting to or interacting with Realtime. Check your console log for more details. |
event | An event is anything beyond a standard realtime message, and can be used to enable dynamic handling of different data being sent through Realtime |
join | Sent when joining a channel |
leave | Sent when leaving a channel |
message | A new message has been received |
presence_full | A full list of all clients connected to the channel |
presence_update | Sent when a new client joins or leaves the channel |
Message History
When setting up your Realtime channels, you have the option of storing message history as well.Message history for your channels is backed by Redis cache, and it’s important to consider how else you are using caching, if at all, when determining how much data to hold on to.
Common Issues & FAQ
I can't send or receive messages using Realtime
I can't send or receive messages using Realtime
Check your browser’s Javascript console for the following output: 

- If you do not see this message at all, there is a problem with your implementation of the SDK or the realtime integration you are using. Check your code and reference our documentation on connecting with the SDK to find out more, or reach out to your frontend support for more information if it uses a direct integration.
- If you see this message, but it does not say ‘connected’, check your instance base URL, api group base URL, or connection hash to ensure it is accurate.
- If you see this message and it says connected, but you aren’t seeing your messages send or receive, make sure your frontend is handling rendering your messages properly. Hint: Add a console.log(message) to ensure that the messages are working properly before trying to address the frontend.
When my users refresh their app or page, previous messages have disappeared
When my users refresh their app or page, previous messages have disappeared
Realtime does not keep message history, and would require a custom implementation such as one that utilizes our Realtime Event function or Realtime Triggers.
What is the performance impact of Realtime on the rest of my backend?
What is the performance impact of Realtime on the rest of my backend?
Realtime uses dedicated resources for connections and message handling. This means that ultimately, realtime usage would not impact any other area of your backend such as APIs and background tasks.However, it is important to note the following:
- A mass of connections to Realtime beyond what your instance can handle can cause issues.
- Realtime resources scale with each plan upgrade just like other resources. Depending on your Realtime needs, it may necessitate an upgrade to your Xano subscription to utilize effectively.
- Being strict about what data you use Realtime to deliver vs your APIs
- Timing out connections after a certain period of inactivity by sending a Leave event from your front-end