Elixir Q & A


How to implement WebSockets in Phoenix?

Implementing WebSockets in Phoenix is a powerful way to add real-time features and interactivity to your web applications. Phoenix provides seamless support for WebSockets through its built-in PubSub system and the Phoenix Channels library. Here’s a step-by-step guide on how to implement WebSockets in Phoenix:


  1. Set Up a Phoenix Application:

   Start by creating a Phoenix application or use an existing one. Ensure you have Phoenix installed and set up.

  1. Generate a Channel:

   Use the `mix phx.gen.channel` command to generate a new channel. For example:

mix phx.gen.channel ChatRoom

   This will create a ChatRoom channel, along with associated files for handling WebSocket communication.


  1. Modify the Channel Module:

   In the generated `chat_room_channel.ex` file (located in `lib/your_app_web/channels`), define the behavior of your WebSocket channel. You can specify event handlers, join behavior, and message handling logic in this module.


  1. Mount the Channel in the Router:

   In your `lib/your_app_web/endpoint.ex` file, ensure that the Phoenix router is set up to mount the channel. Add the following line inside the `socket/1` function:

channel "room:chat", YourAppWeb.ChatRoomChannel
  1. JavaScript Client Code:

   In your front-end JavaScript code, establish a WebSocket connection to the specified channel. Phoenix provides a JavaScript library that you can include in your assets. Import it, and then connect to the channel as follows:

import { Socket } from "phoenix";
let socket = new Socket("/socket", { params: { token: window.userToken } });
let channel = socket.channel("room:chat", {});
  .receive("ok", (resp) => { console.log("Joined successfully", resp); })
  .receive("error", (resp) => { console.log("Unable to join", resp); });

  1. Message Broadcasting:

   Use the `broadcast/3` function in your channel module to send messages to all connected clients. Clients can then handle incoming messages and update the user interface in real-time.


  1. Authentication (Optional):

   If your WebSocket functionality requires authentication, you can use tokens or session data to identify and authorize users when they connect to the channel.


  1. Testing and Debugging:

   Phoenix provides testing utilities for WebSocket channels. Write tests to ensure that your WebSocket functionality behaves as expected.


  1. Deployment:

   Deploy your Phoenix application with WebSocket support to a hosting platform of your choice. Ensure that WebSocket connections are allowed through any proxy or firewall.


By following these steps, you can successfully implement WebSockets in Phoenix and enable real-time communication in your web applications. Phoenix Channels abstract many of the complexities of WebSocket communication, making it easier to build interactive and collaborative features in your Phoenix projects.


Previously at
Flag Argentina
time icon
Tech Lead in Elixir with 3 years' experience. Passionate about Elixir/Phoenix and React Native. Full Stack Engineer, Event Organizer, Systems Analyst, Mobile Developer.