Phoenix LiveView, WebSockets, PubSub and Message Broadcasting

Hello All,

I need some clarifications on using WebSockets and Pub/Sub in/with Phoenix LiveView.

I have the example working where I can create, store, and delete the message and reflect them on the message feed. All I need to do now is reflect them to other users in the chat.

I am currently using Phoenix.Socket.Transport but later down the road I’ll just probably implement that using Cowboy via the behaviour :cowboy_websocket.

I have the ChatSocket implemented and defined in the Endpoint as follows.

In endpoint.ex,

 socket "/chat/:user_id/:room_id/", AppWeb.ChatSocket, websocket: true, longpoll: true

I can do some subscribing and publishing via the user_id and room_id.

On every room change, LiveView updates the websocket URL and the user_id is populated with the current authenticated users id and the selected room id,

ws://localhost:4000/chat/#{@current_user.id}/#{@active_room.id}/websocket

that in turn is passed to a JavaScript Hook (phx-hook={Chat}) via the data-ws-url attribute that implements the WebSocket and other niceties such as scrolling down/up? to the first message, etc.

I have the ChatSocket receiving a heartbeat from clients but now the confusion arises.

I understand the theory behind WebSockets and how they work I can send heartbeats to the ChatSocket as you can see in the following image:

Two users/clients connected to ChatSocket304×558 15 KB

I can also send messages to the WebSocket:

Screenshot from 2023-11-05 10-17-32531×173 5.58 KB

Sending messages to the ChatSocket395×239 6.48 KB

So essentially what I’m doing is the following:

• A new message is created
• It is saved in the database
• the stream is updated and rendered
• the message is then sent to the websocket
• (potentially) pub/sub then broadcasts them to subscribed members

Note: All I care about for now is basic message storing and broadcasting there is quite a bit of edge cases I am not handling at the moment.

So the question I have is where do I plop in the Phoenix PubSub?

Since this is a SPA app and I retrieve all user information such as chatrooms along with messages, members, and member profiles. I was thinking about subscribing when I retrieve information and accessing it in the ChatSocket that way I can get new message information and display a badge with the latest message.

Thank you for taking your time with my post. Any help/clarifications is appreciated.