-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reverted some frontend changes. Don't think they're needed.
- Loading branch information
Showing
4 changed files
with
61 additions
and
32 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,68 @@ | ||
| // 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" | ||
| // NOTE: The contents of this file will only be executed if | ||
| // you uncomment its entry in "assets/js/app.js". | ||
|
|
||
| // You can include dependencies in two ways. | ||
| // To use Phoenix channels, the first step is to import Socket, | ||
| // and connect at the socket path in "lib/web/endpoint.ex". | ||
| // | ||
| // The simplest option is to put them in assets/vendor and | ||
| // import them using relative paths: | ||
| // 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. | ||
| // | ||
| // import "../vendor/some-package.js" | ||
| // In your "lib/web/router.ex": | ||
| // | ||
| // Alternatively, you can `npm install some-package --prefix assets` and import | ||
| // them using a path starting with the package name: | ||
| // pipeline :browser do | ||
| // ... | ||
| // plug MyAuth | ||
| // plug :put_user_token | ||
| // end | ||
| // | ||
| // import "some-package" | ||
| // 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(); | ||
|
|
||
| // Include phoenix_html to handle method=PUT/DELETE in forms and buttons. | ||
| import "phoenix_html" | ||
| // Establish Phoenix Socket and LiveView configuration. | ||
| 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}}) | ||
|
|
||
| // connect if there are any LiveViews on the page | ||
| liveSocket.connect() | ||
| // Now that you are connected, you can join channels with a topic: | ||
| let channel = socket.channel("topic:subtopic", {}); | ||
| channel | ||
| .join() | ||
| .receive("ok", (resp) => { | ||
| console.log("Joined successfully", resp); | ||
| }) | ||
| .receive("error", (resp) => { | ||
| console.log("Unable to join", resp); | ||
| }); | ||
|
|
||
| // expose liveSocket on window for web console debug logs and latency simulation: | ||
| // >> liveSocket.enableDebug() | ||
| // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session | ||
| // >> liveSocket.disableLatencySim() | ||
| window.liveSocket = liveSocket | ||
| export default socket; |