From 09693b979efe3c9c7ea64f79d97a1f0b53f7c49e Mon Sep 17 00:00:00 2001 From: Melonai Date: Sat, 8 May 2021 23:41:03 +0200 Subject: Socket connection and token fetching --- assets/package.json | 1 + assets/src/App.svelte | 14 ----------- assets/src/components/DataPicker.svelte | 14 +++++++++++ assets/src/components/IncomingRequests.svelte | 20 ++++++++++++++++ assets/src/components/Share.svelte | 20 ++++++++++++++++ assets/src/entries/request.ts | 11 ++------- assets/src/entries/share.ts | 12 ++++------ assets/src/globals.d.ts | 1 - assets/src/network/socket.ts | 33 ++++++++++++++++++++++++++ assets/src/stores/data.ts | 21 ++++++++++++++++ assets/src/stores/requests.ts | 12 ++++++++++ assets/yarn.lock | 5 ++++ lib/rook_web/channels/share_channel.ex | 11 +++++++++ lib/rook_web/channels/token_channel.ex | 11 +++++++++ lib/rook_web/channels/user_socket.ex | 6 +++-- lib/rook_web/controllers/app_controller.ex | 10 -------- lib/rook_web/templates/app/entrypoint.html.eex | 1 - lib/rook_web/templates/app/request.html.eex | 2 +- lib/rook_web/templates/app/share.html.eex | 2 +- lib/rook_web/templates/home/index.html.eex | 2 +- lib/rook_web/views/app_view.ex | 4 ++-- 21 files changed, 164 insertions(+), 49 deletions(-) delete mode 100644 assets/src/App.svelte create mode 100644 assets/src/components/DataPicker.svelte create mode 100644 assets/src/components/IncomingRequests.svelte create mode 100644 assets/src/components/Share.svelte delete mode 100644 assets/src/globals.d.ts create mode 100644 assets/src/network/socket.ts create mode 100644 assets/src/stores/data.ts create mode 100644 assets/src/stores/requests.ts create mode 100644 lib/rook_web/channels/share_channel.ex create mode 100644 lib/rook_web/channels/token_channel.ex diff --git a/assets/package.json b/assets/package.json index 656f02c..fc96ba7 100644 --- a/assets/package.json +++ b/assets/package.json @@ -12,6 +12,7 @@ "@rollup/plugin-node-resolve": "^11.0.0", "@rollup/plugin-typescript": "^8.0.0", "@tsconfig/svelte": "^1.0.0", + "@types/phoenix": "^1.5.1", "rollup": "^2.3.4", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-css-only": "^3.1.0", diff --git a/assets/src/App.svelte b/assets/src/App.svelte deleted file mode 100644 index 27c0c68..0000000 --- a/assets/src/App.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - -
-

Hello from {name}!

-

Your token is {window.token}.

