Add initial channels for posts

This commit is contained in:
Logan Hunt 2022-04-14 13:56:10 -06:00
parent cc58a376a9
commit db7c2321cd
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
8 changed files with 98 additions and 3 deletions

View File

@ -44,4 +44,8 @@ liveSocket.connect()
window.liveSocket = liveSocket window.liveSocket = liveSocket
// Hack to remove alerts on click // 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}})

46
assets/js/chat.js Normal file
View File

@ -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;

View File

@ -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

View File

@ -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

View File

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

View File

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

View File

@ -30,3 +30,8 @@
<span><%= live_patch "Edit", to: Routes.post_show_path(@socket, :edit, @room, @post), class: "button" %></span> | <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> <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>

View File

@ -7,7 +7,7 @@
<%= csrf_meta_tag() %> <%= csrf_meta_tag() %>
<%= live_title_tag assigns[:page_title] || "Aggiedit" %> <%= live_title_tag assigns[:page_title] || "Aggiedit" %>
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/> <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"> <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> <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>