🔌 websocket-bridge

websocket-bridge is a zero-config utility package to connect a Node.js backend and React frontend using WebSockets. It handles all the connection logic under the hood — so you can focus on your app, not the wiring.

✨ Features

• ✅ Plug-and-play WebSocket setup
• ✅ Backend WebSocket server in one line
• ✅ React useWebSocket hook for easy frontend integration
• ✅ Auto JSON parsing / sending
• ✅ Works out-of-the-box with express or http.createServer()

📦 Installation

npm install websocket-bridge


## ⚙️ Usage

### 🖥️ Node.js (Backend)

Create an Express or HTTP server and initialize the WebSocket server using `initWebSocket()`:

// server.js
const express = require('express');
const http = require('http');
const { initWebSocket } = require('websocket-bridge/server');

const app = express();
const server = http.createServer(app);

// Initialize WebSocket
initWebSocket(server);

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});


### 🌐 React (Frontend)

Use the `useWebSocket` hook to connect to the backend and listen/send messages:

// App.jsx
import React from 'react';
import { useWebSocket } from 'websocket-bridge/client';

function App() {
  const { sendMessage } = useWebSocket((msg) => {
    console.log('📩 Message from server:', msg);
  });

  return (
    <div>
      <h1>WebSocket Bridge Demo</h1>
      <button onClick={() => sendMessage({ type: 'ping', data: 'Hello server!' })}>
        Send Ping
      </button>
    </div>
  );
}

export default App;


### 📁 File Structure (Inside Package)


websocket-bridge/
├── server/
│   └── initWebSocket.js  # WebSocket server logic
├── client/
│   └── useWebSocket.js   # React hook for client-side connection


### 🧠 How It Works

- The **backend** starts a WebSocket server on the same host and port as your HTTP server.
- The **frontend** automatically connects to the correct WebSocket address using the browser's `window.location.hostname`.
- All messages are exchanged in **JSON** format for consistency and ease of parsing.

### 📜 License

MIT © Prashant Sharma