Phoenix socket via vanilla JavaScript and Python WS lib

Hey all. Some days back, i was introduced an Websocket API which was built on Phoenix socket. I was playing around with it using vanilla websocket lib in Python. In short, i understood that, i can use/join and send messages from this Python websocket lib which make sense since end of the day, its WS.

The steps were like this;

  • Connect to the socket
  • Send joinchannel request
  • If channel exists, join
  • upon join, send heartbear in every minute.
    This is how the API works when i goto the API via webbrowser. So this is what i manully did from my python websocket code.

Now i’m thinking if i can do the same from a javascript code without any frameworks/packages but just using vanilla Js to join the channel and send the heartbeat. I saw this article phoenix 1.6.15 | Documentation which says it’s Javascript but i’m little confused if it’s using the phoenix package or lib (like a CDN install).
So the question is simply, can i use vanilla Js code to join a phoenix channel, receive messages and send heartbeat? if so, that’d be amazing, Since i did the same in vanilla websocket lib in python, i believe we can do the same in JS, but just wanna know if there’s a preffered way.
thanks.

Yes you can, just like in Python, by implementing the API yourself. But why do that? The phoenix.js Socket client is included with Phoenix or you can get it from npm. Why reimplement it yourself?

1 Like

You’re right there’s the client js. But I’m not using any Js frameworks like React, node or such but just vanilla html page. So do you mean that I can just include the Phoenix.js in html file and use it in my html file inside script tag?

I believe so, yes. Did you try it?

phoenix.js is the full client for liveview, it is responsible for multiple things such as sending input events and patching html. If he just needs phoenix channels then he needs the phoenix channels client.

1 Like

This does not seem to be the case. LiveView code is in the phoenix_live_view package.

Hey all. Thanks for all the replies.
So, I was reading this documentation page phoenix 1.6.15 | Documentation where it says how we can use Pheonix channels within vanilla Js code. If so, this is what I want? Then the final question is to how can I install/add this into my html file/script? I saw few things like webpacks. I’m i planning to do the right way? Or embed this phoenix/priv/static at master · phoenixframework/phoenix · GitHub
The things you mentioned about LiveView, is that relevant?
Thanks again

Hey there. That doc says;

This is the Node.js client. If you need a client for the browser use phoenix

The Phoenix channel package https://www.npmjs.com/package/phoenix is what I want? If so, I’m thinking how we can embed this into my vanilla js code. Which is this phoenix/priv/static at master · phoenixframework/phoenix · GitHub
Thanks