[Broadcaster] Add viewer count and backend chat stub (#12)

* Add viewer count and chat backend

* Remove unnecessary comment

* Fix module naming issues in tests

* Remove dummy tests

Author: LVala

broadcaster/assets/js/app.js

@@ -1,6 +1,6 @@
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 // to get started and then uncomment the line below.
-// import "./user_socket.js"
+import "./user_socket.js"
 
 // You can include dependencies in two ways.
 //

broadcaster/assets/js/user_socket.js

@@ -0,0 +1,27 @@
+import {Socket, Presence} from "phoenix"
+
+let socket = new Socket("/socket", {params: {token: window.userToken}})
+
+socket.connect()
+
+const channel = socket.channel("stream:chat", {name: "TODO get user name"})
+const presence = new Presence(channel)
+const viewercount = document.getElementById("viewercount")
+
+presence.onSync(() => {
+  viewercount.innerText = presence.list().length
+})
+
+channel.join()
+  .receive("ok", resp => { console.log("Joined chat channel successfully", resp) })
+  .receive("error", resp => { console.log("Unable to join chat channel", resp) })
+
+channel.on("chat_msg", payload => {
+  // TODO capture message from some kind of input
+  console.log("RECEIVED CHAT MESSAGE", payload)
+})
+
+// TODO when user types message in chat, do this
+channel.push("chat_msg", {body: "TODO get chat message"})
+
+export default socket

broadcaster/lib/broadcaster/application.ex

@@ -15,6 +15,7 @@ defmodule Broadcaster.Application do
       # {Broadcaster.Worker, arg},
       # Start to serve requests, typically the last entry
       BroadcasterWeb.Endpoint,
+      BroadcasterWeb.Presence,
       Broadcaster.PeerSupervisor,
       Broadcaster.Forwarder,
       {Registry, name: Broadcaster.PeerRegistry, keys: :unique}

broadcaster/lib/broadcaster/peer_supervisor.ex

@@ -64,15 +64,17 @@ defmodule Broadcaster.PeerSupervisor do
     pc_id = generate_pc_id()
     {:ok, pc} = spawn_peer_connection(pc_id)
 
-    Logger.info("Received offer for #{inspect(pc)}, SDP:\n#{offer.sdp}")
+    Logger.info("Received offer for #{inspect(pc)}")
+    Logger.debug("Offer SDP for #{inspect(pc)}:\n#{offer.sdp}")
 
     with :ok <- PeerConnection.set_remote_description(pc, offer),
          :ok <- setup_transceivers(pc, direction),
          {:ok, answer} <- PeerConnection.create_answer(pc),
          :ok <- PeerConnection.set_local_description(pc, answer),
          :ok <- gather_candidates(pc),
          answer <- PeerConnection.get_local_description(pc) do
-      Logger.info("Sent answer for #{inspect(pc)}, SDP:\n#{answer.sdp}")
+      Logger.info("Sent answer for #{inspect(pc)}")
+      Logger.debug("Answer SDP for #{inspect(pc)}:\n#{answer.sdp}")
 
       {:ok, pc, pc_id, answer.sdp}
     else

broadcaster/lib/broadcaster_web/channels/presence.ex

@@ -0,0 +1,11 @@
+defmodule BroadcasterWeb.Presence do
+  @moduledoc """
+  Provides presence tracking to channels and processes.
+
+  See the [`Phoenix.Presence`](https://hexdocs.pm/phoenix/Phoenix.Presence.html)
+  docs for more details.
+  """
+  use Phoenix.Presence,
+    otp_app: :broadcaster,
+    pubsub_server: Broadcaster.PubSub
+end

broadcaster/lib/broadcaster_web/channels/stream_channel.ex

@@ -0,0 +1,24 @@
+defmodule BroadcasterWeb.StreamChannel do
+  use BroadcasterWeb, :channel
+
+  alias BroadcasterWeb.Presence
+
+  @impl true
+  def join("stream:chat", %{"name" => name}, socket) do
+    send(self(), :after_join)
+    {:ok, assign(socket, :name, name)}
+  end
+
+  @impl true
+  def handle_in("chat_msg", %{"body" => body}, socket) do
+    broadcast!(socket, "chat_msg", %{body: body, name: socket.assigns.name})
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_info(:after_join, socket) do
+    {:ok, _} = Presence.track(socket, socket.assigns.user_id, %{})
+    push(socket, "presence_state", Presence.list(socket))
+    {:noreply, socket}
+  end
+end

broadcaster/lib/broadcaster_web/channels/user_socket.ex

@@ -0,0 +1,19 @@
+defmodule BroadcasterWeb.UserSocket do
+  use Phoenix.Socket
+
+  channel "stream:*", BroadcasterWeb.StreamChannel
+
+  @impl true
+  def connect(_params, socket, _connect_info) do
+    {:ok, assign(socket, :user_id, generate_id())}
+  end
+
+  @impl true
+  def id(socket), do: "user_socket:#{socket.assigns.user_id}"
+
+  defp generate_id do
+    10
+    |> :crypto.strong_rand_bytes()
+    |> Base.url_encode64()
+  end
+end

broadcaster/lib/broadcaster_web/components/layouts/app.html.heex

@@ -6,6 +6,10 @@
       </a>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-brand/80">
+      <div class="flex gap-1 px-4">
+        <p id="viewercount">0</p>
+        <.icon name="hero-user-solid" />
+      </div>
       <a href="https://github.com/elixir-webrtc/ex_webrtc" class="hover:text-brand">
         GitHub
       </a>

broadcaster/lib/broadcaster_web/endpoint.ex

@@ -11,6 +11,10 @@ defmodule BroadcasterWeb.Endpoint do
     same_site: "Lax"
   ]
 
+  socket "/socket", BroadcasterWeb.UserSocket,
+    websocket: true,
+    longpoll: false
+
   socket "/live", Phoenix.LiveView.Socket,
     websocket: [connect_info: [session: @session_options]],
     longpoll: [connect_info: [session: @session_options]]