Use sockets to broadcast morse progress.

ui/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"

ui/assets/js/socket.js

@@ -1,63 +1,19 @@
-// NOTE: The contents of this file will only be executed if
-// you uncomment its entry in "assets/js/app.js".
-
-// 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}})
 
-// 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", {})
+let channel = socket.channel("morse:progress", {})
 channel.join()
   .receive("ok", resp => { console.log("Joined successfully", resp) })
   .receive("error", resp => { console.log("Unable to join", resp) })
 
+let progressBar = document.getElementById("morse-progress")
+
+channel.on("update", (content) => {
+  console.log(content["value"])
+  progressBar.value = content["value"]
+});
+
 export default socket

ui/lib/ui_web/channels/morse_progress_channel.ex

@@ -0,0 +1,7 @@
+defmodule UiWeb.MorseProgressChannel do
+  use UiWeb, :channel
+
+  def join(channel_name, _params, socket) do
+    {:ok, %{hi: :there}, socket}
+  end
+end

ui/lib/ui_web/channels/user_socket.ex

@@ -2,7 +2,7 @@ defmodule UiWeb.UserSocket do
   use Phoenix.Socket
 
   ## Channels
-  # channel "room:*", UiWeb.RoomChannel
+  channel "morse:progress", UiWeb.MorseProgressChannel
 
   # Socket params are passed from the client and can
   # be used to verify and authenticate a user. After

ui/lib/ui_web/templates/page/morse.html.eex

@@ -4,8 +4,12 @@
 
 <div id="buttonwrap">
   <input onclick="start()" value="Start" type="button" class="button">
-  <p>Response status:</p>
-  <p id="response"></p>
+  <div id="response-block" style="visibility:hidden">
+    <h2>Response status:</h2>
+    <p id="response"></p>
+    <h2>Progress:</h2>
+    <progress id="morse-progress" max="100" value="0">0%</progress>
+  </div>
 </div>
 
 <a href="http://www.geochecker.com/index.php?code=d9dbdc4542a4911a5f81a51bc9312a35&amp;action=check&amp;wp=47433743363432&amp;name=4573726f6d">en: check your coordinate on GeoChecker.com nl: controleer je co&ouml;rdinaat op GeoChecker.</a>
@@ -31,6 +35,7 @@
 
   function start() {
     responseP.innerHTML = "Starting...";
+    document.getElementById("response-block").style.visibility = "visible";
     xhttp.open("GET", "/start", true);
     xhttp.send();
   }