channels and topics

Author: Tomáš Král

assets/js/app.js

@@ -14,10 +14,8 @@ import "../css/app.scss";
 //
 import "phoenix_html";
 
+import socket from "./socket";
 import Player from "./player";
-let video = document.getElementById("video");
-if (video) {
-  Player.init(video.id, video.getAttribute("data-player-id"), () => {
-    console.log("player ready!");
-  });
-}
+import Video from "./video";
+
+Video.init(socket, document.getElementById("video"));

assets/js/socket.js

@@ -1,63 +1,10 @@
-// NOTE: The contents of this file will only be executed if
-// you uncomment its entry in "assets/js/app.js".
+import { Socket } from "phoenix";
 
-// To use Phoenix channels, the first step is to import Socket,
-// and connect at the socket path in "lib/web/endpoint.ex".
-//
-// Pass the token on params as below. Or remove it
-// from the params if you are not using authentication.
-import {Socket} from "phoenix"
+let socket = new Socket("/socket", {
+  params: { token: window.userToken },
+  logger: (kind, msg, data) => {
+    console.log(`${kind}: ${msg}`, data);
+  },
+});
 
-let socket = new Socket("/socket", {params: {token: window.userToken}})
-
-// When you connect, you'll often need to authenticate the client.
-// For example, imagine you have an authentication plug, `MyAuth`,
-// which authenticates the session and assigns a `:current_user`.
-// If the current user exists you can assign the user's token in
-// the connection for use in the layout.
-//
-// In your "lib/web/router.ex":
-//
-//     pipeline :browser do
-//       ...
-//       plug MyAuth
-//       plug :put_user_token
-//     end
-//
-//     defp put_user_token(conn, _) do
-//       if current_user = conn.assigns[:current_user] do
-//         token = Phoenix.Token.sign(conn, "user socket", current_user.id)
-//         assign(conn, :user_token, token)
-//       else
-//         conn
-//       end
-//     end
-//
-// Now you need to pass this token to JavaScript. You can do so
-// inside a script tag in "lib/web/templates/layout/app.html.eex":
-//
-//     <script>window.userToken = "<%= assigns[:user_token] %>";</script>
-//
-// You will need to verify the user token in the "connect/3" function
-// in "lib/web/channels/user_socket.ex":
-//
-//     def connect(%{"token" => token}, socket, _connect_info) do
-//       # max_age: 1209600 is equivalent to two weeks in seconds
-//       case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
-//         {:ok, user_id} ->
-//           {:ok, assign(socket, :user, user_id)}
-//         {:error, reason} ->
-//           :error
-//       end
-//     end
-//
-// Finally, connect to the socket:
-socket.connect()
-
-// Now that you are connected, you can join channels with a topic:
-let channel = socket.channel("topic:subtopic", {})
-channel.join()
-  .receive("ok", resp => { console.log("Joined successfully", resp) })
-  .receive("error", resp => { console.log("Unable to join", resp) })
-
-export default socket
+export default socket;

assets/js/video.js

@@ -0,0 +1,61 @@
+import Player from "./player";
+
+let Video = {
+  init(socket, element) {
+    if (!element) {
+      return;
+    }
+    let playerId = element.getAttribute("data-player-id");
+    let videoId = element.getAttribute("data-id");
+    socket.connect();
+    Player.init(element.id, playerId, () => {
+      this.onReady(videoId, socket);
+    });
+  },
+
+  onReady(videoId, socket) {
+    let msgContainer = document.getElementById("msg-container");
+    let msgInput = document.getElementById("msg-input");
+    let postButton = document.getElementById("msg-submit");
+    let vidChannel = socket.channel("videos:" + videoId);
+
+    postButton.addEventListener("click", (e) => {
+      let payload = { body: msgInput.value, at: Player.getCurrentTime() };
+      vidChannel
+        .push("new_annotation", payload)
+        .receive("error", (e) => console.log(e));
+      msgInput.value = "";
+    });
+
+    vidChannel.on("new_annotation", (resp) => {
+      this.renderAnnotation(msgContainer, resp);
+    });
+
+    vidChannel
+      .join()
+      .receive("ok", ({ annotations }) => {
+        annotations.forEach((ann) => this.renderAnnotation(msgContainer, ann));
+      })
+      .receive("error", (reason) => console.log("join failed", reason));
+  },
+
+  esc(str) {
+    let div = document.createElement("div");
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  },
+
+  renderAnnotation(msgContainer, { user, body, at }) {
+    let template = document.createElement("div");
+
+    template.innerHTML = `
+      <a href="#" data-seek="${this.esc(at)}">
+      <b>${this.esc(user.username)}</b>: ${this.esc(body)}
+      </a>
+      `;
+    msgContainer.appendChild(template);
+    msgContainer.scrollTop = msgContainer.scrollHeight;
+  },
+};
+
+export default Video;

