Websocket Support (to be used as an Inspector)

[parker-codes]

My use case is to run the Viz locally and connect it to machines in a Tauri WebView. Because I'm not using a browser, the message passing has to go through a websocket connection.

To sum up my vision of how I would do it:

1. Start up my app
2. Point inspector package to https://localhost:3315 or whatever I specify
3. Run inspector locally at desired port
4. Begin inspecting a machine

[jacksteamdev]

This would be really awesome for debugging a machine during testing!

I'm currently converting my complicated Rollup plugin to use XState for orchestration, and had I some idea of being able to create a WebSocket during Jest setup and view the state of the plugin in the browser while debugging a test. This is the basic idea:

// jest.setup.js
import { inspect } from '@xstate/inspect/lib/server'
import { Server } from 'ws'

const server = new Server({ port: 8080, clientTracking: true })
inspect({ server })
// then navigate to https://statecharts.io/inspect?server=localhost:8080

I've tried with the old inspector at https://statecharts.io/inspect?server=localhost:8080, but no joy. The inspector does connect, I can see the WebSocket in the dev console Networks tab. It even receives a message: {"type":"xstate.inspecting"}. The tests are awaiting a never ending promise at the time of these screenshots, so it's not b/c execution is paused while at a breakpoint.

The global var __xstate__ is available in the debugger, and I can see the machines in __xstate__.services, but no messages like service.register are sent across the wire.

Anyways, this would be a fun use case for WebSocket support. I'm really excited to see the ecosystem mature, I think being able to inspect the logic flow will be a valuable tool to help contributors.

[parker-codes]

I just thought of another use case. It seems like I wouldn't even need to run a local version of the viz/inspector as long as the stately.ai/viz was sending data through a local (configurable) websocket connection. So the inspector could be anywhere, including the VSCode Extension!

Am I right?

[jacksteamdev]

@davidkpiano I'm thinking of putting some time in on a PR this week. Would the API from the previous inspector be a good starting point, using a query string to pass the localhost port?

[davidkpiano]

@davidkpiano I'm thinking of putting some time in on a PR this week. Would the API from the previous inspector be a good starting point, using a query string to pass the localhost port?

That would be appreciated, and that makes sense for an API.

[MarianPalkus]

Thanks for your work!

I would love to see inspecting via websocket since it allows inspecting state machines in react-native apps. Here is a small gist how this can work. (I am not quite sure if there is another simpler way.)