Skip to content

Conversation

@dannyhw
Copy link
Member

@dannyhw dannyhw commented Dec 7, 2025

What I did

Auto WebSocket Host Detection

  • Added websockets: 'auto' option in metro config that automatically detects the local IP address
  • The getLocalIPAddress() function finds the machine's IPv4 address from network interfaces
  • Eliminates the need to manually configure host/port for device connections

RN_GET_INDEX Event

  • Added RN_GET_INDEX channel event that clients can send to request the story index
  • Server responds with RN_INDEX_RESPONSE containing the current story index
  • Enables external tooling (VS Code extension, dev tools) to query available stories

Build-time WebSocket Config Injection

  • New STORYBOOK_WEBSOCKET global variable injected into storybook.requires at build time
  • Contains { host, port } configuration determined during metro bundling
  • View.tsx now reads from this global when host/port params are not explicitly provided

Other Changes

  • Added --host and --port CLI arguments to the generate script
  • Added WebSocket ping interval (10s) to keep connections alive
  • Standardized on globalThis instead of global
  • Added test script (scripts/test-ws.ts) for testing WebSocket connection

How to test

  1. In metro config, set websockets: 'auto':
module.exports = withStorybook(defaultConfig, {
  enabled: true,
  websockets: 'auto',
});
  1. Run the app on a physical device - it should auto-connect to the WebSocket server

  2. Test the RN_GET_INDEX event using the test script:

cd examples/expo-example
npx ts-node scripts/test-ws.ts <host> <port>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants