Add presence

Author: michaelstalker

assets/js/app.js

@@ -14,4 +14,4 @@ import "phoenix_html"
 // Import local files
 //
 // Local files can be imported directly using relative paths, for example:
-// import socket from "./socket"
+import socket from "./socket"

assets/js/socket.js

@@ -1,63 +1,25 @@
-// NOTE: The contents of this file will only be executed if
-// you uncomment its entry in "assets/js/app.js".
+import {Socket, Presence} 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"
+const socket = new Socket('/socket', {params: {username: window.pointingParty.username}})
+socket.connect()
 
-let socket = new Socket("/socket", {params: {token: window.userToken}})
+const channel = socket.channel('room:lobby', {})
+const presence = new Presence(channel)
 
-// 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()
+presence.onSync(() => {
+  const users = document.querySelector('.users')
+  users.innerHTML = ''
+
+  presence.list((id, _) => {
+    const user = document.createElement('li')
+    user.setAttribute('class', id)
+    user.appendChild(document.createTextNode(id))
+    users.appendChild(user)
+  })
+})
 
-// 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) })
+  .receive('ok', resp => { console.log('Joined successfully', resp) })
+  .receive('error', resp => { console.log('Unable to join', resp) })
 
 export default socket

lib/pointing_party/application.ex

@@ -6,14 +6,10 @@ defmodule PointingParty.Application do
   use Application
 
   def start(_type, _args) do
-    # List all child processes to be supervised
     children = [
-      # Start the Ecto repository
       PointingParty.Repo,
-      # Start the endpoint when the application starts
-      PointingPartyWeb.Endpoint
-      # Starts a worker by calling: PointingParty.Worker.start_link(arg)
-      # {PointingParty.Worker, arg},
+      PointingPartyWeb.Endpoint,
+      PointingPartyWeb.Presence
     ]
 
     # See https://hexdocs.pm/elixir/Supervisor.html

lib/pointing_party_web/channels/presence.ex

@@ -0,0 +1,4 @@
+defmodule PointingPartyWeb.Presence do
+  use Phoenix.Presence, otp_app: :pointing_party,
+                        pubsub_server: PointingParty.PubSub
+end

lib/pointing_party_web/channels/room_channel.ex

@@ -0,0 +1,18 @@
+defmodule PointingPartyWeb.RoomChannel do
+  use PointingPartyWeb, :channel
+
+  alias PointingPartyWeb.Presence
+
+  def join("room:lobby", _payload, socket) do
+    send(self(), :after_join)
+
+    {:ok, socket}
+  end
+
+  def handle_info(:after_join, socket) do
+    push(socket, "presence_state", Presence.list(socket))
+    {:ok, _} = Presence.track(socket, socket.assigns.username, %{})
+
+    {:noreply, socket}
+  end
+end

lib/pointing_party_web/channels/user_socket.ex

@@ -2,7 +2,7 @@ defmodule PointingPartyWeb.UserSocket do
   use Phoenix.Socket
 
   ## Channels
-  # channel "room:*", PointingPartyWeb.RoomChannel
+  channel "room:lobby", PointingPartyWeb.RoomChannel
 
   # Socket params are passed from the client and can
   # be used to verify and authenticate a user. After
@@ -15,8 +15,8 @@ defmodule PointingPartyWeb.UserSocket do
   #
   # See `Phoenix.Token` documentation for examples in
   # performing token verification on connect.
-  def connect(_params, socket, _connect_info) do
-    {:ok, socket}
+  def connect(%{"username" => username}, socket, _connect_info) do
+    {:ok, assign(socket, :username, username)}
   end
 
   # Socket id's are topics that allow you to identify all sockets for a given user:

lib/pointing_party_web/templates/card/index.html.eex

@@ -1,29 +1,39 @@
+<div class="row">
+  <div class="col-md-10">
+    <div class="card text-left">
+      <div class="card-header">
+        <h2><%= @card.title %></h2>
+      </div>
+      <div class="card-body">
+        <p class="card-text"><%= @card.description %></p>
+        <div class="form-group text-left">
+          <div class="form-row align-items-center">
+            <div class="col-2">
+              <label for="storyPoints">Story Points</label>
+              <select class="form-control" id="storyPoints">
+                <%= Enum.map(@points, fn point ->  %>
+                  <%= if @card.points == point do %>
+                    <option selected="selected'"><%= point %></option>
+                  <% else %>
+                    <option><%= point %></option>
+                  <% end %>
+                <% end) %>
+              </select>
+            </div>
+          </div>
+      </div>
+        <a href="#" class="btn btn-primary">Calculate Points</a>
+      </div>
 
-<div class="card text-left">
-  <div class="card-header">
-    <h2><%= @card.title %></h2>
-  </div>
-  <div class="card-body">
-    <p class="card-text"><%= @card.description %></p>
-    <div class="form-group text-left">
-      <div class="form-row align-items-center">
-        <div class="col-2">
-          <label for="storyPoints">Story Points</label>
-          <select class="form-control" id="storyPoints">
-            <%= Enum.map(@points, fn point ->  %>
-              <%= if @card.points == point do %>
-                <option selected="selected'"><%= point %></option>
-              <% else %>
-                <option><%= point %></option>
-              <% end %>
-            <% end) %>
-          </select>
-        </div>
+      <div class="card-footer text-muted">
+        created at: <%= @card.inserted_at %>
       </div>
+    </div>
   </div>
-    <a href="#" class="btn btn-primary">Calculate Points</a>
-  </div>
-  <div class="card-footer text-muted">
-    created at: <%= @card.inserted_at %>
+
+  <div class="col-md-2">
+    <h2>Users</h2>
+    <ul class="users">
+    </ul>
   </div>
 </div>

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

@@ -7,6 +7,7 @@
     <title>PointingParty</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <script>window.pointingParty = window.pointingParty || {}</script>
   </head>
   <body>
     <header>
@@ -31,6 +32,7 @@
       <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
       <%= render @view_module, @view_template, assigns %>
     </main>
+    <script type="text/javascript">window.pointingParty.username = "<%= Map.get(@conn.assigns, :username) %>"</script>
     <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </body>
 </html>