Dynamic subscriptions on server events

favetelinguis

I have a bunch of IOT devices generating event to my Elixir app. Each IOT device has its own topic/channel in Hub. What I would like to build is a monitor GUI where I have a list of all the IOT devices I can click and then I subscribe on all events from that device, I can click on another device and then I should unsubscribe from the old device and subscribe to the clicked device. I see Drab as a perfect fit for this but im not able to get it to work and im not sure what is the best way to design my code for this use case. This is what I have so far.

defmodule BfgWebWeb.PageController do
  use BfgWebWeb, :controller

  def index(conn, _params) do
    market_ids = BfgEngine.MarketsServer.list_market_ids()
    render conn, "index.html", market_ids: market_ids, genevent: ""
  end

end

defmodule BfgWebWeb.PageCommander do
  use Drab.Commander
  require Hub
  require Logger
  # onconnect :connected

  defhandler subscribe_market(socket, _sender, market_id) when is_float(market_id) do
    market_id = Float.to_string(market_id)
    Logger.debug("Change subscription to #{market_id} is it string #{is_binary(market_id)}")
    # TODO where can I save this sub so that I can use it to unsubscribe later Hub.unsubscribe(sub)
    sub = Hub.subscribe(market_id, _)
    handle_event(socket)
  end

  # def connected(socket) do
  #   sub = Hub.subscribe("market_id", _)
  #   Logger.debug("Connected and subscribed to market_id #{inspect sub}")
  #   handle_event(socket)
  # end

  defp handle_event(socket) do
    receive do
      msg  ->
        Logger.warn("Got msg #{inspect msg}")
      {:ok, events} = Drab.Live.peek(socket, :genevent)
      socket
      |> poke(genevent: inspect(msg) <> "\n" <> events)
    end
    handle_event(socket)
  end
end

<div class="page-header">
  <h1>Select market</h1>
  <div class="btn-group" role="group" aria-label="...">
    <%= for market_id <- @market_ids do %>
      <button type="button" class="btn btn-default" drab-click="subscribe_market(<%= market_id %>)"><%= market_id %></button>
    <% end %>
  </div>
  <pre><code class="accesslog"><%= @genevent %></code></pre>
</div>

My app is starting and im getting no errors but im getting no messages. There are some issues I need to solve here:

Get this example working.
When I hit another button I should unsubscribe from the old subscription.
I should only be able to have one subscription going at any one time.

Any ideas on design/bug hunt of this would be much appreciated.

11 comments

/phoenix #drab #troubleshooting

0 1517 11

2018-08-02 22:14:19 UTC

First 10 of 11 Posts

grych

Creator of Drab

That could be a tricky part. Are “market_ids” float? Actually I’ve never tested handlers with guards. I am using apply/3 to run the handler. Hmm, need to try it.

Could you please remove the guard and paste the exact output? Is it showing “Change subscripiton to …” in the logs?

Post #1

favetelinguis

Even with guard im getting the correct log message:

[info] GET /
[debug] Processing with BfgWebWeb.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 26ms
[info] JOIN "__drab:same_path:/" to Drab.Channel
  Transport:  Phoenix.Transports.WebSocket (2.0.0)
  Serializer:  Phoenix.Transports.V2.WebSocketSerializer
  Parameters: %{}
[info] Replied __drab:same_path:/ :ok
[debug] INCOMING "onconnect" on "__drab:same_path:/" to Drab.Channel
  Transport:  Phoenix.Transports.WebSocket
  Parameters: %{"drab_session_token" => "QTEyOEdDTQ.V52UblCTMHHT5fNvg_YDMfpbRDAaCPUqrsgt3yDt4Fzze5U6kmH45tH1iYQ.zGm4QLIPbxhZZsHq.1tgAwWaK.MTK0D7gL5i-k1Rq9wO1GJg", "payload" => %{"csrf_token" => nil, "drab_index" => "ge4dgmbwgiztsmbr"}}
[debug] INCOMING "onload" on "__drab:same_path:/" to Drab.Channel
  Transport:  Phoenix.Transports.WebSocket
  Parameters: %{"payload" => %{"csrf_token" => nil, "drab_index" => "ge4dgmbwgiztsmbr"}}
[debug] INCOMING "event" on "__drab:same_path:/" to Drab.Channel
  Transport:  Phoenix.Transports.WebSocket
  Parameters: %{"event_handler_function" => "subscribe_market", "payload" => %{"__additional_argument" => 1.14630004, "class" => "btn btn-default", "classes" => %{"0" => "btn", "1" => "btn-default"}, "csrf_token" => nil, "dataset" => %{}, "drab_id" => "d0", "drab_index" => "ge4dgmbwgiztsmbr", "event" => %{"altKey" => false, "clientX" => 139, "clientY" => 105, "metaKey" => false, "offsetX" => 67, "offsetY" => 16, "pageX" => 139, "pageY" => 105, "screenX" => 133, "screenY" => 225, "shiftKey" => false, "type" => "click", "which" => 1}, "form" => %{}, "html" => "1.146300040", "id" => "", "name" => "", "text" =>"1.146300040", "value" => ""}, "reply_to" => "d3"}
[debug] Change subscription to 1.14630004 is it string true

Post #2

grych

Creator of Drab

So, from the Drab point-of-view everything works, you have “change subscription to ..” message. I understand that everything after Hub.subscript does not work.

I would suggest checking what is returned by Hub.subscribe. I understand it subscribes something to self(), which is received later. You may try to debug it in iex, without phoenix or drab involved.

Post #3

favetelinguis

I have Hub working in my core application. Im just trying to get the GUI layer working now.

How would you suggest I can switch subscriptions? To do that I ned to save the sub returned by Hub.subscribe and the second problem is to cancel the one long running process I start when I hit a button and to start another one.

Post #4

favetelinguis

So I found the bug but not sure what to do about it, this is the issue:

"__additional_argument" => 1.14630004
"text" =>"1.146300040", "html" => "1.146300040"

This is wrong:
[debug] Change subscription to 1.14630004 is it string true

It should say:
[debug] Change subscription to 1.146300040 is it string true
But the additional argument cuts off, not sure what is going on since the argument shown in the button is the right on but the additional argument is one digit short.

Post #5

grych

Creator of Drab

In your model, you start the handler function and do a receive forever. Fair enough, but to cancel this from the other process, you need to store the pid somewhere, and send the cancel message to it, or just kill it.
Sorry, but without the knowledge of Hub I can’t tell more. Maybe it already got the unsubscribe api?

Post #6

favetelinguis

So am I understanding correct if I say drab is starting a new process (GenServer?) for each call I make to any defhandler, and self() would be the pid of the process this call as spawned?

Post #7

grych

Creator of Drab

Welcome to the float hell. This is why you should never use floats in non-scientific applications Especially when inter-operating between different languages.

I would suggest that you should send string to the backend, so instead of:

    <%= for market_id <- @market_ids do %>
      <button type="button" class="btn btn-default" drab-click="subscribe_market(<%= market_id %>)"><%= market_id %></button>
    <% end %>

do:

    <%= for market_id <- @market_ids do %>
      <button type="button" class="btn btn-default" drab-click="subscribe_market('<%= market_id %>')"><%= market_id %></button>
    <% end %>

Or multiple it by 10000000 and use integer.

That would save you a lot of sleepless nights