Proxy a WebSocket Connection Through Your Backend

​

How it works

1. Your backend opens one WebSocket connection to NGN Market, using the real API key from an environment variable.
2. Your backend also runs its own WebSocket server, one your frontend connects to instead. No key required, since your backend is already authenticated upstream.
3. Every message your backend receives from NGN Market gets forwarded to every browser client connected to it.

​

Backend: connect upstream, serve downstream

import express from 'express';
import { WebSocketServer, WebSocket } from 'ws';

const app = express();
const server = app.listen(3000);

// The real key lives here, in your backend's environment, and never
// reaches a browser.
const upstream = new WebSocket(
  `wss://api.ngnmarket.com/v1/ws/prices?api_key=${process.env.NGN_MARKET_API_KEY}&symbols=DANGCEM,GTCO,MTNN`
);

let latest = null;

upstream.on('message', (data) => {
  latest = data.toString();
  broadcast(latest);
});

upstream.on('close', () => {
  // A dropped upstream connection is worth logging and reconnecting with
  // backoff in a real app. Left out here to keep the example short.
  console.error('upstream connection closed');
});

// Your own endpoint. Browsers connect here, with no API key at all.
const wss = new WebSocketServer({ server, path: '/ws/prices' });

wss.on('connection', (ws) => {
  if (latest) ws.send(latest); // catch the new client up right away
});

function broadcast(data) {
  for (const client of wss.clients) {
    if (client.readyState === WebSocket.OPEN) client.send(data);
  }
}

​

Browser: connect to your own server, not NGN Market

const ws = new WebSocket('wss://yourapp.com/ws/prices');

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  console.log(msg.type, msg.prices);
};

​

Tips

• Reconnect the upstream connection, not just the browser side. If your backend’s connection to NGN Market drops, every browser client downstream goes quiet too, even though their own connections are still open. Add reconnect-with-backoff logic to the upstream.on('close', ...) handler above.
• One upstream connection per symbol set you need, not per user. If different users need different watchlists on /v1/ws/prices, open one upstream connection per distinct symbol set your app actually needs, and fan each one out to the browser clients that asked for it. That’s still far fewer connections than one per user.
• This is a normal pattern, not a workaround. Proxying a key-authenticated connection through your own server is exactly how you’d already handle a REST API key in a frontend app. WebSocket doesn’t change that rule, it just changes where the key would otherwise leak if you skipped this step.