[READY] Feat/98: add websocket hook

[baliyan9887]

Pull Request Description:

Summary:

This pull request introduces a new useWebSocket() hook to React Haiku, enabling easy management of WebSocket connections in React applications.

Features:

• WebSocket Connection Management
• Auto-Reconnect
• Callbacks for Custom Behavior.
• Exposes a send method to send messages via the WebSocket.

Usage

import React from 'react';
import { useWebSocket } from 'react-haiku';

const WebSocketComponent = () => {
  const { lastMessage, status, sendMessage } = useWebSocket('wss://example.com/socket', {
    maxReconnectAttempts: 3,
    reconnectDelay: (attempt) => Math.min(5000, Math.pow(2, attempt) * 1000),
    onOpen: () => console.log('Connected to WebSocket'),
    onMessage: (message) => console.log('Received message:', message),
    onError: (error) => console.error('WebSocket error:', error),
    onClose: (event) => console.log('WebSocket closed:', event),
  });

  return (
    <div>
      <h1>WebSocket Hook</h1>
      <p>Status: {status}</p>
      <button onClick={() => sendMessage('Hello, Server!')}>Send Message</button>
      <p>Received Data: {lastMessage}</p>
    </div>
  );
};

Screenshot

[DavidHDev]

Could you write some tests to cover this hook please?

[DavidHDev]

Also, don't forget to update out index.ts file to ensure the hook is exported

[baliyan9887]

Sure David, I'll do

[DavidHDev]

Thank you, will mark this as ready for release.

[baliyan9887]

Thanks David!

[baliyan9887]

@DavidHDev I have also added the demo page

[DavidHDev]

Looks great!