Best npm Packages for Real-Time Features 2026

npm install socket.io socket.io-client

// server/socket.ts — Socket.io with Express
import { Server } from 'socket.io';
import { createServer } from 'http';
import { app } from './app';

const httpServer = createServer(app);

const io = new Server(httpServer, {
  cors: {
    origin: process.env.FRONTEND_URL,
    credentials: true,
  },
  transports: ['websocket', 'polling'],  // Polling as fallback
});

// Middleware for authentication
io.use(async (socket, next) => {
  const token = socket.handshake.auth.token;
  const user = await verifyToken(token);
  if (!user) return next(new Error('Unauthorized'));
  socket.data.userId = user.id;
  socket.data.userName = user.name;
  next();
});

io.on('connection', (socket) => {
  const { userId, userName } = socket.data;

  // Automatically join user's private room
  socket.join(`user:${userId}`);

  socket.on('join-channel', (channelId: string) => {
    socket.join(`channel:${channelId}`);
    io.to(`channel:${channelId}`).emit('user-joined', { userId, userName });
  });

  socket.on('leave-channel', (channelId: string) => {
    socket.leave(`channel:${channelId}`);
    io.to(`channel:${channelId}`).emit('user-left', { userId });
  });

  socket.on('send-message', async (data: { channelId: string; content: string }) => {
    // Persist to database first
    const message = await db.message.create({
      data: {
        channelId: data.channelId,
        senderId: userId,
        content: data.content,
      },
      include: { sender: { select: { id: true, name: true } } },
    });

    // Broadcast to everyone in the channel
    io.to(`channel:${data.channelId}`).emit('new-message', message);
  });

  socket.on('typing', (channelId: string) => {
    // Broadcast to everyone except sender
    socket.to(`channel:${channelId}`).emit('user-typing', { userId, userName });
  });

  socket.on('disconnect', () => {
    // Notify relevant rooms
    io.emit('user-offline', { userId });
  });
});

httpServer.listen(3001);

// React client with Socket.io
import { io, Socket } from 'socket.io-client';
import { useEffect, useRef, useState } from 'react';

function useChatSocket(channelId: string, token: string) {
  const socketRef = useRef<Socket | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [typingUsers, setTypingUsers] = useState<string[]>([]);

  useEffect(() => {
    const socket = io(process.env.NEXT_PUBLIC_WS_URL!, {
      auth: { token },
      transports: ['websocket'],
    });

    socket.on('connect', () => {
      socket.emit('join-channel', channelId);
    });

    socket.on('new-message', (message: Message) => {
      setMessages(prev => [...prev, message]);
    });

    socket.on('user-typing', ({ userName }: { userName: string }) => {
      setTypingUsers(prev => [...new Set([...prev, userName])]);
      setTimeout(() => {
        setTypingUsers(prev => prev.filter(u => u !== userName));
      }, 2000);
    });

    socketRef.current = socket;
    return () => {
      socket.emit('leave-channel', channelId);
      socket.disconnect();
    };
  }, [channelId, token]);

  const sendMessage = (content: string) => {
    socketRef.current?.emit('send-message', { channelId, content });
  };

  const sendTyping = () => {
    socketRef.current?.emit('typing', channelId);
  };

  return { messages, sendMessage, sendTyping, typingUsers };
}

import { createAdapter } from '@socket.io/redis-adapter';
import { createClient } from 'redis';

const pubClient = createClient({ url: process.env.REDIS_URL });
const subClient = pubClient.duplicate();

await Promise.all([pubClient.connect(), subClient.connect()]);
io.adapter(createAdapter(pubClient, subClient));

npm install partykit partysocket

# Local development
npx partykit dev

# Deploy to Cloudflare
npx partykit deploy

// party/chatroom.ts — PartyKit server
import type * as Party from 'partykit/server';

interface Message {
  type: 'message' | 'join' | 'leave' | 'history';
  content?: string;
  user: string;
  timestamp: string;
  messages?: Message[];
}

export default class ChatRoom implements Party.Server {
  messages: Message[] = [];

  constructor(readonly room: Party.Room) {}

  async onConnect(conn: Party.Connection, ctx: Party.ConnectionContext) {
    const url = new URL(ctx.request.url);
    const user = url.searchParams.get('user') ?? 'Anonymous';

    // Load persisted history from Durable Object storage
    const stored = await this.room.storage.get<Message[]>('messages');
    if (stored) this.messages = stored;

    // Send history to the new connection
    conn.send(
      JSON.stringify({ type: 'history', messages: this.messages, user, timestamp: '' })
    );

    // Announce join to everyone else
    this.room.broadcast(
      JSON.stringify({ type: 'join', user, timestamp: new Date().toISOString() }),
      [conn.id]
    );
  }

