jQuery Multiplayer (working name: $.live)

Add realtime presence, live cursors, "who's typing" indicators, and live data sync to any jQuery app with a couple of lines of code. No WebSocket server, Redis, or rewrite needed.

Status: 📐 Spec / pre-build Business model: Usage-based SaaS. Free jQuery client + paid hosted realtime backend.

1. The Problem

Users now expect collaborative behavior everywhere: Figma cursors, Google Docs presence, Linear's live updates. But thousands of businesses run on PHP + jQuery systems that are 5–15 years old (CRMs, ticketing tools, ERPs, booking systems, admin panels).

Adding realtime to those apps today means:

1. Standing up a WebSocket server (Node / Socket.io, Laravel Reverb, Pusher setup…)
2. Managing scaling, sticky sessions, Redis pub/sub, and reconnection logic
3. Solving presence (who is online? who left? tab closed?)
4. Handling conflicts (two agents editing the same ticket)
5. Doing all of it securely, with auth tied to their existing PHP session

Result: teams either skip it (and two support agents answer the same ticket), or burn months of engineering on infrastructure that isn't their product.

Real-world pain examples

• Two support agents both replying to the same ticket at the same time
• A sales rep overwriting another rep's edits on a CRM record
• Warehouse dashboards that need a manual F5 to show new orders
• Booking systems double-booking because availability is stale

2. The Solution

A tiny jQuery client backed by our hosted realtime cloud.

Presence ("who else is here?")

const room = $.live.join('ticket-4821', {
  apiKey: 'pk_live_xxx',
  user: { id: 42, name: 'Sara', avatar: '/img/sara.png' },
  authEndpoint: '/live/auth'          // your backend signs a short-lived token
});

$('#viewers').livePresence(room);      // renders avatar stack: "Sara, Tom and 2 others are viewing"

Live cursors & selections

$('#ticket-editor').liveCursors(room);           // Figma-style named cursors
$('textarea.reply').liveTyping(room);            // "Tom is typing…"

Field locking (prevent overwrites)

$('#crm-form :input').liveLock(room);
// When Tom focuses "Phone", other users see the field locked with Tom's avatar.

Live data events (no page refresh)

$.live.channel('orders').on('order.created', (order) => {
  $('#orders').grid('prepend', order);           // pairs well with our Data Grid
  $.stackedToast.info('New order', `#${order.id} from ${order.customer}`);
});

Server-side publish (from PHP / any backend)

// composer require live/php-sdk
Live::publish('orders', 'order.created', $order->toArray());

curl -X POST https://api.live.dev/v1/publish \
  -H "Authorization: Bearer sk_live_xxx" \
  -d '{"channel":"orders","event":"order.created","data":{"id":991}}'

3. Feature Set

Client plugin (free, MIT)

| Feature | Description | |---|---| | $.live.join(room) | Connect to a room with auto-reconnect, exponential backoff, and offline queueing | | .livePresence() | Avatar stack UI + presence:join / presence:leave events | | .liveCursors() | Throttled cursor broadcasting (~20 Hz) with smooth interpolation on receivers | | .liveTyping() | Debounced typing indicators | | .liveLock() | Soft field locks with timeout + "request edit" flow | | .liveSync() | Opt-in shared field values (last-write-wins, with conflict notification) | | Channel pub/sub | $.live.channel(name).on/emit | | Graceful degradation | If offline or blocked, the app works exactly as before. Realtime is additive. |

Hosted backend (paid)

| Capability | Notes | |---|---| | Global WebSocket edge | Low-latency connections, auto-scaling | | Presence engine | Heartbeats, tab-close detection, multi-tab de-duplication per user | | Auth | Signed JWT tokens issued by the customer's backend; we never see their passwords | | REST publish API + SDKs | PHP, Node, Python, Ruby | | Webhooks | room.empty, user.joined, lock.expired back to customer servers | | Message history | Replay the last N events on reconnect (Pro) | | Dashboard | Live connection counts, usage, logs, API keys | | Self-hosting license | Docker image for enterprises with strict data residency (Enterprise tier) |

4. Technical Architecture

 Browser (jQuery app)                      Our Cloud                       Customer Backend
