Browser Client

import { BrowserOCPPClient } from 'ocpp-ws-io/browser';

import { BrowserOCPPClient } from 'ocpp-ws-io/browser';

const client = new BrowserOCPPClient({
	endpoint: 'wss://csms.example.com/ocpp',
	identity: 'CP001',
	protocols: ['ocpp1.6'],
});

// Register a handler — params are auto-typed for OCPP 1.6 Reset
client.handle('Reset', ({ params }) => {
	console.log('Reset type:', params.type);
	return { status: 'Accepted' };
});

// Connect and send a BootNotification
await client.connect();

const response = await client.call('ocpp1.6', 'BootNotification', {
	chargePointVendor: 'VendorX',
	chargePointModel: 'ModelY',
});

console.log('Status:', response.status); // typed: "Accepted" | "Pending" | "Rejected"

const client = new BrowserOCPPClient(options: BrowserClientOptions);

import {
	BrowserOCPPClient,
	defineRpcMiddleware,
	createLoggingMiddleware,
} from 'ocpp-ws-io/browser';

const client = new BrowserOCPPClient({
	identity: 'CS001',
	endpoint: 'wss://csms.example.com/ocpp',
	protocols: ['ocpp1.6'],
});

// 1. Attach the built-in structured logger (outputs to browser console)
client.use(createLoggingMiddleware(console, client.identity));

// 2. Attach your own middleware: here, how long each message takes.
// Leave the payload as it is: a key its schema does not define fails strict mode.
const browserInterceptor = defineRpcMiddleware(async (ctx, next) => {
	const started = performance.now();
	await next();
	console.log(
		`[Browser] ${ctx.method}: ${Math.round(performance.now() - started)} ms`
	);
});

client.use(browserInterceptor);

BrowserOCPPClient.CONNECTING; // 0
BrowserOCPPClient.OPEN; // 1
BrowserOCPPClient.CLOSING; // 2
BrowserOCPPClient.CLOSED; // 3

// Check current state
if (client.state === BrowserOCPPClient.OPEN) {
	await client.call('Heartbeat', {});
}

// Version-aware call — fully typed params and response
const result = await client.call('ocpp1.6', 'BootNotification', {
	chargePointVendor: 'VendorX',
	chargePointModel: 'ModelY',
});
result.status; // typed: "Accepted" | "Pending" | "Rejected"

// OCPP 2.0.1 — different shape, still fully typed
const result201 = await client.call('ocpp2.0.1', 'BootNotification', {
	chargingStation: { model: 'ModelX', vendorName: 'VendorY' },
	reason: 'PowerUp',
});

// Short form: typed for the client's `protocols`
const res = await client.call('Heartbeat', {});

// A client configured for several versions: narrow to the negotiated one
const v201 = client.forProtocol('ocpp2.0.1'); // BrowserOCPPClient<"ocpp2.0.1"> | undefined

// An action the types do not know: unchecked(), with the response type you expect
import { unchecked } from 'ocpp-ws-io/browser';

const custom = await client.call<{ result: string }>(
	unchecked('VendorAction'),
	{
		data: 'hello',
	}
);

// Timeout
const res = await client.call(
	'Reset',
	{ type: 'Soft' },
	{
		timeoutMs: 5000,
	}
);

// AbortSignal
const controller = new AbortController();
const res2 = await client.call(
	'Heartbeat',
	{},
	{
		signal: controller.signal,
	}
);

// Cancel the call
controller.abort();

// Version-specific handler — only triggers for ocpp1.6
client.handle('ocpp1.6', 'Reset', ({ params }) => {
	params.type; // typed: "Hard" | "Soft" (OCPP 1.6 shape)
	return { status: 'Accepted' };
});

// Generic handler — triggers for any negotiated protocol
client.handle('Reset', ({ params, protocol }) => {
	console.log(`Reset via ${protocol}:`, params.type);
	return { status: 'Accepted' };
});

// Wildcard handler — catches all unhandled methods
client.handle(({ params, method }) => {
	console.log(`Unhandled method: ${method}`);
	return {};
});

import { NOREPLY } from 'ocpp-ws-io/browser';

client.handle('StatusNotification', ({ params }) => {
	// Process but don't send a response
	return NOREPLY;
});

client.removeHandler('Reset'); // remove generic
client.removeHandler('ocpp1.6', 'Reset'); // remove version-specific
client.removeHandler(); // remove wildcard
client.removeAllHandlers(); // remove all

client.on('open', event => {
	/* WebSocket connected */
});

client.on('close', ({ code, reason }) => {
	/* WebSocket disconnected */
});

client.on('closing', () => {
	/* close() started: no reconnect follows; close fires once the socket has closed */
});