  async onMessage(raw: string, sender: Party.Connection) {
    const { content, user } = JSON.parse(raw);

    const msg: Message = {
      type: 'message',
      content,
      user,
      timestamp: new Date().toISOString(),
    };

    // Keep last 100 messages
    this.messages = [...this.messages.slice(-99), msg];

    // Persist to Durable Object storage
    await this.room.storage.put('messages', this.messages);

    // Broadcast to all connections in the room
    this.room.broadcast(JSON.stringify(msg));
  }

  onClose(conn: Party.Connection) {
    // Cleanup if needed
  }
}

// Client-side with PartySocket
import PartySocket from 'partysocket';
import { useEffect, useRef, useState } from 'react';

function usePartyChat(roomId: string, userName: string) {
  const socketRef = useRef<PartySocket | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    const socket = new PartySocket({
      host: process.env.NEXT_PUBLIC_PARTYKIT_HOST!,
      room: roomId,
      query: { user: userName },
    });

    socket.onmessage = (event) => {
      const data = JSON.parse(event.data) as Message;
      if (data.type === 'history' && data.messages) {
        setMessages(data.messages);
      } else if (data.type === 'message') {
        setMessages(prev => [...prev, data]);
      }
    };

    socketRef.current = socket;
    return () => socket.close();
  }, [roomId, userName]);

  const send = (content: string) => {
    socketRef.current?.send(JSON.stringify({ content, user: userName }));
  };

  return { messages, send };
}

npm install yjs y-websocket

// Collaborative text editor with Yjs + y-websocket
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
import { useMemo, useEffect } from 'react';

interface CollaborativeEditorProps {
  documentId: string;
  userId: string;
  userName: string;
  userColor: string;
}

export function CollaborativeEditor({
  documentId,
  userId,
  userName,
  userColor,
}: CollaborativeEditorProps) {
  const ydoc = useMemo(() => new Y.Doc(), [documentId]);

  const provider = useMemo(
    () =>
      new WebsocketProvider(
        process.env.NEXT_PUBLIC_YJS_SERVER_URL!,
        `document-${documentId}`,
        ydoc
      ),
    [documentId, ydoc]
  );

  const editor = useEditor({
    extensions: [
      StarterKit.configure({ history: false }), // Yjs handles history
      Collaboration.configure({ document: ydoc }),
      CollaborationCursor.configure({
        provider,
        user: { name: userName, color: userColor },
      }),
    ],
  });

  useEffect(() => {
    return () => {
      provider.disconnect();
      ydoc.destroy();
    };
  }, [provider, ydoc]);

  return <EditorContent editor={editor} />;
}

// Y.Map for collaborative presence / shared state
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const ydoc = new Y.Doc();
const provider = new WebsocketProvider(WS_URL, 'room-' + roomId, ydoc);

// Shared cursor positions map
const awareness = provider.awareness;

// Set own cursor position
awareness.setLocalStateField('cursor', {
  user: { name: userName, color: '#2563eb' },
  position: { x: 100, y: 200 },
});

// React to other users' state
awareness.on('change', () => {
  const states = Array.from(awareness.getStates().entries());
  const cursors = states
    .filter(([clientId]) => clientId !== ydoc.clientID)
    .map(([, state]) => state.cursor)
    .filter(Boolean);
  renderCursors(cursors);
});

# Self-host the y-websocket server
npx y-websocket-server --host 0.0.0.0 --port 1234

# Or use y-partykit for serverless Yjs
npm install y-partykit

npm install ably

// Ably — publish/subscribe
import Ably from 'ably';

// Initialize with API key (server-side) or JWT (client-side for security)
const client = new Ably.Realtime({
  key: process.env.ABLY_API_KEY,
  // For production: use token auth
  authUrl: '/api/ably-token',
});

// Subscribe to a channel
const channel = client.channels.get('notifications:user-123');

channel.subscribe('order-update', (message) => {
  console.log('Order update:', message.data);
  updateOrderStatus(message.data);
});

// Publish a message (server-side)
await channel.publish('order-update', {
  orderId: 'ord_123',
  status: 'shipped',
  trackingNumber: '1Z999AA10123456784',
});

// Ably — presence (who is online)
const channel = client.channels.get('workspace:abc');

// Enter presence
await channel.presence.enter({ userId: currentUser.id, name: currentUser.name });

// Get current members
const members = await channel.presence.get();
console.log('Online:', members.map(m => m.data.name));

// Subscribe to presence changes
channel.presence.subscribe('enter', (member) => {
  console.log(`${member.data.name} came online`);
});

channel.presence.subscribe('leave', (member) => {
  console.log(`${member.data.name} went offline`);
});