WebSockets

Introduction

WebSockets are a powerful tool for enabling real-time communication between clients in your application. With Vania, implementing WebSockets is straightforward and efficient. By enabling WebSockets in your .env file, you can easily set up real-time communication channels.

In your project's Route directory, you'll find a web_socket.dart file where you can define WebSocket routes.

Quick Start

To get started with WebSockets in Vania, define your WebSocket routes using the router method. You can define different routes for distinct WebSocket functionalities:

WebSocket Routes

// Default WebSocket route
Router.websocket('/ws', (WebSocketEvent event) {
    // Define your WebSocket events here
});

// WebSocket route for clients
Router.websocket('/clients', (WebSocketEvent event) {
    // Define WebSocket events for clients here
});

// WebSocket route for admins
Router.websocket('/admins', (WebSocketEvent event) {
    // Define WebSocket events for admins here
});

Within each route, you can define event listeners specific to the functionality of that route:

// Default WebSocket route
Router.websocket('/ws', (WebSocketEvent event) {
    event.on('message', (WebSocketClient client, dynamic payload) {
        // Handle user-typing event for default route
    });

    event.on('connect', (WebSocketClient client, dynamic payload) {
        // Handle user connect
    });

    event.on('discconnect', (WebSocketClient client, dynamic payload) {
        // Handle user disconnect
    });
});

// WebSocket route for clients
Router.websocket('/clients', (WebSocketEvent event) {
    event.on('client-joined', (WebSocketClient client, dynamic payload) {
        // Handle client-joined event for clients route
    });
});

// WebSocket route for admins
Router.websocket('/admins', (WebSocketEvent event) {
    event.on('admin-message', (WebSocketClient client, dynamic payload) {
        // Handle admin-payload event for admins route
    });
});

This organization allows you to manage WebSocket events efficiently based on different routes and functionalities.

Within each route, you can define event listeners:

Router.websocket('/ws', (WebSocketEvent event) {
    event.on('user-typing', (WebSocketClient client, dynamic payload) {
        // Handle user-typing event
    });
});

info

You can also create WebSocket controllers and pass data to controller methods.

Incoming data must adhere to the following JSON format:

{
  "event": "message",
  "payload": "client data"
}

info

The payload can be either a string or JSON format.

Client ID

Each user connected to the WebSocket server is assigned a client ID (session ID). To retrieve the client ID, you can use client.clientId.

client.clientId

Responding to Clients

You can respond to clients using various methods:

emit

client.emit(String event, dynamic payload);

To respond to the sender.

toRoom

client.toRoom(String event, String room, dynamic payload)

To emit to all users in a specific room.

to

client.to(String clientId, String event, dynamic payload)

To emit to all clients connected to the WebSocket.

broadcast

client.broadcast(String event, dynamic payload)

To broadcast to all connected sessions except the sender.

Room

To allow users to join or leave a room, you can send the following events:

// To join a room
{
    "event":"join-room",
    "room":"unique room name or ID"
}

// To leave a room
{
    "event":"left-room",
    "room":"unique room name or ID"
}