JavaScript SSE Client

Steps to Consume the SSE Event

1. Start the workflow using the REST API and get the jobId.

2. Connect to the SSE endpoint using workflowId and jobId:

GET http://localhost:8000/api/v1/sse/{workflowId}/{jobId}

3. Use this example Node.js code with the eventsource package to listen for the final job status:

• Initialize a new Node.js project with default settings:

npm init -y

• Open the generated package.json file and add "type": "module" to enable ES module support:

{
  "name": "wexflow",
  "version": "1.0.0",
  "type": "module",
  ...
}

• Install the eventsource package to handle Server-Sent Events:

npm install eventsource

• Create your main script file index.js and add your SSE client code:

import * as eventsource from 'eventsource'

const baseUrl = 'http://localhost:8000/api/v1'
const username = 'admin'
const password = 'wexflow2018'
const workflowId = 41

async function login(user, pass, stayConnected = false) {
  const res = await fetch(`${baseUrl}/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: user, password: pass, stayConnected })
  })
  if (!res.ok) {
    throw new Error(`HTTP ${res.status} - ${res.statusText}`)
  }
  const data = await res.json()
  return data.access_token
}

async function startWorkflow(token, workflowId) {
  const res = await fetch(`${baseUrl}/start?w=${workflowId}`, {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${token}` }
  })
  if (!res.ok) {
    throw new Error(`HTTP ${res.status} - ${res.statusText}`)
  }
  const jobId = await res.json()
  return jobId
}


try {
  const token = await login(username, password)
  const jobId = await startWorkflow(token, workflowId)
  console.log(`Workflow ${workflowId} started. Job ID: ${jobId}`)

  const sseUrl = `${baseUrl}/sse/${workflowId}/${jobId}`
  const es = new eventsource.EventSource(sseUrl, {
    fetch: (input, init) =>
      fetch(input, {
        ...init,
        headers: {
          ...init.headers,
          Authorization: `Bearer ${token}`
        },
      }),
  })

  es.onopen = () => {
    console.log('SSE connection opened')
  }

  es.onmessage = (event) => {
    try {
      // This event is triggered when the workflow job finishes or stops.
      // The SSE data arrives as a JSON-formatted string in event.data.
      // Parse this string into a JavaScript object for easy access to properties.
      // For the complete list of workflow statuses, see:
      // https://github.com/aelassas/wexflow/wiki/Workflow-Notifications-via-SSE#statuses
      const data = JSON.parse(event.data)
      console.log('Received SSE JSON:', data)

      // Access properties like data.workflowId, data.jobId, data.status, data.name, data.description

      // Close connection if needed, e.g. after final status received
      es.close()
    } catch (err) {
      console.error('Failed to parse SSE JSON:', err)
    }
  }

  es.onerror = (err) => {
    console.error('SSE error:', err)
    es.close()
  }
} catch (err) {
  console.error('Error:', err)
}

• Run your Node.js program:

node index.js

Use Workflow_Wait with a period of 10 secs for instance to test.

Here is a sample output result:

{
  workflowId: 41,
  jobId: '66aae8f4-e3ab-4fdc-8db2-a0a7692d8906',
  status: 'Done',
  name: 'Workflow_Wait',
  description: 'Workflow_Wait'
}

Summary

• The SSE event sends JSON with { workflowId, jobId, status, name, description }.
• The connection closes automatically after the job finishes.
• Ensure your requests include proper JWT authorization.