feat(elixir:gsmlg): Add node channel in GSMLGWeb app.

Author: gsmlg

elixir/gsmlg_umbrella/apps/gsmlg_web/assets/js/app.js

@@ -4,7 +4,7 @@ import "../css/app.css"
 
 // 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.
 //

elixir/gsmlg_umbrella/apps/gsmlg_web/assets/js/user_socket.js

@@ -0,0 +1,64 @@
+// NOTE: The contents of this file will only be executed if
+// you uncomment its entry in "assets/js/app.js".
+
+// Bring in Phoenix channels client library:
+import {Socket} from "phoenix"
+
+// And connect to the path in "lib/gsmlg_web/endpoint.ex". We pass the
+// token for authentication. Read below how it should be used.
+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/gsmlg_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/gsmlg_web/templates/layout/app.html.heex":
+//
+//     <script>window.userToken = "<%= assigns[:user_token] %>";</script>
+//
+// You will need to verify the user token in the "connect/3" function
+// in "lib/gsmlg_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: 1_209_600) 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's assume you have a channel with a topic named `room` and the
+// subtopic is its id - in this case 42:
+let channel = socket.channel("room:42", {})
+channel.join()
+  .receive("ok", resp => { console.log("Joined successfully", resp) })
+  .receive("error", resp => { console.log("Unable to join", resp) })
+
+export default socket

elixir/gsmlg_umbrella/apps/gsmlg_web/lib/gsmlg_web/channels/node_channel.ex

@@ -0,0 +1,32 @@
+defmodule GSMLGWeb.NodeChannel do
+  use GSMLGWeb, :channel
+
+  @impl true
+  def join("node:lobby", payload, socket) do
+    if authorized?(payload) do
+      {:ok, socket}
+    else
+      {:error, %{reason: "unauthorized"}}
+    end
+  end
+
+  # Channels can be used in a request/response fashion
+  # by sending replies to requests from the client
+  @impl true
+  def handle_in("ping", payload, socket) do
+    {:reply, {:ok, payload}, socket}
+  end
+
+  # It is also common to receive messages from the client and
+  # broadcast to everyone in the current topic (node:lobby).
+  @impl true
+  def handle_in("shout", payload, socket) do
+    broadcast socket, "shout", payload
+    {:noreply, socket}
+  end
+
+  # Add authorization logic here as required.
+  defp authorized?(_payload) do
+    true
+  end
+end

elixir/gsmlg_umbrella/apps/gsmlg_web/lib/gsmlg_web/channels/user_socket.ex

@@ -0,0 +1,41 @@
+defmodule GSMLGWeb.UserSocket do
+  use Phoenix.Socket
+
+  # A Socket handler
+  #
+  # It's possible to control the websocket connection and
+  # assign values that can be accessed by your channel topics.
+
+  ## Channels
+
+  channel "node:*", GSMLGWeb.NodeChannel
+
+  # 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}
+  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:
+  #
+  #     Elixir.GSMLGWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{})
+  #
+  # Returning `nil` makes this socket anonymous.
+  @impl true
+  def id(_socket), do: nil
+end

elixir/gsmlg_umbrella/apps/gsmlg_web/lib/gsmlg_web/endpoint.ex

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

elixir/gsmlg_umbrella/apps/gsmlg_web/test/gsmlg_web/channels/node_channel_test.exs

@@ -0,0 +1,27 @@
+defmodule GSMLGWeb.NodeChannelTest do
+  use GSMLGWeb.ChannelCase
+
+  setup do
+    {:ok, _, socket} =
+      GSMLGWeb.UserSocket
+      |> socket("user_id", %{some: :assign})
+      |> subscribe_and_join(GSMLGWeb.NodeChannel, "node:lobby")
+
+    %{socket: socket}
+  end
+
+  test "ping replies with status ok", %{socket: socket} do
+    ref = push socket, "ping", %{"hello" => "there"}
+    assert_reply ref, :ok, %{"hello" => "there"}
+  end
+
+  test "shout broadcasts to node:lobby", %{socket: socket} do
+    push socket, "shout", %{"hello" => "all"}
+    assert_broadcast "shout", %{"hello" => "all"}
+  end
+
+  test "broadcasts are pushed to the client", %{socket: socket} do
+    broadcast_from! socket, "broadcast", %{"some" => "data"}
+    assert_push "broadcast", %{"some" => "data"}
+  end
+end