Events Specification

Every event in the Aninix system is coupled to a specific change in any resource. For example, when a new RenderJob is created, it triggers sending an event to the url specified in the webhook.

For example, the status of RenderJob has changed from processing to completed, then the event of the following format will be sent:

{
  "id": "7af973c4-4ea2-41c0-bc17-dd6dccab99d3",
  "entity": "event",
  "apiVersion": "1",
  "livemode": false,
  "createdAt": "2024-02-18T18:30:00.000Z",
  "type": "renderJob.completed",
  "previous": {
    "status": "processing",
    "updatedAt": "2024-02-18T18:30:01.000Z"
  },
  "current": {
    "id": "8b5d1120-0419-41cd-9c09-f56b29144a88",
    "hash": "4a5d0436cbad9c29fbf09f036bc9bf7ff91ad463d8b932fb97a1f8d301a37ef2",
    "name": "Sample project #1 🚀",
    "storyboard": { ... },
    "createdAt": "2024-02-18T18:30:00.000Z",
    "status": "completed",
    "updatedAt": "2024-02-18T18:35:00.000Z",
    "fileUrl": "https://static.aninix.com/8b5d1120-0419-41cd-9c09-f56b29144a88.mp4",
    "metadata": { ... }
  }
}

The same pattern is applied in the webhooks.

Realtime events on the frontend

In order to get real-time information we use SSE (server-sent events) channels. They allow to send information about changes in resources in one-way.

When you first subscribe to the channel, an InitiatedEvent is sent immediately, which contains information about the current state of the resource.

The simplest example of use case:

<!doctype html>
<html>
  <head>
    <title>SSE Client Example</title>
  </head>

  <body>
    <h1>SSE Client Example</h1>

    <script>
      const token = '{YOUR_TOKEN_HERE}'
      const resourceName = 'render-jobs'
      const resourceId = 'some-id'
      const eventSource = new EventSource(
        `https://apipi.aninix.com/${resourceName}/${resourceId}/events?token=${token}`
      )

      eventSource.addEventListener('open', () => {
        console.log('SSE connection established')
      })

      eventSource.addEventListener('message', (event) => {
        const eventData = JSON.parse(event.data)
        console.log('Received SSE event:', eventData)
        // Handle the received event data
      })

      eventSource.addEventListener('error', (error) => {
        console.error('SSE error:', error)
        // Handle SSE error
      })
    </script>
  </body>
</html>