Where is Phoenix.js and how to get it working on my browser?

Phoenix Forum Questions / Help
1

I have an existing website shown in the code below. The Phoenix server is up and running and I can get a basic connection using new WebSocket(). However, I need to load up phoenix.js on the client side in order to use built-in Phoenix features like new Socket() where I can pass parameters to phoenix user socket connection

Path: /home/username/mysite.com/test.php

<html>
<body>
<div>test phoenix socket connection</div>

<script src='[path to phoenix.js ???]'></script>
<script>
window.userToken = "<?php echo $_COOKIE['token']; ?>";
let socket = new Socket("wss://ex.mysite.com/socket", {params: {token: window.userToken}});
</script>

</body>
</html>

Where is the phoenix.js file located and how do I get it loaded up in the client browser? Note that the HTML will not be loaded from phoenix, but is already loaded through Nginx.

During my earlier practicing, I believe my “client side” app was built in /assets/js/app.js and /assets/js/socket.js. After getting more experience, it sounds like I need to move this over to my Dreamweaver editor where I normally build my client-side JS/HTML apps and just build the phoenix stuff on the shell.

Basically, I have Phoenix installed on the server on this path:
/home/username/app

My website is installed on:
/home/username/mywebsite.com

It sounds like I will probably be building my javascript client side app.js, which interacts with the Phoenix server in:
/home/username/mywebsite.com/app-client

What do I need to do to get phoenix.js and the rest of the client side phoenix features running there? Is phoenix.js supposed to go inside the web directory? Do I just go to a CDN like this phoenix CDN by jsDelivr - A free, fast, and reliable Open Source CDN , and copy/paste all of that into my app web directory?

Edit: Or am I supposed to use the Plug/Router to call up the phoenix.js within the backend server/app directory, wherever the JavaScript stuff is located?

Thanks

2

Hi @peppy are you trying to connect to Phoenix channels from a PHP website?

https://www.npmjs.com/package/phoenix has the phoenix.js as an NPM package but if you want to use it from a <script src you can probably just use the unpckg link

<script src='https://www.unpkg.com/phoenix@1.7.7/priv/static/phoenix.min.js'></script>
1 Like
3

Exactly, I’m trying to connect to the Phoenix channels from a PHP site.

I tried doing that earlier, adding that link to the script:

<html>

<body>
<script src='https://www.unpkg.com/phoenix@1.7.7/priv/static/phoenix.min.js'></script>

<script>
window.userToken = "<?php echo $_COOKIE['anon']; ?>";
let socket = new Socket("wss://ex.mysite.com/socket/websocket", {params: {token: window.userToken}});
</script>

</body>
</html>

But I get this error:

Uncaught ReferenceError: Socket is not defined

I also tried doing:
let socket = new Phoenix.Socket("wss://ex.mysite.com/socket/websocket", {params: {token: window.userToken}});

But the function doesn’t even run - nothing is attempted to be sent, no errors, nothing. I’m not seeing anything happening on the phoenix side in the logs after I fire up the Phoenix server.

4

I think window.Phoenix.Socket would work, reading this article. Though I am suspicious of the no-errors, maybe it isn’t needed.

I would console log a socket.isConnected() to make sure both the instantiation and the handshake is happening.

2 Likes
5

We place Phoenix.Socket on the global namespace so new Phoenix.Socket(…) will work

6 Likes
6

I must be doing something wrong, it’s still not working. This is my entire HTML test page below, it’s as simple as it gets:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src='https://www.unpkg.com/phoenix@1.7.7/priv/static/phoenix.min.js'></script>
</head>

<body>
<script>
window.onload = function() {
  let socket = new Phoenix.Socket("wss://ex.mysite.com/socket");
  console.log(socket.isConnected());   // prints: false
}
</script>
</body>
</html>

I tested this in Chrome, Microsoft Edge, Firefox, tested the script on a different domain name, cleared the cache and restarted the computer… The Chrome dev tools is showing no network activity for the socket connection, so no connection attempt is being made. Even if my Phoenix server configs are messed up, I’d think the JS would still trigger an error, or at least do something when the page loads.

The most logical conclusion is there is an imp in my computer and it needs to be exorcised. Either that or a “stupid me” error that I’m not seeing at the moment.

7

Hi @peppy you are missing the line from the article that calls socket.connect()

2 Likes
8

That’s it! It was “stupid me” mistake.

Unfortunately, I was following a different guide that had a variety of Phoenix JS functions, but was missing that one line. My fault for skimming over that other article too quickly.

Thanks for your time and help everyone.

1 Like