Help with using Phoenix Channels on Angular 2 please

Hey, I’m still trying to figure my way around Angular 2 and Phoenix, I’ve a json resource called User, I get the users in my Angular 2 application, however I want to add a new user to the list everytime an user is inserted in the database.

I’ve created a user channel:

defmodule Kira.UserChannel do
  use Kira.Web, :channel

  def join("user:lobby", payload, socket) do
    if authorized?(payload) do
      {:ok, "Joined user:lobby", socket}
    else
      {:error, %{reason: "unauthorized"}}
    end
  end

  def handle_out(event, payload, socket) do
    push socket, event, payload
    {:noreply, socket}
  end
  
  def broadcast_user(user) do
    payload = %{
      "id" => user.id,
      "username" => user.username,
      "name" => user.name,
      "email" => user.name
    }
  
    Kira.Endpoint.broadcast("user:lobby", "user", payload)
  end

  defp authorized?(_payload) do
    true
  end
end

And everytime I create an user I broadcast it

def create(conn, %{"user" => user_params}) do
    changeset = User.changeset(%User{}, user_params)

    case Repo.insert(changeset) do
      {:ok, user} ->
        Kira.UserChannel.broadcast_user(user) # Here
        conn
        |> put_status(:created)
        |> put_resp_header("location", user_path(conn, :show, user))
        |> render("show.json", user: user)
      {:error, changeset} ->
        conn
        |> put_status(:unprocessable_entity)
        |> render(Kira.ChangesetView, "error.json", changeset: changeset)
    end
end

What I want to know is, how to join a channel in the Angular 2 side, I’ve been trying with javascript - How to use Phoenix Channels / Sockets in an Angular 2 app? - Stack Overflow but I get this

transport: connected to wss://elixir-oxyrus.c9users.io:8082/socket/websocket?vsn=1.0.0 undefined
push: phoenix heartbeat (3) Object {}
transport: close CloseEvent {wasClean: false, code: 1006, reason: “”, type: “close”, target: WebSocket…}

Thanks for your time!

Bumping this, I still need help!

I’m not sure I can directly help much, as I’m just getting into channels myself. But maybe some overall dialogue may help :thinking:

Have you been able to reproduce the minimal “hello world” channel configuration from the Phoenix Docs Channels page? This would definitely be my first step if you haven’t, since it looks like there are multiple moving parts with the Cloud9, Angular2, and Repo aspects.

I think there are few people using NG2 here and you might be the only one using c9, c9 does a lot of things on their end that could potentially interfere have you tried running it on your local box?

1 Like

Actually, the channels work perfectly on C9, I’ve used them with react before, but I’m not sure on how to join them on the angular side.

I should be able to copy the Javascript from node modules and just add them to the node modules in an angular project it you cannot npm install them. You may not be able to type it out with out the defined types but you could try making your own. Then import into an angular service.