Dynamic subscriptions on server events

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: ""

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, _)

  # 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)
      |> poke(genevent: inspect(msg) <> "\n" <> events)
<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 %>
  <pre><code class="accesslog"><%= @genevent %></code></pre>

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

  1. Get this example working.
  2. When I hit another button I should unsubscribe from the old subscription.
  3. 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.

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?

1 Like

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
1 Like

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.

1 Like

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.

1 Like

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.

1 Like

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?

1 Like

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?

1 Like

Welcome to the float hell. This is why you should never use floats in non-scientific applications :wink: 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 %>


    <%= 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 :wink:

But the only real solution is to not to use floats. Never ever.


True. Each handler runs in it’s own process. Otherwise you could push the only 1 button on the page in the same time :slight_smile:

Then its clear to me what I need to do :slight_smile: Thanks for the help!

Btw, The float is treated as a string in every place except here, somehow it gets infered as a float in the client.


This is because Drab is a kind of interoperability stuff between browser and server.

I’ve been thinking about casting everything as string, it would be easier to implement, but we would loose quite essential information about the type.

Now, you can pass the argument to the handler as any valid, JSONable javascript, so if you do drab-click="subscribe_market([1, 2, 3])" you’ll get an Elixir list in you handler.

Vice versa, if you set the object property with set_prop(socket, "#myelem", property: [1, 2, 3]) you expect that document.getElementById("myelem").property == [1, 2, 3]. An array, not a string “[1,2,3]”.

That was my understanding when I implement this.