How do I add WebSocket events to a React component?

Use the useEffect hook: call client.connect().subscribe("channel-name").bind("event-name", handler) inside the effect, and return () => client.disconnect() as the cleanup function.

Does Apinator work with React Strict Mode?

Yes. React Strict Mode double-invokes effects in development. The SDK handles this safely — the cleanup function disconnects and the re-mount reconnects without leaving stale subscriptions.

Is Apinator compatible with Vite, Create React App, and Remix?

Yes. The client SDK is a standard ESM package and works with any React bundler or framework. It uses only browser-standard WebSocket APIs.

Can I use WebSocket presence channels in React to show who is online?

Yes. Subscribe to a presence- prefixed channel to get member lists and member join/leave events. Useful for showing user avatars, typing indicators, and online status.

Is it free to add WebSocket notifications to a React app?

Yes. Apinator has a free plan with no credit card required. You can add WebSocket channels and real-time notifications to your React app at no cost.

Client SDK

Realtime WebSocket Notifications for React

Add WebSocket channels and real-time notifications to any React app. Subscribe in useEffect, bind events declaratively, clean up automatically — works with Vite, Create React App, and Remix.

Get Started Free View Docs

Client $ npm install @apinator/client

Adding real-time WebSocket features to a React app doesn't require a complex server setup. Apinator's client SDK opens a persistent WebSocket connection from the browser and delivers events directly to your components. Subscribe in useEffect, bind event handlers, and let the SDK handle reconnection — your React state stays in sync with live data automatically.

Quick Start

How to add WebSocket notifications to React

Add realtime features to your React app in a few steps.

Install the client SDK

Add the WebSocket client SDK to your React project. Works with Vite, Create React App, Next.js, and Remix.

npm install @apinator/client

Create a client instance

Initialize the client with your app key. Set an auth endpoint for private channels.

// lib/realtime.ts
import { Apinator } from '@apinator/client'

export const client = new Apinator({
  appKey: 'your-app-key',
  cluster: 'us',
  authEndpoint: '/api/realtime/auth'
})

Subscribe to a WebSocket channel

Open a persistent WebSocket connection and subscribe inside useEffect. The SDK handles reconnection with exponential backoff automatically.

useEffect(() => {
  const channel = client
    .connect()
    .subscribe('chat-room')

  channel.bind('message', (data) => {
    setMessages(prev => [...prev, JSON.parse(data))])
  })

  return () => client.disconnect()
}, [])

Trigger from your backend

Use any server SDK (Node.js, Python, Go, PHP) to publish events. Clients receive them instantly.

// Your backend (any language)
await realtime.trigger({
  name: 'message',
  channel: 'chat-room',
  data: JSON.stringify({ text: 'Hello!' })
})

Why React

Built for React developers

useEffect Friendly

Subscribe on mount, disconnect on cleanup. Fits naturally into React component lifecycles without memory leaks.

Auto-Reconnect

Built-in exponential backoff reconnection. Your UI stays connected even through network interruptions.

Presence Channels

Track who is online with presence channels. Show user avatars, typing indicators, and live cursors.

Tiny Bundle

Lightweight client with zero dependencies. Tree-shakeable ESM build keeps your React app fast.

How WebSocket channels work in React

React's component model is a natural fit for WebSocket subscriptions. The useEffect hook maps directly to the connect/subscribe/bind lifecycle, and returning a cleanup function ensures the connection is closed when the component unmounts. The challenge is getting this right — forgetting to unsubscribe can cause memory leaks and duplicate event handlers, especially with React Strict Mode's double-invocation in development.

Apinator's client SDK handles the tricky parts. A single Apinator instance manages the underlying WebSocket connection, so subscribing from multiple components at once doesn't open multiple connections — subscriptions are multiplexed over one connection. Each call to disconnect() is safe to call even if the connection is already closed, making cleanup straightforward. The SDK also handles reconnection automatically with exponential backoff, so temporary network interruptions don't require any error-handling code in your components.

The result is that adding a real-time WebSocket notification feed to a React component takes about 10 lines of code in useEffect. No server-side WebSocket infrastructure required — Apinator manages the persistent connection layer entirely.

Full Example

Full Example: Realtime WebSocket Chat Component in React

Complete WebSocket example: a chat component that subscribes to a private channel and renders incoming messages in real-time.

lib/realtime.ts

import { Apinator } from '@apinator/client' export const client = new Apinator({ appKey: import.meta.env.VITE_REALTIME_KEY, cluster: 'us', authEndpoint: '/api/realtime/auth' })

Related Docs

Read the core WebSocket guides

Related Use Cases

Explore realtime use cases

Live Chat & Messaging Collaborative Editing Live Dashboards & Analytics

Start building realtime React apps

Completely free. No credit card. No catch.

Get Started Free Read the Docs