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:

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.