EchoSocket Documentation

Welcome to the documentation for using EchoSocket with the authorization portal. Follow the steps below to set up your real-time application.

1. Client ID and Socket Key

Each client will receive a Client ID and a Socket Key upon registration. Use these credentials to connect to the socket server.

Client ID: S26262
Socket Key: 1896003190DB2D001B60E80F969336E0

2. Frontend Setup

Include the following JavaScript code in your frontend to initialize EchoSocket and connect to the socket server:

With socket key, user must send system auth user id, name as header X-User-Id, X-User-Name so that they can get user details inside joined room. Moreover they can send extra custom data as needed.

Method 1:

<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2.4.0/dist/socket.io.js"></script>
<script type="module">
import Echo from 'https://cdn.jsdelivr.net/npm/laravel-echo@1.11.3/dist/echo.js';

window.io = io;
window.authId = 1;
window.authName = 'Md Mojahedul Islam';

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: "https://echosocket.kenokivabe.com:443",
    transports: ['websocket'],
    auth: {
        headers: {
            "X-Socket-Key": "1896003190DB2D001B60E80F969336E0",
            "X-User-Id": window.authId, // must provide system auth user identity
            "X-User-Name": window.authName, // must provide system auth user name
            "X-User-xyz": "xyz Data",
        },
    },
});
</script>

Method 2 (Using Laravel):

Inside resources/js/echo.js or resources/js/bootstrap.js
Be sure you've installed socket.io-client@2.4.0 & laravel-echo.


import Echo from 'laravel-echo';
import io from 'socket.io-client';

window.io = io;
window.authId = 1;
window.authName = 'Md Mojahedul Islam';

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: "https://echosocket.kenokivabe.com:443",
    transports: ['websocket'],
    auth: {
        headers: {
            "X-Socket-Key": process.env.ECHO_SOCKET_KEY,
            "X-User-Id": window.authId, // must provide system auth user identity
            "X-User-Name": window.authName, // must provide system auth user name
            "X-User-xyz": "xyz Data",
        },
    },
});

Then run npm run dev Or npm run build

3. Creating Channels

To create a private channel and listen for events, use the following code:

window.Echo.private('S26262.tasky')
    .listenForWhisper('ping', (res) => {
        console.log(res);
    })
    .listen('.ping', (res) => {
        console.log(res);
    });

4. Managing Clusters

You can create clusters on your client portal and use them in your channels. Replace 'tasky' with your desired cluster name.

5. Allowed Domains

To ensure security, you can specify allowed domains in your client portal. This will prevent unauthorized use of your socket key.

6. Example

Here is a complete example combining all the steps:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echo Example</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2.4.0/dist/socket.io.js"></script>
    <script type="module">
    import Echo from 'https://cdn.jsdelivr.net/npm/laravel-echo@1.11.3/dist/echo.js';

    window.io = io;
    window.authId = 1;
    window.authName = 'Md Mojahedul Islam';

    window.Echo = new Echo({
        broadcaster: 'socket.io',
        host: "https://echosocket.kenokivabe.com:443",
        transports: ['websocket'],
        auth: {
            headers: {
                "X-Socket-Key": "1896003190DB2D001B60E80F969336E0",
                "X-User-Id": window.authId, // must provide system auth user identity
                "X-User-Name": window.authName, // must provide system auth user name
                "X-User-xyz": "xyz Data",
            },
        },
    });

    window.Echo.private('S26262.tasky')
        .listenForWhisper('ping', (res) => {
            console.log(res);
        })
        .listen('.ping', (res) => {
            console.log(res);
        });
    </script>
</body>
</html>

Go to Playground

7. API Endpoints

The base URL for all API endpoints is: https://echosocket.kenokivabe.com/api

Broadcast API

Endpoint: /broadcast

Method: POST

Description: Use this endpoint to broadcast a message to a specific channel.

Request Headers:

X-Socket-Key: Your socket key

Request Parameters:

{
    "client_id": "S26262",
    "cluster": "tasky",
    "channel": "private",
    "event": "ping",
    "message": "Hello, World!" // String or Array
}

Response:

{
    "status": "success",
    "message": "Sent Successfully!"
}

Channel Info API

Endpoint: /channel

Method: GET

Description: Use this endpoint to retrieve information about a specific channel.

Request Headers:

X-Socket-Key: Your socket key

Request Parameters:

{
    "client_id": "S26262",
    "cluster": "tasky",
    "channel": "private"
}

Response:

{
    "status": "success",
    "channel": {
        "subscription_count": 0,
        "occupied": false
    }
}

Create Cluster API

Endpoint: /cluster

Method: POST

Description: Use this endpoint to create a new cluster.

Request Headers:

X-Socket-Key: Your socket key

Request Parameters:

{
    "cluster_name": "your_cluster_name"
}

Response:

{
    "status": "success",
    "message": "Cluster Created!"
}

List Clusters API

Endpoint: /clusters

Method: GET

Description: Use this endpoint to list all available clusters.

Request Headers:

X-Socket-Key: Your socket key

Response:

{
    "status": "success",
    "clusters": [
        "cluster1",
        "cluster2",
        "cluster3"
    ]
}