┌────────────────────┐   WSS    ┌──────────────────────────┐   HTTPS   ┌─────────────────┐
│ $.live client      │◄────────►│ Edge gateway (WebSocket) │           │ PHP / Node app  │
│  - reconnect       │          │  - token verification    │◄──────────│ /live/auth signs│
│  - presence UI     │          │  - rate limiting         │  publish  │ JWT; publishes  │
│  - cursor smoothing│          ├──────────────────────────┤           │ events via REST │
└────────────────────┘          │ Room/presence service    │──────────►│ webhooks        │
                                │ Pub/sub bus (Redis/NATS) │           └─────────────────┘
                                │ Usage metering → billing │
                                └──────────────────────────┘

Key engineering decisions

• Customer auth stays with the customer. Their backend exchanges a session for a short-lived signed token (/live/auth). This fits cleanly into legacy PHP session auth.
• Ephemeral by default. Cursors, presence and typing aren't persisted. That's cheaper, simpler, and better for privacy.
• Throttle on send, interpolate on receive. Cursor updates are capped at ~20 Hz and animated client-side, so they look smooth while staying cheap on bandwidth.
• Locks over CRDTs for v1. Legacy forms need "don't overwrite each other", not Google-Docs-grade co-editing. Soft field locks solve 90% of the pain with 10% of the complexity. CRDT text co-editing (e.g. Yjs) is a later Pro feature.
• Transport fallback. WebSocket first, then Server-Sent Events + POST for strict corporate proxies.
• Security. Per-room permissions in token claims, origin allowlists, per-key rate limits, and payload size caps.

5. Monetization

Priced on peak concurrent connections and messages per month, which is the industry-standard and easy-to-understand model.

| Plan | Price (indicative) | Limits | |---|---|---| | Hobby | Free | 100 concurrent, 1M messages/mo, community support | | Starter | ~$29 / mo | 1,000 concurrent, 10M messages/mo | | Growth | ~$99 / mo | 5,000 concurrent, 50M messages/mo, message history, webhooks | | Business | ~$399 / mo | 25,000 concurrent, SSO for dashboard, 99.9% SLA | | Enterprise | Custom | Self-host license, data residency, dedicated support |

• Why this is sticky: once presence and locking are built into a CRM's workflow, removing them is a regression users notice right away. That keeps churn low.
• Expansion revenue: customers naturally grow connections as their user base grows.
• Cost control: ephemeral messages + edge metering keep infra cost per connection low. Usage alerts and hard caps protect customers from bill shock.

6. Competitive Landscape

| Product | Strength | Our angle | |---|---|---| | Pusher / Ably | Mature pub/sub infrastructure | They give you pipes; we give you ready-made UI behaviors (presence stacks, cursors, field locks) for jQuery in one line | | Liveblocks | Excellent collaboration SDK | React-first; we're jQuery-native and target legacy apps they ignore | | Socket.io (self-hosted) | Free, flexible | Requires running and scaling servers; we're zero-ops | | Laravel Reverb / Echo | Great for Laravel | Laravel-only and still requires DIY UI; we're backend-agnostic and UI-complete |

Honest risks

• Infra responsibility: we're running production realtime infrastructure. Uptime, on-call, and security are real costs. Mitigation: start on a managed platform (e.g. Cloudflare Durable Objects or Fly.io) before building custom infra.
• Trust barrier: enterprises may hesitate to route data through a third party. Mitigation: ephemeral-by-default, clear data policy, self-host tier.

7. MVP Roadmap

| Phase | Scope | Goal | |---|---|---| | v0.1 | Single-region WebSocket server, JWT auth, rooms, presence, $.live.join, .livePresence() | Internal demo | | v0.2 | .liveCursors(), .liveTyping(), reconnection + offline queue | Demo-worthy "wow" | | v0.3 | .liveLock(), REST publish API, PHP + Node SDKs, dashboard with API keys | Private beta (10 teams) | | v1.0 | Usage metering, Stripe/Paddle billing, Hobby + Starter plans, docs site | Public launch | | v1.x | Webhooks, message history, SSE fallback, multi-region | Growth tier | | v2.0 | Yjs-based co-editing for textareas, self-host Docker image | Enterprise tier |

Success metrics

• p95 message latency < 100 ms within region
• Under 5 minutes from sign-up to seeing two live cursors in a demo
• Client bundle < 12 KB min+gzip
• 20 paying teams within 6 months of v1.0

8. Folder Plan

jquery-multiplayer/
├── client/            # the jQuery plugin ($.live, .livePresence, .liveCursors, ...)
├── server/            # realtime gateway, rooms, presence, metering
├── sdks/              # php/, node/, python/
├── dashboard/         # customer dashboard (keys, usage, billing)
├── demos/             # two-tab CRM demo, live orders board
└── README.md