client.on('error', error => {
	/* Connection or WebSocket error */
});

client.on('connecting', ({ url }) => {
	/* Attempting connection */
});

client.on('reconnect', ({ attempt, delay }) => {
	/* Scheduled reconnection */
});

client.on('message', ({ message, direction, ctx }) => {
	/* OCPP message */
	/* message direction */
	/* ctx context form client */
});

client.on('call', call => {
	/* Incoming OCPP Call */
});

client.on('callResult', result => {
	/* Received CallResult */
});

client.on('callError', error => {
	/* Received CallError */
});

client.on('badMessage', ({ message, error }) => {
	/* Malformed message received */
});

const client = new BrowserOCPPClient({
	identity: 'CP001',
	endpoint: 'wss://csms.example.com/ocpp',
	protocols: ['ocpp1.6'],
	reconnect: true, // default: true
	maxReconnects: 10, // default: Infinity
	backoffMin: 1000, // default: 1000ms
	backoffMax: 30000, // default: 30000ms
});

client.on('reconnect', ({ attempt, delay }) => {
	console.log(`Reconnect attempt ${attempt} in ${delay}ms`);
});

client.on('close', ({ code, reason }) => {
	console.log(`Disconnected: ${code} ${reason}`);
});

// Graceful close (waits for pending calls)
await client.close();

// Custom close code and reason
await client.close({ code: 1000, reason: 'User navigated away' });

// Force close (immediately terminates)
await client.close({ force: true });

// Wait for in-flight calls to complete first
await client.close({ awaitPending: true });

import { useEffect, useRef, useState } from "react";
import { BrowserOCPPClient } from "ocpp-ws-io/browser";

function useOCPP(identity: string, endpoint: string) {
	const clientRef = useRef<BrowserOCPPClient | null>(null);
	const [connected, setConnected] = useState(false);

	useEffect(() => {
		const client = new BrowserOCPPClient({
			identity,
			endpoint,
			protocols: ["ocpp1.6"],
		});

		client.on("open", () => setConnected(true));
		client.on("close", () => setConnected(false));

		client.connect();
		clientRef.current = client;

		return () => {
			client.close();
		};
	}, [identity, endpoint]);

	return { client: clientRef.current, connected };
}

// Usage
function ChargingStation() {
	const { client, connected } = useOCPP(
		"CP001",
		"wss://csms.example.com/ocpp",
	);

	const sendBoot = async () => {
		if (!client) return;
		const res = await client.call("BootNotification", {
			chargePointVendor: "VendorX",
			chargePointModel: "ModelY",
		});
		console.log("Boot:", res.status);
	};

	return (
		<div>
			<p>Status: {connected ? "Connected" : "Disconnected"}</p>
			<button onClick={sendBoot} disabled={!connected}>
				Send Boot
			</button>
		</div>
	);
}

'use client';
import { BrowserOCPPClient } from 'ocpp-ws-io/browser';

// ✅ Works in client components — no Node.js dependencies
const client = new BrowserOCPPClient({
	identity: 'CP001',
	endpoint: 'wss://csms.example.com/ocpp',
	protocols: ['ocpp1.6'],
});

import { ref, onMounted, onUnmounted } from 'vue';
import { BrowserOCPPClient } from 'ocpp-ws-io/browser';

export function useOCPP(identity: string, endpoint: string) {
	const client = ref<BrowserOCPPClient | null>(null);
	const connected = ref(false);

	onMounted(() => {
		const c = new BrowserOCPPClient({
			identity,
			endpoint,
			protocols: ['ocpp1.6'],
		});

		c.on('open', () => (connected.value = true));
		c.on('close', () => (connected.value = false));

		c.connect();
		client.value = c;
	});

	onUnmounted(() => {
		client.value?.close();
	});

	return { client, connected };
}

import {
	// Client
	BrowserOCPPClient,

	// Error classes
	RPCGenericError,
	RPCNotImplementedError,
	RPCNotSupportedError,
	RPCInternalError,
	RPCProtocolError,
	RPCSecurityError,
	RPCFormatViolationError,
	RPCFormationViolationError,
	RPCPropertyConstraintViolationError,
	RPCOccurrenceConstraintViolationError,
	RPCOccurenceConstraintViolationError, // 1.6 spelling, one `r`
	RPCTypeConstraintViolationError,
	RPCMessageTypeNotSupportedError,
	RPCFrameworkError,
	TimeoutError,

	// Utilities
	createRPCError,
	getErrorPlainObject,

	// Middleware Helpers
	defineRpcMiddleware,
	createLoggingMiddleware,

	// Constants
	ConnectionState,
	MessageType,
	NOREPLY,
} from 'ocpp-ws-io/browser';