RealtimeJul22

A lightweight library for real-time cursor tracking and collaboration in web applications.

Installation

npm install realtimejul22

Quick Start

import { RealtimeCursor } from 'realtimejul22';

const cursor = new RealtimeCursor({
  projectId: 'your-project-id',
  user: {
    id: 'user-123',
    name: 'John Doe',
    color: '#3b82f6'
  }
});

cursor.connect();

CDN Usage

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
<script>
  const cursor = new realtimejul22.RealtimeCursor({
    projectId: 'your-project-id',
    user: {
      id: 'user-123',
      name: 'John Doe',
      color: '#3b82f6'
    }
  });
  
  cursor.connect();
</script>

Features

• 🖱️ Real-time cursor tracking
• 👥 Collaborator presence
• 📝 Content synchronization
• ⌨️ Typing indicators
• 🔄 Automatic reconnection
• 🎨 Customizable cursors and colors

API Reference

RealtimeCursor

const cursor = new RealtimeCursor(options);

Options

• apiUrl (string): URL of the RealtimeCursor API server (defaults to hosted service)
• projectId (string): Unique identifier for the project
• user (object): User information
  • id (string): Unique identifier for the user
  • name (string): Display name for the user
  • color (string, optional): Color for the user's cursor (hex code)
• debug (boolean, optional): Enable debug logging

Methods

• connect(): Connect to the real-time service
• disconnect(): Disconnect from the real-time service
• updateCursor(position): Update cursor position
• updateContent(content): Update content
• updateTypingStatus(isTyping): Update typing status
• on(event, callback): Add event listener
• off(event, callback): Remove event listener
• getCollaborators(): Get all collaborators
• getCursors(): Get all cursors
• getTypingStatus(): Get typing status
• isConnected(): Get connection status

Events

• connect: Emitted when connected to the service
• disconnect: Emitted when disconnected from the service
• cursors-changed: Emitted when cursors are updated
• collaborators-changed: Emitted when collaborators list changes
• typing-status-changed: Emitted when typing status changes
• content-updated: Emitted when content is updated by another user
• user-joined: Emitted when a user joins
• user-left: Emitted when a user leaves
• error: Emitted when an error occurs

React Hook

import { useRealtimeCursor } from 'realtimejul22';

function Editor() {
  const { 
    cursors, 
    collaborators,
    connected,
    typingStatus,
    connect,
    disconnect,
    updateCursor, 
    updateContent,
    updateTypingStatus
  } = useRealtimeCursor({
    projectId: 'your-project-id',
    user: {
      id: 'user-123',
      name: 'John Doe',
      color: '#3b82f6'
    }
  });
  
  // Use the hook...
}

Example

// Initialize the cursor client
const cursor = new RealtimeCursor({
  projectId: 'my-project',
  user: {
    id: 'user-123',
    name: 'John Doe',
    color: '#3b82f6'
  }
});

// Connect to the real-time service
cursor.connect();

// Set up event handlers
cursor.on('connect', () => {
  console.log('Connected to real-time service');
});

cursor.on('collaborators-changed', (collaborators) => {
  console.log('Active collaborators:', collaborators);
});

cursor.on('cursors-changed', (cursors) => {
  console.log('Cursor positions:', cursors);
});

// Update cursor position on mouse move
document.addEventListener('mousemove', (e) => {
  const editorElement = document.getElementById('editor');
  const rect = editorElement.getBoundingClientRect();
  
  cursor.updateCursor({
    x: e.clientX,
    y: e.clientY,
    relativeX: e.clientX - rect.left,
    relativeY: e.clientY - rect.top
  });
});

// Update content
document.getElementById('editor').addEventListener('input', (e) => {
  cursor.updateContent(e.target.value);
  cursor.updateTypingStatus(true);
  
  // Reset typing status after 2 seconds
  setTimeout(() => {
    cursor.updateTypingStatus(false);
  }, 2000);
});

// Disconnect when done
window.addEventListener('beforeunload', () => {
  cursor.disconnect();
});

License

MIT