-
- - diff --git a/assets/src/components/DataPicker.svelte b/assets/src/components/DataPicker.svelte new file mode 100644 index 0000000..433018d --- /dev/null +++ b/assets/src/components/DataPicker.svelte @@ -0,0 +1,14 @@ + + +
+ + +
diff --git a/assets/src/components/IncomingRequests.svelte b/assets/src/components/IncomingRequests.svelte new file mode 100644 index 0000000..1db50af --- /dev/null +++ b/assets/src/components/IncomingRequests.svelte @@ -0,0 +1,20 @@ + + +{#await startConnection()} +

Fetching token...

+{:then token} +

Your token is {token}.

+ + {#each $requests as request} +

{JSON.stringify(request)}

+ {/each} +{/await} diff --git a/assets/src/components/Share.svelte b/assets/src/components/Share.svelte new file mode 100644 index 0000000..5ea55b2 --- /dev/null +++ b/assets/src/components/Share.svelte @@ -0,0 +1,20 @@ + + +
+

Sharing

+ {#if !$data.locked} + + {:else} + + {/if} +
+ + diff --git a/assets/src/entries/request.ts b/assets/src/entries/request.ts index 2461768..0d064a2 100644 --- a/assets/src/entries/request.ts +++ b/assets/src/entries/request.ts @@ -1,10 +1,3 @@ -import App from '../App.svelte'; +// Request -const app = new App({ - target: document.getElementById("app"), - props: { - name: 'request' - } -}); - -export default app; \ No newline at end of file +export {}; diff --git a/assets/src/entries/share.ts b/assets/src/entries/share.ts index 7527a53..d0279f1 100644 --- a/assets/src/entries/share.ts +++ b/assets/src/entries/share.ts @@ -1,10 +1,8 @@ -import App from '../App.svelte'; +import Share from "../components/Share.svelte"; -const app = new App({ - target: document.getElementById("app"), - props: { - name: 'share' - } +const app = new Share({ + target: document.getElementById("app"), + props: {}, }); -export default app; \ No newline at end of file +export default app; diff --git a/assets/src/globals.d.ts b/assets/src/globals.d.ts deleted file mode 100644 index 996ffe5..0000000 --- a/assets/src/globals.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare var token: string; \ No newline at end of file diff --git a/assets/src/network/socket.ts b/assets/src/network/socket.ts new file mode 100644 index 0000000..c056b41 --- /dev/null +++ b/assets/src/network/socket.ts @@ -0,0 +1,33 @@ +import { Socket } from "phoenix"; +import requests from "../stores/requests"; + +let socket = new Socket("/socket", {}); +socket.connect(); + +export const getToken: () => Promise = () => { + let tokenChannel = socket.channel("token", {}); + return new Promise((resolve, reject) => { + tokenChannel + .join() + .receive("ok", () => { + tokenChannel + .push("get_token", {}, 5000) + .receive("ok", ({ token }) => resolve(token)) + .receive("error", err => reject(err)) + .receive("timeout", err => reject(err)); + }) + .receive("error", err => reject(err)); + }); +}; + +export const joinShareChannel = token => { + let shareChannel = socket.channel(`share:${token}`); + + shareChannel.on("request", requests.addRequest); + + shareChannel + .join() + .receive("error", err => + console.log("failed joining share channel:" + err) + ); +}; diff --git a/assets/src/stores/data.ts b/assets/src/stores/data.ts new file mode 100644 index 0000000..d59183c --- /dev/null +++ b/assets/src/stores/data.ts @@ -0,0 +1,21 @@ +import { writable } from "svelte/store"; + +const createDataStore = () => { + const { subscribe, update } = writable({ locked: false, data: null }); + + return { + subscribe, + set: data => { + update(state => { + if (!state.locked) { + return { locked: true, data }; + } else { + console.error("Tried setting data after locking."); + return state; + } + }); + }, + }; +}; + +export default createDataStore(); diff --git a/assets/src/stores/requests.ts b/assets/src/stores/requests.ts new file mode 100644 index 0000000..e80eb2b --- /dev/null +++ b/assets/src/stores/requests.ts @@ -0,0 +1,12 @@ +import { writable } from "svelte/store"; + +const createRequestStore = () => { + const { subscribe, update } = writable([]); + + return { + subscribe, + addRequest: request => update(state => [request, ...state]), + }; +}; + +export default createRequestStore(); diff --git a/assets/yarn.lock b/assets/yarn.lock index e373b5e..9e66b6b 100644 --- a/assets/yarn.lock +++ b/assets/yarn.lock @@ -134,6 +134,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-15.0.2.tgz#51e9c0920d1b45936ea04341aa3e2e58d339fb67" integrity sha512-p68+a+KoxpoB47015IeYZYRrdqMUcpbK8re/zpFB8Ld46LHC1lPEbp3EXgkEhAYEcPvjJF6ZO+869SQ0aH1dcA== +"@types/phoenix@^1.5.1": + version "1.5.1" + resolved "https://registry.yarnpkg.com/@types/phoenix/-/phoenix-1.5.1.tgz#1cee8eda69ca5b2eff48f0fe1833d9716a17fec2" + integrity sha512-VPVQAOffPXztCAoLKTjSM+NqhD1gWow3XHF01gdLPeIWEQakoFjg5uGokq8BnX7KM00PWN1XnX5d4FMSxlVv3w== + "@types/pug@^2.0.4": version "2.0.4" resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2" diff --git a/lib/rook_web/channels/share_channel.ex b/lib/rook_web/channels/share_channel.ex new file mode 100644 index 0000000..fde0096 --- /dev/null +++ b/lib/rook_web/channels/share_channel.ex @@ -0,0 +1,11 @@ +defmodule RookWeb.ShareChannel do + use Phoenix.Channel + + def join("share:" <> token, _params, socket) do + if token == socket.assigns[:token] do + {:ok, socket} + else + {:error, %{reason: "Wrong token."}} + end + end +end diff --git a/lib/rook_web/channels/token_channel.ex b/lib/rook_web/channels/token_channel.ex new file mode 100644 index 0000000..72cabb1 --- /dev/null +++ b/lib/rook_web/channels/token_channel.ex @@ -0,0 +1,11 @@ +defmodule RookWeb.TokenChannel do + use Phoenix.Channel + + def join("token", _params, socket) do + {:ok, socket} + end + + def handle_in("get_token", _attrs, socket) do + {:reply, {:ok, %{token: socket.assigns[:token]}}, socket} + end +end diff --git a/lib/rook_web/channels/user_socket.ex b/lib/rook_web/channels/user_socket.ex index 66637af..a036c4a 100644 --- a/lib/rook_web/channels/user_socket.ex +++ b/lib/rook_web/channels/user_socket.ex @@ -2,7 +2,8 @@ defmodule RookWeb.UserSocket do use Phoenix.Socket ## Channels - # channel "room:*", RookWeb.RoomChannel + channel "token", RookWeb.TokenChannel + channel "share:*", RookWeb.ShareChannel # Socket params are passed from the client and can # be used to verify and authenticate a user. After @@ -17,7 +18,8 @@ defmodule RookWeb.UserSocket do # performing token verification on connect. @impl true def connect(_params, socket, _connect_info) do - {:ok, socket} + token = Rook.Utils.Token.token() + {:ok, assign(socket, :token, token)} end # Socket id's are topics that allow you to identify all sockets for a given user: diff --git a/lib/rook_web/controllers/app_controller.ex b/lib/rook_web/controllers/app_controller.ex index 4c36fda..9e36f3c 100644 --- a/lib/rook_web/controllers/app_controller.ex +++ b/lib/rook_web/controllers/app_controller.ex @@ -1,8 +1,6 @@ defmodule RookWeb.AppController do use RookWeb, :controller - plug :add_token - def share(conn, _params) do render(conn, "share.html") end @@ -10,12 +8,4 @@ defmodule RookWeb.AppController do def request(conn, _params) do render(conn, "request.html") end - - defp add_token(conn, _params) do - if conn.assigns[:token] do - conn - else - assign(conn, :token, Rook.Utils.Token.token()) - end - end end diff --git a/lib/rook_web/templates/app/entrypoint.html.eex b/lib/rook_web/templates/app/entrypoint.html.eex index bc7e84a..7551fdc 100644 --- a/lib/rook_web/templates/app/entrypoint.html.eex +++ b/lib/rook_web/templates/app/entrypoint.html.eex @@ -1,5 +1,4 @@ "/> -
diff --git a/lib/rook_web/templates/app/request.html.eex b/lib/rook_web/templates/app/request.html.eex index c09a843..b7ff7bd 100644 --- a/lib/rook_web/templates/app/request.html.eex +++ b/lib/rook_web/templates/app/request.html.eex @@ -1 +1 @@ -<%= render_app(@conn, @token, "request") %> +<%= render_app(@conn, "request") %> diff --git a/lib/rook_web/templates/app/share.html.eex b/lib/rook_web/templates/app/share.html.eex index d72b2c4..95b8b08 100644 --- a/lib/rook_web/templates/app/share.html.eex +++ b/lib/rook_web/templates/app/share.html.eex @@ -1 +1 @@ -<%= render_app(@conn, @token, "share") %> +<%= render_app(@conn, "share") %> diff --git a/lib/rook_web/templates/home/index.html.eex b/lib/rook_web/templates/home/index.html.eex index 9152474..0b82f07 100644 --- a/lib/rook_web/templates/home/index.html.eex +++ b/lib/rook_web/templates/home/index.html.eex @@ -1 +1 @@ -

Hi! Welcome to Walmart.

+<%= link "Share", to: Routes.app_path(RookWeb.Endpoint, :share)%> diff --git a/lib/rook_web/views/app_view.ex b/lib/rook_web/views/app_view.ex index 66c7f6a..31f1d0a 100644 --- a/lib/rook_web/views/app_view.ex +++ b/lib/rook_web/views/app_view.ex @@ -1,7 +1,7 @@ defmodule RookWeb.AppView do use RookWeb, :view - def render_app(conn, token, entrypoint) do - render("entrypoint.html", conn: conn, token: token, entrypoint: entrypoint) + def render_app(conn, entrypoint) do + render("entrypoint.html", conn: conn, entrypoint: entrypoint) end end -- cgit 1.4.1