Skip to content

socket-store

socket-store helps you turn WebSocket topic messages into local snapshots you can read, subscribe to, and send back with a consistent API.

Use it when your server sends messages such as chat updates, prices, presence, or notifications and you want one handler per topic instead of parsing each message in UI code.

Install

sh
npm install socket-store

Getting Started

Create a WebSocket, define one handler per topic, then subscribe to the snapshots you care about:

ts
import { SocketStore, createMessageHandler } from "socket-store";

type ChatMessage = {
  author: string;
  text: string;
};

type AppSchema = {
  chat: { state: ChatMessage[]; payload: ChatMessage };
};

const chatHandler = createMessageHandler<ChatMessage[], ChatMessage, "chat">(
  "chat",
  (messages, incoming) => [...messages, incoming],
  []
);

const socket = new WebSocket("wss://example.com/realtime");
const store = new SocketStore<AppSchema>(socket, [chatHandler]);

const stopMessages = store.subscribe("chat", (messages) => {
  console.log(messages.at(-1));
});

socket.addEventListener("open", () => {
  store.send({
    key: "chat",
    data: { author: "Ada", text: "Hello" },
  });
});

The default protocol expects JSON messages shaped like:

json
{ "key": "chat", "data": { "author": "Ada", "text": "Hello" } }

Cleanup

Call dispose() when the store should stop listening to socket events, and call each unsubscribe function when a listener is no longer needed:

ts
stopMessages();
store.dispose();

Where To Go Next