I’m currently working on a project to make realtime communication between my web-application (written in Phoenix Liveview) and my mobile-application (written in Flutter) work. However I struggle to set up a new channel since the channels for the liveview socket is set up in the packages files.
Does anybody know if I can just setup another socket (like in a project without the --live tag) for the necessary channel (and maybe more in the future) or does it lead to conflicts between the sockets/channels?
I also know that typically PubSub is used to enable realtime communication within a Liveview-App.
However I’m not sure if it’s possible to subscribe to a topic from a Flutter-App since the existing libraries I found so far only support a connection to a phoenix channel.
My approach would be to create a Phoenix channel in the backend for the mobile app, and then send notifications to this channel from wherever in your code you need to sync web with mobile.
defmodule Tasks.Todos.Api.Broadcast.Sender do
require Logger
def broadcast_change({:ok, data} = result, %Tasks.Todos.Types.Event{} = event) do
Logger.warn("broadcast_change/4 Broadcast a result for: %{event: #{event.type}, action: #{event.action}, origin: #{event.origin}}")
Enum.each(
event.broadcast_topics,
# You may want to adjust the broadcast as per your needs
fn topic -> Phoenix.PubSub.broadcast_from(Tasks.PubSub, self(), topic, {event, data}) end
)
result
end
def broadcast_change(error, %Tasks.Todos.Types.Event{} = _event), do: error
end
The event type:
defmodule Tasks.Todos.Types.Event do
use Domo
typedstruct do
field :type, :todo | :backlog
field :target, :todo | :backlog | :all
field :action, :add | :update | :move | :duplicate | :delete
field :origin, atom()
field :broadcast_topics, list(), default: []
field :context, map(), default: %{}
end
end
Then you can send notifications from anywhere in your code:
result
|> Tasks.Todos.Api.Broadcast.Sender.broadcast_change(event) # event: Tasks.Todos.Types.Event.new!
That you need to then handle in your Channel. An example of a possible channel in your backend would look like this:
To create the socket for it you just need to add some code like:
From your mobile app you can then connect and join to the channel, like:
This Phoenix channel can also send notifications to the LiveView process in order to update the web with changes from the mobile app.
NOTE: All the code examples reference different projects, ones are demos at work, others are my personall ones, thus you need to adapt them to your needs, but it should give you a starting point.
I now have a much clearer idea on how to get things running.
One last question about this topic:
Would you open a connection to the other socket directly from app.js as it is done for the livesocket or would you prefer a seperate js file?
I think you missed the point I explained to keep the web and the mobile app in sync.
You don’t need to open another socket connection from the web app in order to keep mobile and web in sync.
What you need to do is to have a Phoenix Channel for the mobile app to connect too and then have the LiveView sending notifications to this Phoenix Channel to tell that something changed in the web side, and you can also send notifications from the Phoenix Channel to the LiveView to inform it that something have changed in the mobile side.
Just to be clear, all this notifications between LiveView and the Phoenix Channel is done in the backend side.