Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const wsMachine = Machine(
  {
    initial: 'idle',
    context: {
      ws: null,
    },
    states: {
      idle: {
        on: {
          CONNECT: 'connecting',
        },
      },
      connecting: {
        invoke: {
          src: 'createWsInstance',
          onDone: {
            target: 'connected',
            actions: assign({ ws: (ctx, evt) => evt.data }),
          },
        },
      },
      connected: {
        activities: [''],
      },
    },
  },
  {
    activities: {
      handleMessages: ctx => {
        const onMessage = ev => {
          console.log(ev.data)
        }
        ctx.ws.addEventListener('message', onMessage)
        return () => {
          ctx.ws.removeEventListener('message', onMessage)
        }
      },
    },
    services: {
      createWsInstance: (ctx, evt) => {
        return new Promise((resolve, reject) => {
          const ws = new WebSocket(evt.data.url)
          ws.addEventListener(
            'open',
            ev => {
              resolve(ws)
            },
            { once: true }
          )
        })
      },
    },
  }
)