WebSocket Package

A React package for managing WebSocket connections using socket.io-client and React Context.

Installation

npm install @silicon.js/websocket socket.io-client

Usage Examples

Direct Usage (Without Provider)

Use the useWebsocket hook directly in your component:

import { useWebsocket } from '@silicon.js/websocket';
import { useEffect } from 'react';

const DemoScreen = () => {
  const { socket } = useWebsocket({ apiUrl: 'https://your-api-url.com' });

  useEffect(() => {
    socket.on('message', (data) => {
      console.log('received message:', data);
    });

    socket.on('connect', () => {
      console.log('connected to websocket');
    });

    socket.on('disconnect', () => {
      console.log('disconnected from websocket');
    });

    return () => {
      socket.off('message');
      socket.off('connect');
      socket.off('disconnect');
    };
  }, [socket]);

  const sendMessage = () => {
    socket.emit('message', { text: 'hello world' });
  };

  return (
    <div>
      <button onClick={sendMessage}>send message</button>
    </div>
  );
};

With Provider (Optional)

If you want to share the WebSocket connection across multiple components, use the provider:

import React from 'react';
import { WebsocketProvider, useWebsocket } from '@silicon.js/websocket';

export default function App() {
  const websocketMethods = useWebsocket({ apiUrl: 'https://your-api-url.com' });

  return (
    <WebsocketProvider methods={websocketMethods}>
      {/* other providers */}
      {/* app screens here */}
    </WebsocketProvider>
  );
}

Then use the context hook in any child component:

import { useWebsocketContext } from '@silicon.js/websocket';
import { useEffect } from 'react';

const DemoScreen = () => {
  const { socket } = useWebsocketContext();

  useEffect(() => {
    socket.on('message', (data) => {
      console.log('received message:', data);
    });

    return () => {
      socket.off('message');
    };
  }, [socket]);

  return <div>...</div>;
};

API Reference

useWebsocket Hook

Creates a WebSocket connection using socket.io-client.

| Parameter | Type | Required | Description | | --------- | ----------------- | -------- | -------------------------- | | apiUrl | string | yes | the WebSocket server URL |

Parameters: UseWebsocketProps object

Returns: WebsocketContextType

WebsocketProvider

The provider component that wraps your application and shares the WebSocket connection via context.

| Property | Type | Required | Description | | -------- | --------------------------------- | -------- | ---------------------------------------------- | | methods | WebsocketContextType | yes | websocket methods from useWebsocket hook | | children | React.ReactNode | React.ReactNode[] | yes | child components |

useWebsocketContext Hook

Returns the WebSocket context. Must be used within a WebsocketProvider.

Returns: WebsocketContextType

UseWebsocketProps Interface

| Property | Type | Required | Description | | -------- | -------- | -------- | -------------------------- | | apiUrl | string | yes | the WebSocket server URL |

WebsocketContextType Interface

| Property | Type | Description | | -------- | -------- | ---------------------------------- | | socket | Socket | the socket.io-client Socket instance |