Add initial channels for posts

assets/js/app.js

@@ -44,4 +44,8 @@ liveSocket.connect()
 window.liveSocket = liveSocket
 
 // Hack to remove alerts on click
-Array.from(window.document.getElementsByClassName('alert')).forEach((x) => x.addEventListener('click', () => x.style.display = "none"))
+Array.from(window.document.getElementsByClassName('alert')).forEach((x) => x.addEventListener('click', () => x.style.display = "none"))
+
+import RoomChat from "./chat"
+window.RoomChat = RoomChat;
+window.userSocket = new Socket("/socket", {params: {_csrf_token: csrfToken}})

assets/js/chat.js

@@ -0,0 +1,46 @@
+let RoomChat = {
+  init(socket, postId) {
+    console.log(postId);
+    console.log(socket);
+    let channel = socket.channel(`post:${postId}`)
+    channel.join()
+      .receive("ok", resp => { console.log("Joined successfully", resp) })
+      .receive("error", resp => { console.log("Unable to join", resp) })
+    this.listenForChats(channel)
+  },
+  addMessage(user, message) {
+//    let body = `<span class="username"><b>${user}</b></span>: ${message}<br>`
+//    if (message.match(new RegExp(`@${window.userName}`, "ig"))) {
+//      $("#chat-box").append('<p class="chat-entry"><span class="mentioned">' + body + '</span></p>')
+//    } else {
+//      $("#chat-box").append('<p class="chat-entry">' + body + '</p>')
+//    }
+  },
+  scrollBottom() {
+//    $("#chat-box").animate({ scrollTop: $('#chat-box').prop("scrollHeight")}, 200)
+  },
+  listenForChats(channel) {
+    channel.push('send', { body: "HELLO"});
+//    $(() => {
+//      $("#chat-form").on("submit", function(ev) {
+//        ev.preventDefault()
+//
+//        let userMsg = $('#user-msg').val()
+//        channel.push('send', {body: userMsg})
+//
+//        $("#user-msg").val("")
+//      })
+
+//      channel.on('shout', function(payload) { 
+//        console.log(payload)
+//        RoomChat.addMessage(payload.name, payload.body)
+//        RoomChat.scrollBottom()
+//      })
+ //   })
+    channel.on('shout', function(payload) { 
+      console.log(payload)
+    });
+  }
+}
+
+export default RoomChat;

lib/aggiedit_web/channels/post_channel.ex

@@ -0,0 +1,22 @@
+defmodule AggieditWeb.PostChannel do
+  use AggieditWeb, :channel
+
+  alias Aggiedit.Roles
+  alias Aggiedit.Rooms
+
+  @impl true
+  def join("post:" <> post_id, _payload, socket) do
+    post = Rooms.get_post!(post_id)
+    if Roles.guard?(socket.assigns.current_user, :show, post) do
+      {:ok, socket}
+    else
+      {:error, "You do not have permission to view this post."}
+    end
+  end
+
+  @impl true
+  def handle_in("send", body, socket) do
+    broadcast!(socket, "shout", body)
+    {:reply, :ok, socket}
+  end
+end

lib/aggiedit_web/channels/user_socket.ex

@@ -0,0 +1,17 @@
+defmodule AggieditWeb.UserSocket do
+  alias Aggiedit.Accounts
+  use Phoenix.Socket
+
+  channel "post:*", AggieditWeb.PostChannel
+
+  @impl true
+  def connect(_params, socket, %{:session => %{"user_token" => token}}) do
+    case Accounts.get_user_by_session_token(token) do
+      user=%Accounts.User{} -> {:ok, assign(socket, %{:current_user => user})}
+      _ -> {:error, "Invalid user token."}
+    end
+  end
+
+  @impl true
+  def id(_socket), do: nil
+end

lib/aggiedit_web/endpoint.ex

@@ -12,6 +12,8 @@ defmodule AggieditWeb.Endpoint do
 
   socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
 
+  socket "/socket", AggieditWeb.UserSocket, websocket: [connect_info: [session: @session_options]], longpoll: false
+
   # Serve at "/" the static files from "priv/static" directory.
   #
   # You should set gzip to true if you are running phx.digest

lib/aggiedit_web/live/post_live/index.ex

@@ -29,7 +29,6 @@ defmodule AggieditWeb.PostLive.Index do
 
   @impl true
   def handle_params(params, _url, socket) do
-    IO.puts(inspect(params))
     {:noreply, apply_action(socket, socket.assigns.live_action, params)}
   end
 

lib/aggiedit_web/live/post_live/show.html.heex

@@ -30,3 +30,8 @@
 
 <span><%= live_patch "Edit", to: Routes.post_show_path(@socket, :edit, @room, @post), class: "button" %></span> |
 <span><%= live_redirect "Back", to: Routes.post_index_path(@socket, :index, @room) %></span>
+
+<script>
+  window.userSocket.connect();
+  window.RoomChat.init(window.userSocket, <%= @post.id %>)
+</script>

lib/aggiedit_web/templates/layout/root.html.heex

@@ -7,7 +7,7 @@
     <%= csrf_meta_tag() %>
     <%= live_title_tag assigns[:page_title] || "Aggiedit" %>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
-    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
+    <script phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>