Unable to set up a Phoenix Channel on an existing project

Phoenix Forum Questions / Help
,
1

Good day,

I am trying to setup channels on an existing project but to no avail. No error logged nor raised.
I have the below in place

mix.exs

      {:phoenix, "~> 1.4.11"},
      {:phoenix_pubsub, "~> 1.1"},
      {:phoenix_ecto, "~> 4.0"},
      {:ecto_sql, "~> 3.1"},
      {:tds, "~> 2.1.1"},
      {:phoenix_html, "~> 2.11"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},

app.js

import "phoenix_html"
import socket from "./socket.js"

socket.js

import {Socket} from "phoenix"

let socket = new Socket("/socket", {params: {token: window.userToken},logger: (kind, msg, data) => (
  console.log(`${kind}: ${msg}`, data)
)})

and

socket.connect()

// Now that you are connected, you can join channels with a topic:
let channel = socket.channel("room:lobby", {})
channel.join()
  .receive("ok", resp => { console.log("Joined successfully", resp) })
  .receive("error", resp => { console.log("Unable to join", resp) })

export default socket

user_socket.js

channel "room:*", MyAppWeb.RoomChannel

However, even after following the documentation, the existing project doesnt respond to join the channel.

2

Can you show your endpoint.ex?

3

endpoint.ex

socket "/socket", MyAppWeb.UserSocket,
    websocket: true,
    longpoll: false
  
  socket "/live", Phoenix.LiveView.Socket
4

Resolved, following the highlighted configs, the app.js file in priv/static/js/app.js needed to be imported in the layout files. i.e layout/*.html.eex depending on how many layouts you have.

1 Like
5

I am using Phoenix v1.6.6 and can’t get a channel to open following the guide in the current docs. I am following this exactly: https://hexdocs.pm/phoenix/channels.html#content

When I get to the step where is says to import socket from “./user_socket” in the file user_socket.js, the doc say that the browser console should say “Joined successfully”. This doesn’t happen. I logged out the variable socket and it shows that the channel has a state of errored. So the channel is not open.

Does anyone know of a updated guide to how to implement channels in Phoenix 1.6? I’ve looked at the book Programming Phoenix 1.4+ and it not helpful.

6

Have you called your app.js onto the templates?

7

Just to note that the Real Time Phoenix book was published in March 2020 so may be more uptodate. The source code for it can be downloaded on the Pragmatic Programmer website.

8

There’s also this example in Phoenix 1.5 that I by coincidence got working today. It’s in Elixir 1.10 so I plan to rebuild it in Elixir 1.13 and Phoenix 1.6 in the coming days to test Elm inter-op over channels.

9

Thanks, I’ll check those out.

10

Also, I wanted to ask if the current version requires that a token be available. That’s not included in the tutorials I’ve seen, but I’m seeing a token included as a parameter when socket is defined in the user_socket.js file:
let socket = new Socket("/socket", {params: {token: window.userToken}})
or is there a way to open a channel without it?

11

OK, I got a channel open and joined. The examples I was following used very different code in the appName_channel.ex file, including the “join” function. When I stuck to the boilerplate as closely as possible, it worked.
The token was part of the issue. An undefined token is sent to the join function, but in the boilerplate it is ignored by including a function authorized?:

defp authorized?(_payload) do
  true
end

This allows anyone to join the channel whether they have a token or not.