Connecting remote client to Phoenix channel

Question

I'm trying to separate my front end from Phoenix 1.3 (localhost:4000) and I'm running a React on localhost:3000.

I cannot for the life of me connect to Phoenix. I get the error:

WebSocket connection to 'ws://localhost:4000/socket/websocket?token=undefined&vsn=2.0.0' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

I'm using the following client side:

let socket = new Socket("ws://localhost:4000/socket", {params: {token: window.userToken}})

    socket.connect();

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

I can manage to connect using wsta in terminal and I receive a good response. I thought it was potentially some sort of CORS issue, but I've implemented the cors_plug elixir lib and I'm still having the issue. Any advice?

Answer 1

you have to first install phoenix client

npm install phoenix --save

    import {Socket} from "phoenix"; // in your component 
    let socket = new Socket("ws://localhost:4000/socket");

    socket.connect();
    let channel = socket.channel("chat_room:lobby", {});
    console.log(channel);

The same problems i also faced and resolved it with same code.

please ref this link