Update Phoenix and add LiveView

apps/apex_dash/assets/js/app.js

@@ -18,4 +18,4 @@ import "phoenix_html"
 // Local files can be imported directly using relative
 // paths "./socket" or full ones "web/static/js/socket".
 
-// import socket from "./socket"
+import socket from "./socket"

apps/apex_dash/assets/js/socket.js

@@ -4,8 +4,13 @@
 // To use Phoenix channels, the first step is to import Socket
 // and connect at the socket path in "lib/web/endpoint.ex":
 import {Socket} from "phoenix"
+import LiveSocket from "phoenix_live_view"
 
-let socket = new Socket("/socket", {params: {token: window.userToken}})
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+liveSocket.connect()
+
+//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`,
@@ -51,6 +56,7 @@ let socket = new Socket("/socket", {params: {token: window.userToken}})
 // Finally, pass the token on connect as below. Or remove it
 // from connect if you don't care about authentication.
 
+/*
 socket.connect()
 
 // Now that you are connected, you can join channels with a topic:
@@ -60,3 +66,4 @@ channel.join()
   .receive("error", resp => { console.log("Unable to join", resp) })
 
 export default socket
+*/

apps/apex_dash/assets/package.json

@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "phoenix": "file:../../../deps/phoenix",
-    "phoenix_html": "file:../../../deps/phoenix_html"
+    "phoenix_html": "file:../../../deps/phoenix_html",
+    "phoenix_live_view": "file:../../../deps/phoenix_live_view"
   },
   "devDependencies": {
     "babel-brunch": "6.1.1",

apps/apex_dash/config/config.exs

@@ -5,6 +5,8 @@
 # is restricted to this project.
 use Mix.Config
 
+config :phoenix, :json_library, Jason
+
 # General application configuration
 config :apex_dash,
   namespace: ApexDash
@@ -14,8 +16,8 @@ config :apex_dash, ApexDashWeb.Endpoint,
   url: [host: "localhost"],
   secret_key_base: "ZiAsbWn2nzouu36Ta3JR8jmCqz9Gycztbe8ppVYKRAFs+feb0nA/IizGPvlFBWZ5",
   render_errors: [view: ApexDashWeb.ErrorView, accepts: ~w(html json)],
-  pubsub: [name: ApexDash.PubSub,
-           adapter: Phoenix.PubSub.PG2]
+  pubsub_server: ApexDash.PubSub,
+  live_view: [signing_salt: "kCzxEq4RWot7tflnE6589Ty//HhJdfa4"]
 
 # Configures Elixir's Logger
 config :logger, :console,

apps/apex_dash/lib/apex_dash/application.ex

@@ -12,6 +12,7 @@ defmodule ApexDash.Application do
       supervisor(ApexDashWeb.Endpoint, []),
       # Start your own worker by calling: ApexDash.Worker.start_link(arg1, arg2, arg3)
       # worker(ApexDash.Worker, [arg1, arg2, arg3]),
+      {Phoenix.PubSub, [name: ApexDash.PubSub, adapter: Phoenix.PubSub.PG2]}
     ]
 
     # See https://hexdocs.pm/elixir/Supervisor.html

apps/apex_dash/lib/apex_dash_web/channels/user_socket.ex

@@ -4,10 +4,6 @@ defmodule ApexDashWeb.UserSocket do
   ## Channels
   # channel "room:*", ApexDashWeb.RoomChannel
 
-  ## Transports
-  transport :websocket, Phoenix.Transports.WebSocket
-  # transport :longpoll, Phoenix.Transports.LongPoll
-
   # 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

apps/apex_dash/lib/apex_dash_web/controllers/page_controller.ex

@@ -5,3 +5,23 @@ defmodule ApexDashWeb.PageController do
     render conn, "index.html"
   end
 end
+
+defmodule ApexDashWeb.DashboardLive do
+  use Phoenix.LiveView
+
+  def render(assigns) do
+    ~L"""
+    RPM: <%= @rpm %>
+    """
+  end
+
+  def mount(_params, _session, socket) do
+    if connected?(socket), do: :timer.send_interval(300, self(), :update)
+    rpm = :rand.uniform(9000)
+    {:ok, assign(socket, :rpm, rpm)}
+  end
+
+  def handle_info(:update, socket) do
+    {:noreply, assign(socket, :rpm, :rand.uniform(9000))}
+  end
+end

apps/apex_dash/lib/apex_dash_web/endpoint.ex

@@ -1,6 +1,8 @@
 defmodule ApexDashWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :apex_dash
 
+  socket "/live", Phoenix.LiveView.Socket
+
   socket "/socket", ApexDashWeb.UserSocket
 
   # Serve at "/" the static files from "priv/static" directory.
@@ -24,7 +26,7 @@ defmodule ApexDashWeb.Endpoint do
   plug Plug.Parsers,
     parsers: [:urlencoded, :multipart, :json],
     pass: ["*/*"],
-    json_decoder: Poison
+    json_decoder: Jason
 
   plug Plug.MethodOverride
   plug Plug.Head

apps/apex_dash/lib/apex_dash_web/router.ex

@@ -1,5 +1,6 @@
 defmodule ApexDashWeb.Router do
   use ApexDashWeb, :router
+  import Phoenix.LiveView.Router
 
   pipeline :browser do
     plug :accepts, ["html"]
@@ -17,6 +18,7 @@ defmodule ApexDashWeb.Router do
     pipe_through :browser # Use the default browser stack
 
     get "/", PageController, :index
+    live "/live", DashboardLive
   end
 
   # Other scopes may use custom stacks.

apps/apex_dash/lib/apex_dash_web/templates/layout/app.html.eex

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
+    <%= csrf_meta_tag() %>
 
     <title>Hello ApexDash!</title>
     <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
@@ -26,7 +27,7 @@
       <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
 
       <main role="main">
-        <%= render @view_module, @view_template, assigns %>
+        <%= @inner_content %>
       </main>
 
     </div> <!-- /container -->

apps/apex_dash/lib/apex_dash_web/templates/page/index.html.eex

@@ -1,6 +1,8 @@
 <div class="jumbotron">
   <h2><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h2>
   <p class="lead">A productive web framework that<br />does not compromise speed and maintainability.</p>
+
+  <%= live_render(@conn, ApexDashWeb.DashboardLive) %>
 </div>
 
 <div class="row marketing">

apps/apex_dash/lib/apex_dash_web/views/page_view.ex

@@ -1,3 +1,4 @@
 defmodule ApexDashWeb.PageView do
   use ApexDashWeb, :view
+  import Phoenix.LiveView.Helpers
 end

apps/apex_dash/mix.exs

@@ -36,12 +36,15 @@ defmodule ApexDash.Mixfile do
   # Type `mix help deps` for examples and options.
   defp deps do
     [
-      {:phoenix, "~> 1.3.4"},
-      {:phoenix_pubsub, "~> 1.0"},
-      {:phoenix_html, "~> 2.10"},
-      {:phoenix_live_reload, "~> 1.0", only: :dev},
-      {:gettext, "~> 0.11"},
-      {:plug_cowboy, "~> 1.0"}
+      {:phoenix, "~> 1.5.1"},
+      {:phoenix_pubsub, "~> 2.0.0"},
+      {:phoenix_html, "~> 2.14.2"},
+      {:phoenix_live_reload, "~> 1.2.2", only: :dev},
+      {:gettext, "~> 0.18.0"},
+      {:plug_cowboy, "~> 2.2.1"},
+      #{:apex, in_umbrella: true},
+      {:phoenix_live_view, "~> 0.12.1"},
+      {:jason, "~> 1.2.1"}
     ]
   end
 end