@evandrolg/react-web-socket

react-web-socket

react-web-socket is a lightweight React provider that integrates WebSocket functionality into your React application, allowing you to easily manage WebSocket connections, send and receive messages, and track connection status using React hooks and context.

Features

• Simple WebSocket integration for React applications.
• Easily send and receive messages.
• Track WebSocket connection status (connecting, open, closed).
• Handle WebSocket errors.
• Written in TypeScript for type safety.

Installation

To install the package, run:

npm install @evandrolg/react-web-socket

Usage

WebSocketProvider

Wrap your application (or a part of it) with the WebSocketProvider to provide WebSocket context to your components.

import React from 'react';
import { WebSocketProvider } from 'react-web-socket';

const App = () => {
  return (
    <WebSocketProvider url="wss://your-websocket-url">
      <YourComponent />
    </WebSocketProvider>
  );
};

export default App;

useWebSocket Hook

The useWebSocket hook allows you to access WebSocket state and send messages from within your components.

import React, { useEffect } from 'react';
import { useWebSocket } from 'react-web-socket';

const YourComponent = () => {
  const { lastMessage, sendMessage, status, error } = useWebSocket();

  useEffect(() => {
    if (lastMessage) {
      console.log('Received:', lastMessage);
    }
  }, [lastMessage]);

  const handleSendMessage = () => {
    sendMessage({ type: 'HELLO', content: 'Hello, WebSocket!' });
  };

  return (
    <div>
      <h1>WebSocket Status: {status}</h1>
      {error && <p>Error: {error.message}</p>}
      <button onClick={handleSendMessage}>Send Message</button>
      {lastMessage && <p>Last Message: {JSON.stringify(lastMessage)}</p>}
    </div>
  );
};

export default YourComponent;

API

WebSocketProvider

The WebSocketProvider component provides the WebSocket context to your application.

Props:

• url (string, required): The WebSocket server URL.
• children (ReactNode, required): The child components that will have access to the WebSocket context.

useWebSocket

The useWebSocket hook gives access to WebSocket functionality.

Returns:

• lastMessage: The most recent WebSocket message received (parsed as JSON).
• sendMessage(message: object): Sends a JSON message through the WebSocket connection.
• status: The current status of the WebSocket connection (CONNECTING, OPEN, or CLOSED).
• error: Any WebSocket error that may have occurred.

WebSocket Status Enum

The WebSocketStatus enum can have the following values:

• CONNECTING: The WebSocket connection is in the process of being established.
• OPEN: The WebSocket connection is open and ready to communicate.
• CLOSED: The WebSocket connection is closed.

Example

Here's a full example of how to use react-web-socket in your project:

import React, { useEffect } from 'react';
import { WebSocketProvider, useWebSocket } from 'react-web-socket';

const WebSocketComponent = () => {
  const { lastMessage, sendMessage, status, error } = useWebSocket();

  useEffect(() => {
    if (lastMessage) {
      console.log('Received:', lastMessage);
    }
  }, [lastMessage]);

  const handleSendMessage = () => {
    sendMessage({ message: 'Hello from the client!' });
  };

  return (
    <div>
      <h1>WebSocket Status: {status}</h1>
      {error && <p>Error: {error.message}</p>}
      <button onClick={handleSendMessage}>Send Message</button>
      {lastMessage && <p>Last Message: {JSON.stringify(lastMessage)}</p>}
    </div>
  );
};

const App = () => {
  return (
    <WebSocketProvider url="wss://your-websocket-url">
      <WebSocketComponent />
    </WebSocketProvider>
  );
};

export default App;

License

MIT