@cvo/plugin-socket

Real-time communication plugin for CVO Framework based on Socket.io, featuring declarative event handling and server-driven state synchronization.

🚀 Features

• Declarative Event Handling: Use @websocket decorator to handle events in classes or standalone functions.
• Live Sync: Reactive state synchronization that pushes updates to clients automatically.
• Live Components: Server-driven UI components with logic and state managed entirely on the backend.
• Automatic Acknowledgments: Return values from handlers are automatically sent as Socket.io acknowledgments.

🛠 Configuration

Configure Socket in your cvo.config.ts:

import { defineConfig } from '@cvo/core';
import { socketPlugin } from '@cvo/plugin-socket';

export default defineConfig({
  plugins: [
    socketPlugin({
      path: '/socket.io',
      cors: { origin: '*' }
    })
  ]
});

🧠 Usage

Event Handlers

import { websocket } from '@cvo/plugin-socket';
import { Socket } from 'socket.io';

@websocket('chat:message')
export async function handleChatMessage(data: { text: string }, socket: Socket) {
  socket.broadcast.emit('chat:message', { from: socket.id, text: data.text });
  return { success: true }; // Sent as Ack
}

Live Sync (State Sync)

import { createLiveState } from '@cvo/plugin-socket';

export const monitorState = createLiveState({ onlineUsers: 0 }, 'system_monitor');

// Updates are automatically broadcasted to subscribers
monitorState.onlineUsers++;

Live Components

import { LiveComponent, LiveEvent } from '@cvo/plugin-socket';

@LiveComponent('counter')
export class CounterComponent {
  state = { count: 0 };

  @LiveEvent('increment')
  async onIncrement(data: { amount: number }) {
    this.state.count += data.amount;
  }
}

📦 Client Usage (Vue)

<script setup>
import { useLiveSync, useLiveComponent } from '@cvo/plugin-socket/client';

const state = useLiveSync('system_monitor', { onlineUsers: 0 });
const { state: counter, send } = useLiveComponent('counter', { count: 0 });
</script>