{"library":"phoenix","title":"Phoenix JavaScript Client","description":"The Phoenix JavaScript client provides real-time bidirectional communication capabilities for frontend applications interacting with Phoenix web framework backends. It leverages WebSockets and Phoenix Channels to enable features like chat, live notifications, and collaborative editing. The current stable version, 1.8.5, is released in conjunction with the Phoenix framework, leading to an irregular but consistent release cadence. A key differentiator is its robust channel-based publish/subscribe system, which is tightly integrated with the Elixir/Phoenix ecosystem, offering fault-tolerant and highly concurrent real-time services. It's designed to provide a structured approach to real-time communication, ensuring reliable message delivery and state management between client and server.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install phoenix"],"cli":null},"imports":["import { Socket } from 'phoenix'","const channel = socket.channel('topic', params);","import { LongPoll } from 'phoenix'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Socket } from \"phoenix\";\n\n// Replace with your Phoenix server's WebSocket URL, e.g., 'ws://localhost:4000/socket'\nconst socketUrl = \"ws://your-phoenix-app.com/socket\";\nconst userToken = process.env.PHOENIX_AUTH_TOKEN ?? ''; // Use env var for auth or actual token\n\n// Instantiate a new Socket connection\nconst socket = new Socket(socketUrl, { params: { userToken } });\n\n// Connect to the socket\nsocket.connect();\n\nsocket.onOpen(() => console.log(\"Socket connected successfully!\"));\nsocket.onError((error) => console.error(\"Socket error:\", error));\nsocket.onClose(() => console.log(\"Socket closed.\"));\n\n// Join a specific channel, e.g., 'room:lobby'\nconst channel = socket.channel(\"room:lobby\", {});\n\n// Set up event listeners for messages received on this channel\nchannel.on(\"new_msg\", (payload) => {\n  console.log(\"Received new message:\", payload.body);\n});\n\nchannel.on(\"user_joined\", (payload) => {\n  console.log(\"User joined channel:\", payload.username);\n});\n\n// Attempt to join the channel and handle outcomes\nchannel.join()\n  .receive(\"ok\", ({ messages }) => {\n    console.log(\"Joined channel successfully! Initial messages:\", messages);\n    // Push a message to the channel after successful join\n    channel.push(\"new_msg\", { body: \"Hello Phoenix channel!\" })\n      .receive(\"ok\", (msg) => console.log(\"Message pushed successfully:\", msg))\n      .receive(\"error\", (reasons) => console.error(\"Failed to push message:\", reasons))\n      .receive(\"timeout\", () => console.warn(\"Message push timed out.\"));\n  })\n  .receive(\"error\", ({ reason }) => {\n    console.error(\"Failed to join channel:\", reason);\n  })\n  .receive(\"timeout\", () => {\n    console.warn(\"Joining channel timed out. Server might be unreachable or slow.\");\n  });\n\n// Example of leaving a channel or disconnecting the socket after some time\n// setTimeout(() => {\n//   channel.leave();\n//   socket.disconnect();\n//   console.log(\"Channel left and socket disconnected after 15 seconds.\");\n// }, 15000);\n","lang":"typescript","description":"This quickstart demonstrates how to establish a WebSocket connection to a Phoenix backend, join a specific channel, send messages to the channel, and handle incoming real-time events.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}