lib/rumbl/accounts.ex

@@ -15,6 +15,10 @@ defmodule Rumbl.Accounts do
     Repo.get(User, id)
   end
 
+  def get_user!(id) do
+    Repo.get(User, id)
+  end
+
   def get_user_by(params) do
     Repo.get_by(User, params)
   end

lib/rumbl/multimedia.ex

@@ -9,6 +9,7 @@ defmodule Rumbl.Multimedia do
   alias Rumbl.Multimedia.Video
   alias Rumbl.Multimedia.Category
   alias Rumbl.Accounts
+  alias Rumbl.Multimedia.Annotation
 
   def list_videos do
     Video
@@ -65,6 +66,22 @@ defmodule Rumbl.Multimedia do
     Repo.get_by(Category, name: name) || Repo.insert!(%Category{name: name})
   end
 
+  def annotate_video(%Accounts.User{} = user, video_id, attrs) do
+    %Annotation{video_id: video_id}
+    |> Annotation.changeset(attrs)
+    |> put_user(user)
+    |> Repo.insert()
+  end
+
+  def list_annotations(%Video{} = video) do
+    Repo.all(
+      from a in Ecto.assoc(video, :annotations),
+        order_by: [asc: a.at, asc: a.id],
+        limit: 500,
+        preload: [:user]
+    )
+  end
+
   defp put_user(changeset, user) do
     Ecto.Changeset.put_assoc(changeset, :user, user)
   end

lib/rumbl/multimedia/annotation.ex

@@ -0,0 +1,21 @@
+defmodule Rumbl.Multimedia.Annotation do
+  use Ecto.Schema
+  import Ecto.Changeset
+
+  schema "anotations" do
+    field :at, :integer
+    field :body, :string
+
+    belongs_to :user, Rumbl.Accounts.User
+    belongs_to :video, Rumbl.Multimedia.Video
+
+    timestamps()
+  end
+
+  @doc false
+  def changeset(annotation, attrs) do
+    annotation
+    |> cast(attrs, [:body, :at])
+    |> validate_required([:body, :at])
+  end
+end

lib/rumbl/multimedia/video.ex

@@ -9,8 +9,10 @@ defmodule Rumbl.Multimedia.Video do
     field :title, :string
     field :url, :string
     field :slug, :string
+
     belongs_to :user, Rumbl.Accounts.User
     belongs_to :category, Rumbl.Multimedia.Category
+    has_many :annotations, Rumbl.Multimedia.Annotation
 
     timestamps()
   end

lib/rumbl_web/channels/user_socket.ex

@@ -2,34 +2,24 @@ defmodule RumblWeb.UserSocket do
   use Phoenix.Socket
 
   ## Channels
-  # channel "room:*", RumblWeb.RoomChannel
+  channel "videos:*", RumblWeb.VideoChannel
 
-  # Socket params are passed from the client and can
-  # be used to verify and authenticate a user. After
-  # verification, you can put default assigns into
-  # the socket that will be set for all channels, ie
-  #
-  #     {:ok, assign(socket, :user_id, verified_user_id)}
-  #
-  # To deny connection, return `:error`.
-  #
-  # See `Phoenix.Token` documentation for examples in
-  # performing token verification on connect.
-  @impl true
-  def connect(_params, socket, _connect_info) do
-    {:ok, socket}
+  @max_age 2 * 7 * 24 * 60 * 60
+  def connect(%{"token" => token}, socket) do
+    case Phoenix.Token.verify(
+           socket,
+           "user socket",
+           token,
+           max_age: @max_age
+         ) do
+      {:ok, user_id} ->
+        {:ok, assign(socket, :user_id, user_id)}
+
+      {:error, _reason} ->
+        :error
+    end
   end
 
