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,


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 ChatSocket

I can also send messages to the WebSocket:

Screenshot from 2023-11-05 10-17-32

Sending messages to the ChatSocket

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.

I’d suggest looking into Phoenix.Channels which uses Phoenix.PubSub under the hood.

At a high level, you’ll want to subscribe to the chatroom topic in mount callback, publish/broadcast the message in handle_event callback for new messages from the client, and finally handling those messages published/broadcasted from other clients in handle_info callback. For a minimal working example, take a look at Step 4 — Subscribe & Consume Messages in Build Real-time Chat With Phoenix and LiveView in Fewer Than 50 Lines of Code.

And if you want to use Phoenix.PubSub directly, here’s a helpful repo that walks through the process in its readme: GitHub - dwyl/phoenix-liveview-chat-example: 💬 Step-by-step tutorial creates a Chat App using Phoenix LiveView including Presence, Authentication and Style with Tailwind CSS.

1 Like

Thank you for the response.

I’m not interested in using Phoenix.Channels at the moment. I’ll just keep moving forward using Phoenix.Socket.Transport instead of restructuring my app, it works fine as I have it. All I need to do is broadcast to other members.

I appreciate the two resources you’ve provided, I’ll look into the PubSub example you’ve provided.

Maybe I don’t understand what you’re trying to do but why don’t you subscribe to the appropriate pubsub topic directly in your LiveView process instead?

I got it working with Phoenix.Channels, there was a misunderstanding on my part on WebSockets and Pub/Sub.

Here check this out: Live Chatroom Messaging

But why do you use Channels / a websocket connection on top of using LiveView which is already that?

In your LiveView(s) you could do

AppWeb.Endpoint.broadcast!(room_id, "Hello", nil)