Possible to use phoenix.js without brunch?

I’m trying to get channels to communicate with an Elixir/Phoenix server configured without Brunch. Reason for that is that I the client will probably be a mobile hybrid app (not served from a server). The other reason is that Javascript and I have never been friends so I don’t want to learn to use a packager for a platform that I don’t really know.

Basically, the only things I need to do is to open a socket, join a channel and then send updates or receive notifications.

I generated my server with --no-brunch. I modified user_socket.ex to have

...
## Channels
channel "user:*", TestApp2Web.UserChannel
...

and user_channel.ex looks like this:

defmodule TestApp2Web.UserChannel do
  use Phoenix.Channel
  require Logger
  
  def join("user:" <> token, params, socket) do
    Logger.debug("UserChannel.join(user:#{token}, params=#{inspect params}, socket")
    {:ok, socket}
  end

end

On the client side, I have included both phoenix.js and app.js in the app.html.eex file:

<script src="<%= static_path(@conn, "/js/phoenix.js") %>"></script>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

and I have the following content in app.js (this is not my target code but it’s more or less a copy and paste from the documentation on Channels):

var socket = null;
var channel = null;

socket = new Socket("/socket", {params: {token: "a token"}});
socket.connect();

channel = socket.channel("user:123", {abc: 123})
channel.join()
    .receive("ok", resp => { console.log("Joined successfully", resp) })
    .receive("error", resp => { console.log("Unable to join", resp) })

In browser’s console I get:

app.js:8 Uncaught ReferenceError: Socket is not defined
    at app.js:8

I also tried to import "./phoenix.js" in app.js but this doesn’t work as the assets are not packaged and transpiled (with brunch…).

All this probably comes from my poor knowledge of Javascript. I’m stuck since few days… Any help would be highly appreciated

1 Like

Since you’re not using a javascript thingerizer, try doing

socket = new Phoenix.Socket("/socket", {params: {token: "a token"}});

(make sure phoenix.js actually exists as well)

6 Likes

Grrr. Lost some days on this… Many thanks!