Back

Testing Phoenix Channels on Browser console

2020-08-02

So... I was building a backend using only the channels, and I wanted to test it on the console... so after many search, here is how you can make it:

1 - Connect to a socket

  ws = new WebSocket("ws://localhost:4000/socket/websocket"); 

2 - Show the messages that arrive from the server

  ws.onmessage = function (e) {
        console.log("From Server:"+ e.data);
          };

3 - Join to a topic

ws.send(JSON.stringify({
    "topic": "chat:lobby",
      "event": "phx_join",
        "payload": { "hello": "world" },
          "ref": 0
}));

4 - Send a event with a payload to the topic

ws.send(JSON.stringify({
    "topic": "chat:lobby",
      "event": "echo",
        "payload": { "hello": "world" },
          "ref": 0
}));

Keep in mind that the phoenix uses the event heartbeat to keep the conection alive, so if you dont want to lose the conection, send it each 30 seconds hehe

So... I was building a backend using only the channels, and I wanted to test it on the console... so after many search, here is how you can make it:

1 - Connect to a socket

  ws = new WebSocket("ws://localhost:4000/socket/websocket"); 

2 - Show the messages that arrive from the server

  ws.onmessage = function (e) {
    console.log("From Server:"+ e.data);
  };

3 - Join to a topic

ws.send(JSON.stringify({
  "topic": "chat:lobby",
  "event": "phx_join",
  "payload": { "hello": "world" },
  "ref": 0
}));

4 - Send a event with a payload to the topic

ws.send(JSON.stringify({
  "topic": "chat:lobby",
  "event": "echo",
  "payload": { "hello": "world" },
  "ref": 0
}));

Keep in mind that the phoenix uses the event heartbeat to keep the conection alive, so if you dont want to lose the conection, send it each 30 seconds hehe


Back