Real time chat? Websockets?

[grahamseamans]

Hello everyone,

Does anyone have advice on how to implement real-time chat functionality within a Hyperview project without a React Native chat component?

I’m considering the following approach:

1. Message Input: A simple form with a <text-field> to send new messages.
2. Loading Older Messages: Implementing an endless scroll mechanism via a "visible" trigger to load older messages.
3. Real-Time Updates: Establishing a WebSocket connection that would use the append action to dynamically update the chat with new messages. A new message notification or toast could be handled by a second WebSocket connection?
4. Message Display: Modify the List component so it can be inverted, i.e. starts at the bottom. Somehow implement goto links for auto-scrolling to new messages.

I think this would work if I figured out how to set up a WebSocket with an append action.
Any insights or experiences with setting up WebSocket connections or managing real-time data updates in Hyperview are very appreciated. Has anyone here worked on similar functionalities or could provide tips on how to handle dynamic data updates?

Thanks in advance for any suggestions or examples!

[adamstep]

Any insights or experiences with setting up WebSocket connections or managing real-time data updates in Hyperview are very appreciated. Has anyone here worked on similar functionalities or could provide tips on how to handle dynamic data updates?

Hi @grahamseamans , I don't have direct experience with WebSockets in Hyperview. However, a while ago I did try to add support for Server-Sent Events (SSE). Though it didn't make it to the released version (needs more thought), the prototyped approach worked quite well. You can see the design and the example XML in a branch here: master...adam/event-source

The relevant parts are:

• setting up an event-source to configure receiving the real-time events from the server
• passing the event source context down to child elements
• If child element has a behavior to listen for events, connect the SSE event source to trigger those behaviors

Essentially, this allows the server to send real-time events that trigger behaviors in the client. The client can reply to those events by requesting new content from the server (like you said, potentially appending new messages to your UI).

I think this approach can work with WebSockets as well. Even though it requires a second request to the server, in practice I found this cleaner than trying to send XML in realtime, so I suggest you start there. Let me know if you have any questions about the proposed approach! We are interested in real-time support in Hyperview (SSE and Websockets), so if you get something working we could consider adding it to the framework.