-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add phoenix channel/socket for desktop client
- Loading branch information
1 parent
6deb933
commit 4d4a5db
Showing
7 changed files
with
184 additions
and
43 deletions.
There are no files selected for viewing
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 |
---|---|---|
@@ -0,0 +1,64 @@ | ||
// NOTE: The contents of this file will only be executed if | ||
// you uncomment its entry in "assets/js/app.js". | ||
|
||
// Bring in Phoenix channels client library: | ||
import {Socket} from "phoenix" | ||
|
||
// And connect to the path in "lib/lanpartyseating_web/endpoint.ex". We pass the | ||
// token for authentication. Read below how it should be used. | ||
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/lanpartyseating_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/lanpartyseating_web/templates/layout/app.html.heex": | ||
// | ||
// <script>window.userToken = "<%= assigns[:user_token] %>";</script> | ||
// | ||
// You will need to verify the user token in the "connect/3" function | ||
// in "lib/lanpartyseating_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: 1_209_600) 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's assume you have a channel with a topic named `room` and the | ||
// subtopic is its id - in this case 42: | ||
let channel = socket.channel("room:42", {}) | ||
channel.join() | ||
.receive("ok", resp => { console.log("Joined successfully", resp) }) | ||
.receive("error", resp => { console.log("Unable to join", resp) }) | ||
|
||
export default socket |
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 |
---|---|---|
@@ -0,0 +1,13 @@ | ||
defmodule LanpartyseatingWeb.DesktopChannel do | ||
use Phoenix.Channel | ||
require Logger | ||
|
||
def join("desktop:all", _message, socket) do | ||
Logger.debug("Client joined desktop:all") | ||
{:ok, socket} | ||
end | ||
|
||
def join("desktop:" <> _hostname, _params, _socket) do | ||
{:error, %{reason: "unauthorized"}} | ||
end | ||
end |
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 |
---|---|---|
@@ -0,0 +1,56 @@ | ||
defmodule LanpartyseatingWeb.DesktopClientSocket do | ||
use Phoenix.Socket | ||
require Logger | ||
|
||
# A Socket handler | ||
# | ||
# It's possible to control the websocket connection and | ||
# assign values that can be accessed by your channel topics. | ||
|
||
## Channels | ||
# Uncomment the following line to define a "room:*" topic | ||
# pointing to the `LanpartyseatingWeb.RoomChannel`: | ||
# | ||
channel "desktop:*", LanpartyseatingWeb.DesktopChannel | ||
# | ||
# To create a channel file, use the mix task: | ||
# | ||
# mix phx.gen.channel Room | ||
# | ||
# See the [`Channels guide`](https://hexdocs.pm/phoenix/channels.html) | ||
# for further details. | ||
|
||
|
||
# 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 | ||
# the socket that will be set for all channels, ie | ||
# | ||
# {:ok, assign(socket, :user_id, verified_user_id)} | ||
# | ||
# To deny connection, return `:error` or `{:error, term}`. To control the | ||
# response the client receives in that case, [define an error handler in the | ||
# websocket | ||
# configuration](https://hexdocs.pm/phoenix/Phoenix.Endpoint.html#socket/3-websocket-configuration). | ||
# | ||
# See `Phoenix.Token` documentation for examples in | ||
# performing token verification on connect. | ||
@impl true | ||
def connect(_params, socket, _connect_info) do | ||
Logger.debug("Client connected to desktop socket") | ||
{:ok, socket} | ||
end | ||
|
||
# Socket id's are topics that allow you to identify all sockets for a given user: | ||
# | ||
# def id(socket), do: "user_socket:#{socket.assigns.user_id}" | ||
# | ||
# Would allow you to broadcast a "disconnect" event and terminate | ||
# all active sockets and channels for a given user: | ||
# | ||
# Elixir.LanpartyseatingWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{}) | ||
# | ||
# Returning `nil` makes this socket anonymous. | ||
@impl true | ||
def id(_socket), do: nil | ||
end |
This file was deleted.
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