Game Engine Socket Client

A robust, modular React library for real-time multiplayer game development. Simplifies connecting to a custom game server using Socket.IO (with automatic REST fallback) and WebRTC (PeerJS) for peer-to-peer data.

Features

- Socket Client: Singleton managing connection, authentication, and event handling.
- State Synchronization: useNetworkEntity hook with built-in interpolation for smooth movement.
- Room Management: Join, create, list, and sync members in rooms.
- React Components: Ready-to-use components for Chat to verify connection.
- 2D & 3D Support: Components to easily sync div (2D) or R3F group (3D) transforms.

Installation

``bash
npm install game-engine-socket
`

Quick Start

$3

Wrap your application with the GameSocketProvider.
`tsx
import { GameSocketProvider } from 'game-engine-socket';

const App = () => (



);
`

$3


Connect to your server and join a room.
`tsx
import { useGameSocket, useRoom } from 'game-engine-socket';

const Lobby = () => {
const { connect, isConnected } = useGameSocket();
const { joinRoom } = useRoom();

const handleConnect = () => {
connect('http://localhost:3000', {
apiKey: 'YOUR_API_KEY',
userId: 'unique-user-id'
});
};

return (

{!isConnected ? (
Connect
) : (
joinRoom('lobby')}>Join Lobby
)}

);
};
`

$3

The library includes a pre-built chat component and raw socket events for messaging.

Using the Chat Component:
`tsx
import { ChatBox } from 'game-engine-socket';

const GameHUD = () => (



);
`

Listening to Chat Events Manually:
`tsx
const { client } = useGameSocket();

useEffect(() => {
if (!client) return;

client.on('chat', (data) => {
console.log('New message:', data);
// data = { from: 'userId', payload: { text: "Hello" }, ts: 123456... }
});
}, [client]);
`

$3


Use NetworkTransform2D (for DOM elements) or NetworkTransform3D (for React Three Fiber) to automatically sync position and rotation.

Owner (Your Player):
`tsx
entityId="my-player-id"
isOwner={true}
x={myX}
y={myY}
rotation={myRotation}
>