Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@evandrolg/react-web-socket

Package Overview
Dependencies
Maintainers
0
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@evandrolg/react-web-socket

A lightweight WebSocket provider for React.

  • 1.0.1
  • latest
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

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

Keywords

FAQs

Package last updated on 24 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc