redux-websocket-example.md

Redux WebSocket Middleware: Example

This Gist provides some code examples of how to implement WebSocket stream handling using a Redux middleware. Please be aware that this is only provided as an example and that critical things like exception handling have not been implemented.

A more complete version has been packaged, tested, and is available on GitHub as redux-websocket. This library has also been published to npm at @giantmachines/redux-websocket.

Middleware

This module represents the foundation of the middleware and implements the ideas presented above. The exported function is used during the creation of the Redux store (see the following snippet).

const websocket;

/**
 * An example middleware to handle WebSocket connections.
 * NB: There is no exception handling!
 */
const middleware = store => next => action => {
  switch (action.type) {
    // User request to connect
    case 'WEBSOCKET:CONNECT':
      // Configure the object
      websocket = new WebSocket(action.payload.url);

      // Attach the callbacks
      websocket.onopen = () => dispatch({ type: 'WEBSOCKET:OPEN' });
      websocket.onclose = (event) => dispatch({ type: 'WEBSOCKET:CLOSE', payload: event });
      websocket.onmessage = (event) => dispatch({ type: 'WEBSOCKET:MESSAGE', payload: event });

      break;

    // User request to send a message
    case 'WEBSOCKET:SEND':
      websocket.send(JSON.stringify(action.payload));
      break;

    // User request to disconnect
    case 'WEBSOCKET:DISCONNECT':
      websocket.close();
      break;

    default: // We don't really need the default but ...
      break;
  };

  return next(action);
};

Store setup example

import { createStore, applyMiddleware } from 'redux';
import reducer from './reducer';
import websocket from './websocket';

const createStore = (initialState) => (
  createStore(reducer, initialState, applyMiddleware(websocket))
)

Action

The following snippet of code shows an action creator that when dispatched, will open a WebSocket connection. Notice that the format of the action follows the Flux Standard Action recommendation.

/**
 * An example action creator to request a WebSocket connection.
 */
const action = (url = 'wss://localhost:6666') => {
  type: 'WEBSOCKET:CONNECT',
  payload: { url }
}

// Use it something like this wherever you wire up your actions
// (react-redux, other middlewares, etc)
store.dispatch(action());

Reducer

Finally, this snippet shows how a reducer might handle an action that is dispatched from the WebSocket middleware.

/**
 * An example reducer to handle WebSocket messages.
 * NB: There is no error handling!
 */
const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'WEBSOCKET:MESSAGE':
      // Assuming that your data is a DOMString in JSON format
      const data = JSON.parse(action.payload.data);
      return { ...state, ...data}
    default:
      return state
  }
}

This example was very nice to find; thank you for it.
In case you're interested, I don't see where dispatch was exposed from the store in order to call it in the middleware function.

const middleware = store => next => action => {
  const dispatch = store.dispatch; // <-- expose dispatch for later use, yeah?
  switch (action.type) {
    // User request to connect
...

or

const middleware = {dispatch} => next => action => {

Thanks for sharing this. A few notes.

const websocket probably needs to be let websocket to allow initialization occur after decalaration.

Also in the store setup, it's a bit confusing to import and apply websocket. Really, we should be importing and applying middleware (which should be exported)

Did someone succeeded to make this middleware running?! Thanks

Please light me, where to dispatch action for "WEBSOCKET:SEND" in this whole architecture ?

@dmichael Please light me, where to dispatch action for "WEBSOCKET:SEND" in this whole architecture ?

@dmichael Please light me, where to dispatch action for "WEBSOCKET:SEND" in this whole architecture ?

@shauryaverma4296 its been a long time since Ive worked with this. The full library has been release and is maintained here: https://github.com/giantmachines/redux-websocket