-  # Socket id's are topics that allow you to identify all sockets for a given user:
-  #
-  #     def id(socket), do: "user_socket:#{socket.assigns.user_id}"
-  #
-  # Would allow you to broadcast a "disconnect" event and terminate
-  # all active sockets and channels for a given user:
-  #
-  #     RumblWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{})
-  #
-  # Returning `nil` makes this socket anonymous.
-  @impl true
-  def id(_socket), do: nil
+  def connect(_params, _socket), do: :error
+  def id(socket), do: "users_socket:#{socket.assigns.user_id}"
 end

lib/rumbl_web/channels/video_channel.ex

@@ -0,0 +1,38 @@
+defmodule RumblWeb.VideoChannel do
+  use RumblWeb, :channel
+  alias Rumbl.{Accounts, Multimedia}
+  alias RumblWeb.AnnotationView
+
+  def join("videos:" <> video_id, _params, socket) do
+    video_id = String.to_integer(video_id)
+    video = Multimedia.get_video!(video_id)
+
+    annotations =
+      video
+      |> Multimedia.list_annotations()
+      |> Phoenix.View.render_many(AnnotationView, "annotation.json")
+
+    {:ok, %{annotations: annotations}, assign(socket, :video_id, video_id)}
+  end
+
+  def handle_in(event, params, socket) do
+    user = Accounts.get_user(socket.assigns.user_id)
+    handle_in(event, params, user, socket)
+  end
+
+  def handle_in("new_annotation", params, user, socket) do
+    case Multimedia.annotate_video(user, socket.assigns.video_id, params) do
+      {:ok, annotation} ->
+        broadcast!(socket, "new_annotation", %{
+          id: annotation.id,
+          user: RumblWeb.UserView.render("user.json", %{user: user}),
+          body: annotation.body,
+          at: annotation.at
+        })
+        {:reply, :ok, socket}
+
+      {:error, changeset} ->
+        {:reply, {:error, %{errors: changeset}}, socket}
+    end
+  end
+end

lib/rumbl_web/controllers/auth.ex

@@ -19,13 +19,21 @@ defmodule RumblWeb.Auth do
   end
   def call(conn, _opts) do
     user_id = get_session(conn, :user_id)
-    user = user_id && Accounts.get_user(user_id)
-    assign(conn, :current_user, user)
+    cond do
+      user = conn.assigns[:current_user] ->
+        put_current_user(conn, user)
+
+      user = user_id && Accounts.get_user!(user_id) ->
+        put_current_user(conn, user)
+
+      true ->
+        assign(conn, :current_user, nil)
+    end
   end
 
   def login(conn, user) do
     conn
-    |> assign(:current_user, user)
+    |> put_current_user(user)
     |> put_session(:user_id, user.id)
     |> configure_session(renew: true)
   end
@@ -41,4 +49,12 @@ defmodule RumblWeb.Auth do
   def logout(conn) do
     configure_session(conn, drop: true)
   end
+
+  defp put_current_user(conn, user) do
+    token = Phoenix.Token.sign(conn, "user socket", user.id)
+
+    conn
+    |> assign(:current_user, user)
+    |> assign(:user_token, token)
+  end
 end

lib/rumbl_web/templates/layout/app.html.eex

@@ -7,6 +7,7 @@
     <title>Rumbl · Phoenix Framework</title>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
     <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+    <script>window.userToken="<%= assigns[:user_token] %>"</script>
   </head>
   <body>
     <header>

lib/rumbl_web/views/annotation_view.ex

@@ -0,0 +1,12 @@
+defmodule RumblWeb.AnnotationView do
+  use RumblWeb, :view
+
+  def render("annotation.json", %{annotation: annotation}) do
+    %{
+      id: annotation.id,
+      body: annotation.body,
+      at: annotation.at,
+      user: render_one(annotation.user, RumblWeb.UserView, "user.json")
+    }
+  end
+end

lib/rumbl_web/views/user_view.ex

@@ -1,6 +1,5 @@
 defmodule RumblWeb.UserView do
   use RumblWeb, :view
-
   alias Rumbl.Accounts
 
 
@@ -9,4 +8,8 @@ defmodule RumblWeb.UserView do
     |> String.split(" ")
     |> Enum.at(0)
   end
+
+  def render("user.json", %{user: user}) do
+    %{id: user.id, username: user.username}
+  end
 end