Connecting Websockets

This documentation references Socket.IO v4.8.0. Authentication and user context comes from the `$user` object obtained after login.

1. Create Socket.IO Connection

Initialize the WebSocket connection and define the `mainSocket.f` function to handle data transmission. This function automatically injects user credentials (`ke` and `uid`) if missing.

const shinobiServer = location.origin
const mainSocket = io(shinobiServer, {
    path: '/socket.io'
})

mainSocket.f = function(data) {
    if(!data.ke) data.ke = $user.ke;
    if(!data.uid) data.uid = $user.uid;
    console.log('Sending Data', data)
    return mainSocket.emit('f', data)
}

2. Authenticate Connection

Send initialization payload with user credentials. Requires valid `auth_token` from successful login.

mainSocket.f({
    f: 'init',
    ke: $user.ke,
    auth: $user.auth_token,
    uid: $user.uid
})

3. Handle WebSocket Events

Listen for server responses. Key events: - `init_success`: Confirm authentication and start monitoring - `detector_trigger`: Receive motion detection alerts

mainSocket.on('f', function(d) {
    switch(d.f) {
        case 'init_success':
            console.log('Authenticated to Websocket!')
            // Start watching a monitor
            const monitorId = 'YOUR_MONITOR_ID'
            mainSocket.f({
                f: 'monitor',
                ff: 'watch_on',
                id: monitorId
            })
            break;
        case 'detector_trigger':
            console.log('Matrix Data', d)
            break;
    }
})

4. Perform ONVIF Scan

After authentication, scan ONVIF devices by providing network credentials. Leave fields empty for automatic discovery.

const form = {
    ip: '',
    port: '',
    user: '',
    pass: ''
}
mainSocket.f({
    f: 'onvif',
    ip: form.ip,
    port: form.port,
    user: form.user,
    pass: form.pass
})

5. Capture ONVIF Scan Results

Handle discovered ONVIF devices. Results are passed to `drawProbeResult()` function for display.

mainSocket.on('f', function(d) {
    if(d.f === 'onvif') {
        drawProbeResult(d);
    }
})