{"id":27405,"library":"socket.io-middleware","title":"socket.io-middleware","description":"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.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/Vandise/redux-socket.io-middleware","tags":["javascript","redux","middleware","socket.io","socketio"],"install":[{"cmd":"npm install socket.io-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add socket.io-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add socket.io-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Middleware is designed to work with Redux store dispatch.","package":"redux","optional":true},{"reason":"Required to create and manage socket connections.","package":"socket.io-client","optional":false}],"imports":[{"note":"The package exports a single function as default. CommonJS require works but defaults to the function.","wrong":"const createSocketIoMiddleware = require('socket.io-middleware');","symbol":"default","correct":"import createSocketIoMiddleware from 'socket.io-middleware';"},{"note":"If using TypeScript, the type might be exported as a named export. Check for actual exports.","wrong":"const { SocketIOAction } = require('socket.io-middleware');","symbol":"SocketIOAction","correct":"import { SocketIOAction } from 'socket.io-middleware';"},{"note":"TypeScript users may need to import types for configuration. Not confirmed as exported.","wrong":"","symbol":"MiddlewareConfig","correct":"import type { MiddlewareConfig } from 'socket.io-middleware';"}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport createSocketIoMiddleware from 'socket.io-middleware';\nimport io from 'socket.io-client';\n\nconst socket = io('http://localhost:3000');\nconst socketIoMiddleware = createSocketIoMiddleware(socket, 'server/');\n\nconst reducer = (state = {}, action) => {\n  switch (action.type) {\n    case 'SET_VALUE_FROM_SERVER':\n      return { ...state, value: action.payload };\n    default:\n      return state;\n  }\n};\n\nconst store = createStore(reducer, applyMiddleware(socketIoMiddleware));\n\nstore.dispatch({ type: 'CLIENT_ACTION', payload: 'hello' });","lang":"javascript","description":"Demonstrates creating the middleware with a socket instance and applying it to a Redux store, including dispatching a client action."},"warnings":[{"fix":"Ensure all client and server event modules export an object with 'action' (string) and 'dispatch' (function) or export a dispatch function directly.","message":"The middleware requires a specific export format: an array of objects with 'action' and 'dispatch' or 'dispatch' function.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Prefix action types with 'server/' or 'client/' as appropriate, e.g., action type 'server/SET_VALUE' for server events.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Upgrade to v2 and follow the new array of objects pattern for all event types.","message":"Older documentation references a different export structure for events; the 'state' message type is ambiguous.","severity":"deprecated","affected_versions":"<2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure the middleware is applied correctly and that server event dispatch functions return plain objects.","cause":"Middleware not properly intercepting socket events, or action dispatched is not a plain object.","error":"Error: Actions must be plain objects. Use custom middleware for async actions."},{"fix":"Check that each event object in the array has an 'action' string property.","cause":"Event configuration missing 'action' property or dispatching an undefined action.","error":"Uncaught TypeError: Cannot read property 'type' of undefined"},{"fix":"Run 'npm install socket.io-middleware' and use import 'socket.io-middleware' without leading './' or '../'.","cause":"Package not installed or import path incorrect.","error":"Module not found: Can't resolve 'socket.io-middleware'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}