Co-authored-by: Stamates <stamates@hotmail.com> Co-authored-by: Tim Mecklem <timothy@mecklem.com>pull/333/head
Tim Mecklem
7 years ago
committed by
jimmay5469
parent
56b6010d60
commit
5041f8fa2c
@ -1,62 +1,21 @@ |
||||
// NOTE: The contents of this file will only be executed if
|
||||
// you uncomment its entry in "assets/js/app.js".
|
||||
|
||||
// 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 $ from 'jquery' |
||||
|
||||
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/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/web/templates/layout/app.html.eex":
|
||||
//
|
||||
// <script>window.userToken = "<%= assigns[:user_token] %>";</script>
|
||||
//
|
||||
// You will need to verify the user token in the "connect/2" function
|
||||
// in "lib/web/channels/user_socket.ex":
|
||||
//
|
||||
// def connect(%{"token" => token}, socket) 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, pass the token on connect as below. Or remove it
|
||||
// from connect if you don't care about authentication.
|
||||
|
||||
let socket = new Socket('/socket', {params: {locale: window.locale}}) |
||||
socket.connect() |
||||
|
||||
// Now that you are connected, you can join channels with a topic:
|
||||
let channel = socket.channel('topic:subtopic', {}) |
||||
|
||||
|
||||
|
||||
|
||||
// addresses channel
|
||||
let channel = socket.channel(`addresses:${window.addressHash}`, {}) |
||||
channel.join() |
||||
.receive('ok', resp => { console.log('Joined successfully', resp) }) |
||||
.receive('error', resp => { console.log('Unable to join', resp) }) |
||||
|
||||
channel.on('transaction', (msg) => { |
||||
$('[data-selector="transactions-list"]').prepend(msg.transaction) |
||||
}) |
||||
|
||||
export default socket |
||||
|
||||
@ -0,0 +1,15 @@ |
||||
defmodule ExplorerWeb.AddressChannel do |
||||
use ExplorerWeb, :channel |
||||
|
||||
intercept ["transaction"] |
||||
|
||||
def join("addresses:" <> _address_hash, _params, socket) do |
||||
{:ok, %{}, socket} |
||||
end |
||||
|
||||
def handle_out("transaction", %{transaction: transaction}, socket) do |
||||
rendered = Phoenix.View.render_to_string(ExplorerWeb.AddressTransactionView, "_transaction.html", locale: socket.assigns.locale, transaction: transaction) |
||||
push socket, "transaction", %{transaction: rendered} |
||||
{:noreply, socket} |
||||
end |
||||
end |
||||
@ -1,35 +1,14 @@ |
||||
defmodule ExplorerWeb.UserSocket do |
||||
use Phoenix.Socket |
||||
|
||||
# channel "room:*", ExplorerWeb.RoomChannel |
||||
channel "addresses:*", ExplorerWeb.AddressChannel |
||||
|
||||
transport(:websocket, Phoenix.Transports.WebSocket, timeout: 45_000) |
||||
# 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 |
||||
# the socket that will be set for all channels, ie |
||||
# |
||||
# {:ok, assign(socket, :user_id, verified_user_id)} |
||||
# |
||||
# To deny connection, return `:error`. |
||||
# |
||||
# See `Phoenix.Token` documentation for examples in |
||||
# performing token verification on connect. |
||||
def connect(_params, socket) do |
||||
{:ok, socket} |
||||
def connect(%{"locale" => locale}, socket) do |
||||
{:ok, assign(socket, :locale, locale)} |
||||
end |
||||
|
||||
# Socket ids are topics that allow you to identify all sockets for a 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: |
||||
# |
||||
# ExplorerWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{}) |
||||
# |
||||
# Returning `nil` makes this socket anonymous. |
||||
def id(_socket), do: nil |
||||
end |
||||
|
||||
@ -0,0 +1,35 @@ |
||||
<tr> |
||||
<td><div class="transaction__dot transaction__dot--<%= status(@transaction) %>"></div></td> |
||||
<td> |
||||
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction: @transaction %> |
||||
</td> |
||||
<td> |
||||
<%= link( |
||||
@transaction.block, |
||||
to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block) |
||||
) %> |
||||
</td> |
||||
<td><%= @transaction.block.timestamp |> Timex.from_now %></td> |
||||
<td class="address-cell"> |
||||
<%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: @transaction.from_address %> |
||||
</td> |
||||
<td class="u-text-center"><i class="fas fa-arrow-circle-right"></i></td> |
||||
<td> |
||||
<%= cond do %> |
||||
<% @transaction.to_address_hash != nil -> %> |
||||
<%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: @transaction.to_address %> |
||||
<% @transaction.created_contract_address_hash != nil -> %> |
||||
<i class="fas fa-plus-square"></i> |
||||
<%= link( |
||||
"Contract Creation", |
||||
class: "transaction__link", |
||||
"data-address-hash": @transaction.created_contract_address_hash, |
||||
to: address_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.created_contract_address_hash), |
||||
title: @transaction.created_contract_address_hash |
||||
) %> |
||||
<% true -> %> |
||||
<% end %> |
||||
</td> |
||||
<td><%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %></td> |
||||
<td><%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %></td> |
||||
</tr> |
||||
Loading…
Reference in new issue