Stuck on "Build it with phoenix" 12th video: The other user aren't seeing the broadcast

Phoenix Forum Questions / Help
,
1

I’m stuck on broadcasting. The other user aren’t seeing the broadcast. I don’t think the users are subscribed correctly. I have no idea how to debug for subscribe

defmodule ChatWeb.ChatLive do
  use ChatWeb, :live_view

  def mount(%{"room_id" => room_id}, _session, socket) do
    topic = "room:#{room_id}"

    if connected?(socket) do
      ChatWeb.Endpoint.subscribe(topic)
    end

    user = MnemonicSlugs.generate_slug(2)
    form = to_form(%{"text" => ""}, as: :message)
    messages = [Chat.Messages.insert_message("#{user} joined the chat", user: "system")]

    {:ok, assign(socket, room: room_id, user: user, topic: topic, form: form, messages: messages), temporary_assigns: [messages: []]}
  end

  def render(assigns) do
    ~H"""
    <h1 class="text-l">
      You are chatting in the <code class="bg-slate-200 p-2"><%= @room %></code>
      room as <code class="bg-slate-200 p-2"><%= @user %></code>
    </h1>

    <div class="mt-4 border-2 p-4" id="message-list" phx-update="append">
      <div :for={message <- @messages} id={"message-#{message.id}"}>
        <%= message.text %>
      </div>
    </div>

    <div class="mt-4 border-2 p-4">
      <div>Chat message</div>
    </div>

    <.simple_form for={@form} phx-submit="save_message"> 
      <.input field={@form[:text]} placeholder="Enter chat message" /> 
    </.simple_form>
    """
  end

  def handle_event("save_message", %{"message" => %{"text" => text}}, socket) do
    message = Chat.Messages.insert_message(text, socket.assigns.user) 

    IO.inspect(socket.assigns.topic, label: "broadcast_topic")

    ChatWeb.Endpoint.broadcast(socket.assigns.topic, "new-message", message)

    {:noreply, assign(socket, messages: [message])}
  end

  def handle_info(%{event: "new-message", payload: message} = msg, socket) do
    IO.inspect(msg, label: "handle_info")
    {:noreply, assign(socket, message: [message])}
  end
end

I’m trying to debug this and I can see it’s broadcasting.

How do I see if the user is subscribing?

I believe I’m connecting right here:

Rebuilding...

Done in 22ms.
[info] GET /biwp
[debug] Processing with ChatWeb.ChatLive.nil/2
  Parameters: %{"room_id" => "biwp"}
  Pipelines: [:browser]
[info] Sent 200 in 879µs
[info] GET /biwp
[debug] Processing with ChatWeb.ChatLive.nil/2
  Parameters: %{"room_id" => "biwp"}
  Pipelines: [:browser]
[info] Sent 200 in 956µs
[info] CONNECTED TO Phoenix.LiveView.Socket in 28µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "GQJGZ3kxfholD1sjCQVCNlNbJAcoQh0no52--iGKRNlpqm6lk6EAL4YU", "_live_referer" => "undefined", "_mount_attempts" => "0", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
[debug] MOUNT ChatWeb.ChatLive
  Parameters: %{"room_id" => "biwp"}
  Session: %{"_csrf_token" => "v7tJTX9QwA7SxhtZ8maFdvDr"}
[debug] Replied in 320µs
[info] CONNECTED TO Phoenix.LiveView.Socket in 18µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "LlssBWAVdzwfOF4WIVBBIEsHKxEXQSU_XlXO4MNmhyiEY85zsjJWs7aM", "_live_referer" => "undefined", "_mount_attempts" => "0", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
[debug] MOUNT ChatWeb.ChatLive
  Parameters: %{"room_id" => "biwp"}
  Session: %{"_csrf_token" => "v7tJTX9QwA7SxhtZ8maFdvDr"}
[debug] Replied in 429µs

And I can see it’s broadcasting:

[debug] MOUNT ChatWeb.ChatLive
  Parameters: %{"room_id" => "biwp"}
  Session: %{"_csrf_token" => "v7tJTX9QwA7SxhtZ8maFdvDr"}
[debug] Replied in 429µs
[debug] HANDLE EVENT "save_message" in ChatWeb.ChatLive
  Parameters: %{"message" => %{"text" => "hi"}}
broadcast_topic: "room:biwp"
[debug] Replied in 577µs
handle_info: %Phoenix.Socket.Broadcast{
  topic: "room:biwp",
  event: "new-message",
  payload: %Chat.Message{
    id: "3113670e-61eb-4c0f-99fc-6571af4896db",
    text: "hi",
    user: "perform-tina"
  }
}
handle_info: %Phoenix.Socket.Broadcast{
  topic: "room:biwp",
  event: "new-message",
  payload: %Chat.Message{
    id: "3113670e-61eb-4c0f-99fc-6571af4896db",
    text: "hi",
    user: "perform-tina"
  }
}

So it seems like it’s broadcasting but I think the user are subscribed. I have to two tabs opened to the same room, biwp.

I’d like to figure out how to debug and see if the users are subscribed to topic room:biwp.

My phoenix version and live view according to mix.exs is 1.7.14 for phoenix and liveview is 1.0.0-rc.1

Thank you

2

I missed a warning with:

Warning: phx-update=“append” is deprecated

I’m going to look into stream to see if this is the problem and see if I can update the code to use steam instead.

3

There was a typo… message: [message] should be messages: [message].

2 Likes