Server-side equivalent to pushEvent/pushEventTo

hubertlepicki

I wonder if anyone figured out the way to have equivalent of pushEventTo (JavaScript interoperability — Phoenix LiveView v1.2.5) but executed from server side, without the need to go through the client/hook to send events to either parent components.

My use case is that I am building set of components in Surface UI and I am passing them target as a property, and the target is either being one of the parent componets or or nil in case of LiveViews that I want to notify when internal state of the component changes.

This is perfectly doable and works really well when the events are dispatched from the client-side, either with phx-target attribute or with pushEventTo/pushEvent when used from hook, but sometimes I’d like to process the event before sending it in some way in the component.

I can currently “solve” this by pushing the event back to the custom Hook I have on my component, and then dispatching it to destination with pushEventTo/pushEvent but this is less than ideal as there’s an extra round trip from browser to the component with the original event, then I pre-process the event in the component, and send it back to the Hook to be dispatched to the target.

I could also “solve” it by using send_update and send with combination of handle_info, handle_event and update functions depending on how the same event gets sent to the parent entity. But this is kinda ugly and redundant and entirely breaks my clean idea of passing down target to child components.

Any ideas if server-side pushEvent / pushEventTo is possible?

7 comments

/phoenix #liveview #surface

4 2381 7

2021-08-14 22:16:13 UTC

Showing Posts 1 to 7

Show Best Posts
Show All (oldest first)
Show All (newest first)

josevalim

Creator of Elixir

It is not possible right now but it has been a requested feature, so I assume it will land at some point. The most immediate question I have is what happens when the handle_event has a reply for a server initiated event, since I assume most would want the events to be non-blocking.

Post #1

hubertlepicki

If by “non blocking” you mean it should be have like GenServer.cast then yes. In fact, I imagine this could be implemented this way where the event is being cast to the socket (which we have on hand in the child components) and then handled similar way to events received from the client browser.

When it comes to handling the :reply tuple from such handle_event callback - in my scenario I am not using it anyway, so I could live without it. Again, with the surface/React like model you send the events up to one of the ancestors, and receive updates in props back, so I don’t expect a reply to arrive synchronously at all. I don’t know how that fits into other people use cases, however.

One idea would be that the :reply tuple actually sends back some event to the caller. I don’t need that, so this hasn’t been thought through on my end…

Post #2

trisolaran

I might be on the wrong track here, but I was under the impression that Surface already provides the tools to solve your problem. I’m referring to this page of the documentation. It looks like you can:

specify which events handler in the parent component should be called in response to events in the child component (Surface)
specify a different target than the parent component as the entity that will handle the events (Surface)

Doesn’t this address your use case?

Post #3

hubertlepicki

I think you still have to trigger the event from the HTML/JavaScript/Hook, however? I..e you can pass the event as prop down to child, but in order to trigger it it has to come from user interaction on the browser.

Post #4

trisolaran

True, the event has to come from the client.

Ok I think I got it.. your goal is to have an event coming from the server side (could be something broadcast via PubSub for example) trigger a handle_event callback on a target component as if the event was coming from the client. And I guess the problem with using send + handle_info is that you can only target the top-level view, and you need a separate mechanism ( send_update + update) to target a component.

Post #5

hubertlepicki

This is one reason, the other one is that my generalized event handling code now has to be split and different means of communication between components has to be implemented. Mostly for that reason, I am doing an extra trip to the custom hook from coponent, just to send the data back to parent component.

Post #6

trisolaran

It seems to me that many event handlers in the Phoenix/GenServer world are, by design, meant to handle only one specific kind of message. handle_event for LiveView events coming from the client, handle_in for client-side events coming from a channel, handle_cast for GenServer cast messages, and so on. Maybe the problem here is trying to shoehorn the idea of a “generalized event handler” into this architecture. Perhaps a better approach is to see all these event handlers as mere “adapters” for different event sources whose job is solely to convert the event and pass it on to a common event handling function.

On the other hand, I totally see how having to “send” a message to a component via send_update for a lack of a better way to do it server-side, is a stretch and points at something missing in the architecture.

Post #7

— All posts loaded —