Registry / devops / redux-websocket-bridge

redux-websocket-bridge

library0.3.0-0jsnpmunverified

WebSocket messages to Redux action bridge that lifts WebSocket messages into Redux actions and vice versa. Version 0.3.0-0 (pre-release). It automatically parses JSON messages that follow Flux Standard Action (FSA) format and dispatches them to the store, and allows sending Redux actions as WebSocket messages. Supports raw messages and FSA-style actions, with lifecycle events for open, close, and message. Lightweight middleware with namespace support for multiple connections. Inspired by redux-websocket but simpler to integrate.

devops

npm install redux-websocket-bridge

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REDUX-WEBSOCKET-BR

redux-websocket-bridge

devopsjavascriptv0.3.0-0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import ReduxWebSocketBridge from 'redux-websocket-bridge'

✗ const ReduxWebSocketBridge = require('redux-websocket-bridge').default

Default export is the middleware factory. CommonJS users: use require('redux-websocket-bridge').default or set esModuleInterop.

SEND

✓ import { SEND } from 'redux-websocket-bridge'

✗ import { SEND } from 'redux-websocket-bridge/SEND'

Constant for action type prefix when sending messages via WebSocket.

OPEN, CLOSE, MESSAGE

✓ import { OPEN, CLOSE, MESSAGE } from 'redux-websocket-bridge'

Constants for WebSocket lifecycle events dispatched as @@websocket/OPEN etc.

Shows how to configure the middleware with a WebSocket URL, handle incoming FSA messages in a reducer, and dispatch actions to send messages over WebSocket.

import { createStore, applyMiddleware } from 'redux'; import createWebSocketBridge from 'redux-websocket-bridge'; import { SEND } from 'redux-websocket-bridge'; // Reducer that handles incoming WebSocket messages (FSA style) function chatReducer(state = { messages: [] }, action) { switch (action.type) { case 'NEW_MESSAGE': return { ...state, messages: [...state.messages, action.payload] }; default: return state; } } // Create middleware with WebSocket URL const wsUrl = process.env.WS_URL || 'ws://localhost:8080'; const middleware = createWebSocketBridge(wsUrl); // Apply middleware and create store const store = createStore(chatReducer, applyMiddleware(middleware)); // Dispatch an action to send a message via WebSocket store.dispatch({ type: `@@websocket/${SEND}`, payload: JSON.stringify({ type: 'SEND_MESSAGE', payload: 'Hello!' }) });

Debug

Known issues

gotchaIncoming messages must be valid JSON and follow Flux Standard Action format to be auto-dispatched; otherwise they are dispatched as @@websocket/MESSAGE raw events.

fix

Ensure server sends { type: 'ACTION_TYPE', payload: ... } as JSON string.

affects: >=0.0

breakingDefault export changed from middleware function to factory function in v0.3.0-0, requiring parentheses call (e.g., ReduxWebSocketBridge(url)).

fix

Call the function with URL: ReduxWebSocketBridge('ws://...') instead of passing class/function directly.

affects: >=0.3.0-0

deprecatedThe package is pre-release (0.3.0-0); API may change without major version bump.

fix

Pin to exact version if stability needed, or wait for stable release.

affects: >=0.0

gotchaThe SEND action type uses template literal syntax: type: `@@websocket/${SEND}`. Using SEND directly as string 'SEND' will not work.

fix

Always import SEND and use with template literal: type: `@@websocket/${SEND}`

affects: >=0.0

gotchaWebSocket events (open, close, message) are dispatched with type prefix '@@websocket/' only for lifecycle events; incoming FSA messages have their own type.

fix

Check action.type for '@@websocket/OPEN' et al. for connection state; handle custom types for messages.

affects: >=0.0

Errors

Common errors & fixes

Error: ReduxWebSocketBridge is not a function

Importing default as function directly without calling parentheses in older versions or incorrect import.

fix

Use named import or call factory: import createBridge from 'redux-websocket-bridge'; const middleware = createBridge('ws://...');

Actions must be plain objects. Use custom middleware for async actions.

Attempting to dispatch a function or promise instead of a plain action object with type.

fix

Ensure dispatch uses plain object with type: `@@websocket/${SEND}` and payload as string or JSON.

WebSocket is not opening: WebSocket is closed before the connection is established.

WebSocket URL may be invalid or server not reachable; middleware tries to connect immediately.

fix

Verify WebSocket URL and server availability; consider using try-catch or reconnection logic.

Cannot read property 'type' of undefined

Incoming message is not valid JSON or missing 'type' field; fails to parse as FSA.

fix

Check server sends valid JSON with 'type' property; handle raw messages in @@websocket/MESSAGE reducer.

Upgrade

Version history

0.3.0-0latest on npm

Audit

Dependencies

reduxrequiredRequires Redux store as middleware; peer dependency for Redux applications.

Agent activity

9 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/compulim/redux-websocket-bridge ↗

packageredux-websocket-bridge ↗

homepagehttps://github.com/compulim/redux-websocket-bridge#readme ↗