Difference between Phoenix JS Socket and WebSocket API?


What is the difference between the Phoenix JS Socket

import { Socket } from 'phoenix';

and the native JS WebSocket API ?

I suppose the Phoenix JS Socket uses the WebSocket API behind the scenes and adds functionalities over it? I I got this right, what value/functionalities does it add over the native WebSocket API?

Thank you for any help!

Hi and welcome to the forum.

A Phoenix.Socket is a module that ties a communication transport layer to Phoenix.Channels that handle real-time communication between clients and Elixir processes (live LiveViews). It’s an abstracted transport layer that can communicate over native websockets but can fall back to longpolling mechanisms if needed. So you’re able to develop real-time communications in exactly the same way irrespective of the connection, and can even implement your own transport layer through the Phoenix.Socket.Transport behaviour.


In addition to what Juan said, the websocket transport provides a number of features on top of websockets, such as:

  • heartbeats
  • connection recovery
  • request/response messaging
  • multiplexed channels of communication over single connection