Real-Time

WebSockets (Gateways)

Build powerful real-time applications using the declarative Gateway pattern. Fully integrated with Dependency Injection.

Declarative Gateways

Use decorators to define WebSocket endpoints similar to Controllers.

DI Integration

Gateways are providers! Inject services directly into your real-time logic.

Room Support

Built-in adapters for room-management and broadcasting.

AsyncAPI Ready

Automatically generates documentation for your events.

The Gateway Pattern

Unlike traditional event listeners, Gateways allow you to organize your real-time logic into classes using decorators.

ChatGateway.ts

1import { WebSocketGateway, SubscribeMessage, MessageBody, ConnectedSocket } from 'canxjs';
2
3@WebSocketGateway({
4  path: '/ws',
5  cors: { origin: '*' }
6})
7export class ChatGateway {
8  
9  // Handle 'chat:message' event
10  @SubscribeMessage('chat:message')
11  handleMessage(
12    @MessageBody() data: { text: string },
13    @ConnectedSocket() client: any
14  ) {
15    console.log(`Received message from ${client.id}: ${data.text}`);
16    
17    // Return explicit response (emits 'chat:message' back to sender)
18    return { event: 'ack', status: 'received' };
19  }
20
21  @SubscribeMessage('join:room')
22  handleJoinRoom(
23    @MessageBody() room: string,
24    @ConnectedSocket() client: any
25  ) {
26    client.join(room);
27    // Broadcast to room (auto-injected server/client methods)
28    client.to(room).emit('user:joined', { id: client.id });
29  }
30}

Dependency Injection

Gateways are fully managed by the CanxJS IoC container. You can inject any service, repository, or provider.

AuthGateway.ts

1import { WebSocketGateway, SubscribeMessage } from 'canxjs';
2import { AuthService } from './AuthService';
3
4@WebSocketGateway()
5export class AuthGateway {
6  // Full Dependency Injection Support
7  constructor(private authService: AuthService) {}
8
9  @SubscribeMessage('login')
10  async handleLogin(@MessageBody() token: string, @ConnectedSocket() client: any) {
11    const user = await this.authService.validate(token);
12    client.data.user = user;
13    return { status: 'authenticated', user };
14  }
15}

Client Integration

client.js

1// Native WebSocket Client or CanxJS Client
2const ws = new WebSocket("ws://localhost:3000/ws");
3
4ws.onopen = () => {
5  // Standard JSON event format
6  ws.send(JSON.stringify({
7    event: "chat:message",
8    data: { text: "Hello World!" }
9  }));
10};
11
12ws.onmessage = (msg) => {
13  const { event, data } = JSON.parse(msg.data);
14  console.log(event, data);
15};

Explore Events

CanxJS uses AsyncAPI to document your events automatically.