socket.io-middleware

2.0.1 verified Fri May 01 auth: no javascript

Redux middleware for maintaining multiple socket.io connections. Version 2.0.1 (latest), released as a stable build. It enforces a pattern where only the middleware handles socket connections, and actions are dispatched to communicate with the server. Designed for multiple sockets, it organizes client and server events into separate directories with specific export formats. Differentiates from simpler single-connection solutions by requiring structured event arrays and opinionated directory layouts.

Common errors

error Error: Actions must be plain objects. Use custom middleware for async actions. ↓

cause Middleware not properly intercepting socket events, or action dispatched is not a plain object.

fix

Ensure the middleware is applied correctly and that server event dispatch functions return plain objects.

error Uncaught TypeError: Cannot read property 'type' of undefined ↓

cause Event configuration missing 'action' property or dispatching an undefined action.

fix

Check that each event object in the array has an 'action' string property.

error Module not found: Can't resolve 'socket.io-middleware' ↓

cause Package not installed or import path incorrect.

fix

Run 'npm install socket.io-middleware' and use import 'socket.io-middleware' without leading './' or '../'.

Warnings

breaking The middleware requires a specific export format: an array of objects with 'action' and 'dispatch' or 'dispatch' function. ↓

fix Ensure all client and server event modules export an object with 'action' (string) and 'dispatch' (function) or export a dispatch function directly.

gotcha The package expects the 'server/' prefix for server events and 'client/' for client events in action types. Not respecting this leads to events not being handled. ↓

fix Prefix action types with 'server/' or 'client/' as appropriate, e.g., action type 'server/SET_VALUE' for server events.

deprecated Older documentation references a different export structure for events; the 'state' message type is ambiguous. ↓

fix Upgrade to v2 and follow the new array of objects pattern for all event types.

Install

npm install socket.io-middleware

yarn add socket.io-middleware

pnpm add socket.io-middleware

Imports

default

wrong

const createSocketIoMiddleware = require('socket.io-middleware');

correct

import createSocketIoMiddleware from 'socket.io-middleware';

The package exports a single function as default. CommonJS require works but defaults to the function.

SocketIOAction

wrong

const { SocketIOAction } = require('socket.io-middleware');

correct

import { SocketIOAction } from 'socket.io-middleware';

If using TypeScript, the type might be exported as a named export. Check for actual exports.

MiddlewareConfig
```
import type { MiddlewareConfig } from 'socket.io-middleware';
```
TypeScript users may need to import types for configuration. Not confirmed as exported.

Quickstart

Demonstrates creating the middleware with a socket instance and applying it to a Redux store, including dispatching a client action.

import { createStore, applyMiddleware } from 'redux';
import createSocketIoMiddleware from 'socket.io-middleware';
import io from 'socket.io-client';

const socket = io('http://localhost:3000');
const socketIoMiddleware = createSocketIoMiddleware(socket, 'server/');

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'SET_VALUE_FROM_SERVER':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer, applyMiddleware(socketIoMiddleware));

store.dispatch({ type: 'CLIENT_ACTION', payload: 'hello' });