Add Phoenix LiveView.

slashrsm · Mar 16, 2020 · 50709fd · 50709fd
1 parent ec10a35
commit 50709fd
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 8 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -1,3 +1,4 @@
 /* This file is for your main application css. */
 
 @import "./phoenix.css";
+@import "../../deps/phoenix_live_view/assets/css/live_view.css";
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -15,3 +15,10 @@ import "phoenix_html"
 //
 // Local files can be imported directly using relative paths, for example:
 // import socket from "./socket"
+
+import {Socket} from "phoenix"
+import LiveSocket from "phoenix_live_view"
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});
+liveSocket.connect()
diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/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/core": "^7.0.0",

diff --git a/config/config.exs b/config/config.exs
@@ -15,7 +15,10 @@ config :phoenix_auto_save, PhoenixAutoSaveWeb.Endpoint,
   url: [host: "localhost"],
   secret_key_base: "ZtlKBuH5weon1Ic0AdGZlYSPcQigivrAC9/Bq9JyxFsvH7VMRtrxAUo9EiPBInM5",
   render_errors: [view: PhoenixAutoSaveWeb.ErrorView, accepts: ~w(html json)],
-  pubsub: [name: PhoenixAutoSave.PubSub, adapter: Phoenix.PubSub.PG2]
+  pubsub: [name: PhoenixAutoSave.PubSub, adapter: Phoenix.PubSub.PG2],
+  live_view: [
+    signing_salt: "CjOUihuEulErfiDeBsqrJ3MKyiw/iW7A"
+  ]
 
 # Configures Elixir's Logger
 config :logger, :console,

diff --git a/lib/phoenix_auto_save_web.ex b/lib/phoenix_auto_save_web.ex
@@ -24,6 +24,7 @@ defmodule PhoenixAutoSaveWeb do
       import Plug.Conn
       import PhoenixAutoSaveWeb.Gettext
       alias PhoenixAutoSaveWeb.Router.Helpers, as: Routes
+      import Phoenix.LiveView.Controller
     end
   end
 
@@ -42,6 +43,7 @@ defmodule PhoenixAutoSaveWeb do
       import PhoenixAutoSaveWeb.ErrorHelpers
       import PhoenixAutoSaveWeb.Gettext
       alias PhoenixAutoSaveWeb.Router.Helpers, as: Routes
+      import Phoenix.LiveView.Helpers
     end
   end
 
@@ -50,6 +52,7 @@ defmodule PhoenixAutoSaveWeb do
       use Phoenix.Router
       import Plug.Conn
       import Phoenix.Controller
+      import Phoenix.LiveView.Router
     end
   end
 

diff --git a/lib/phoenix_auto_save_web/endpoint.ex b/lib/phoenix_auto_save_web/endpoint.ex
@@ -1,10 +1,19 @@
 defmodule PhoenixAutoSaveWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :phoenix_auto_save
 
+  @session_options [
+    store: :cookie,
+    key: "_phoenix_auto_save_key",
+    signing_salt: "2D5oGS79"
+  ]
+
   socket "/socket", PhoenixAutoSaveWeb.UserSocket,
     websocket: true,
     longpoll: false
 
+  socket "/live", Phoenix.LiveView.Socket,
+    websocket: [connect_info: [session: @session_options]]
+
   # Serve at "/" the static files from "priv/static" directory.
   #
   # You should set gzip to true if you are running phx.digest
@@ -37,10 +46,7 @@ defmodule PhoenixAutoSaveWeb.Endpoint do
   # The session will be stored in the cookie and signed,
   # this means its contents can be read but not tampered with.
   # Set :encryption_salt if you would also like to encrypt it.
-  plug Plug.Session,
-    store: :cookie,
-    key: "_phoenix_auto_save_key",
-    signing_salt: "2D5oGS79"
+  plug Plug.Session, @session_options
 
   plug PhoenixAutoSaveWeb.Router
 end
diff --git a/lib/phoenix_auto_save_web/router.ex b/lib/phoenix_auto_save_web/router.ex
@@ -4,7 +4,7 @@ defmodule PhoenixAutoSaveWeb.Router do
   pipeline :browser do
     plug :accepts, ["html"]
     plug :fetch_session
-    plug :fetch_flash
+    plug :fetch_live_flash
     plug :protect_from_forgery
     plug :put_secure_browser_headers
   end

diff --git a/lib/phoenix_auto_save_web/templates/layout/app.html.eex b/lib/phoenix_auto_save_web/templates/layout/app.html.eex
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>PhoenixAutoSave · Phoenix Framework</title>
+    <%= csrf_meta_tag() %>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
   </head>
   <body>

diff --git a/mix.exs b/mix.exs
@@ -42,7 +42,8 @@ defmodule PhoenixAutoSave.MixProject do
       {:phoenix_live_reload, "~> 1.2", only: :dev},
       {:gettext, "~> 0.11"},
       {:jason, "~> 1.0"},
-      {:plug_cowboy, "~> 2.0"}
+      {:plug_cowboy, "~> 2.0"},
+      {:phoenix_live_view, "~> 0.9.0"}
     ]
   end
 

diff --git a/mix.lock b/mix.lock
@@ -14,6 +14,7 @@
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.1.0", "a044d0756d0464c5a541b4a0bf4bcaf89bffcaf92468862408290682c73ae50d", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.9", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},
   "phoenix_html": {:hex, :phoenix_html, "2.14.0", "d8c6bc28acc8e65f8ea0080ee05aa13d912c8758699283b8d3427b655aabe284", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.2.1", "274a4b07c4adbdd7785d45a8b0bb57634d0b4f45b18d2c508b26c0344bd59b8f", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "0.9.0", "0bdf015b5748a7a0372b17654cccd7915ee562c6f5a6d9155c3864a9a8ecdc9c", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.4.15", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14", [hex: :phoenix_html, repo: "hexpm", optional: false]}], "hexpm"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "1.1.2", "496c303bdf1b2e98a9d26e89af5bba3ab487ba3a3735f74bf1f4064d2a845a3e", [:mix], [], "hexpm"},
   "plug": {:hex, :plug, "1.9.0", "8d7c4e26962283ff9f8f3347bd73838e2413fbc38b7bb5467d5924f68f3a5a4a", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm"},
   "plug_cowboy": {:hex, :plug_cowboy, "2.1.2", "8b0addb5908c5238fac38e442e81b6fcd32788eaa03246b4d55d147c47c5805e", [:mix], [{:cowboy, "~> 2.5", [hex: :cowboy, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},