⛓️Websocket

Overview

WebSocket is a protocol that provides a two-way, full-duplex communication channel between a client and a server over a single, long-lived connection. It enables real-time, bi-directional communication between web browsers and servers, allowing for efficient and low-latency communication.

How to use

Here we use websocket. The installation method is as follows below.

Step 1: Install Dependencies

Install the socket.io-client package which allows you to communicate with the server-side WebSocket using Socket.IO.

yarn add socket.io-client

Step 2: Create a WebSocket Hook

Create a custom hook to handle the WebSocket connection. You can name it useWebSocket or any other preferred name. This hook will handle the WebSocket connection, sending and receiving messages.

// useWebSocket.ts
import { useEffect, useRef } from 'react';
import { io, Socket } from 'socket.io-client';

type WebSocketEvent = 'connect' | 'disconnect' | 'message';

type WebSocketHook = {
  socket: Socket | null;
  connected: boolean;
  connect: () => void;
  disconnect: () => void;
  sendMessage: (message: string) => void;
};

const useWebSocket = (): WebSocketHook => {
  const socketRef = useRef<Socket | null>(null);
  const connected = useRef(false);

  useEffect(() => {
    const socket = io(); // Initialize Socket.IO
    socketRef.current = socket;

    socket.on('connect', () => {
      connected.current = true;
    });

    socket.on('disconnect', () => {
      connected.current = false;
    });

    return () => {
      socket.disconnect();
      socketRef.current = null;
      connected.current = false;
    };
  }, []);

  const connect = () => {
    if (socketRef.current && !connected.current) {
      socketRef.current.connect();
    }
  };

  const disconnect = () => {
    if (socketRef.current && connected.current) {
      socketRef.current.disconnect();
    }
  };

  const sendMessage = (message: string) => {
    if (socketRef.current && connected.current) {
      socketRef.current.emit('message', message);
    }
  };

  return {
    socket: socketRef.current,
    connected: connected.current,
    connect,
    disconnect,
    sendMessage,
  };
};

export default useWebSocket;

Step 3: Use the WebSocket Hook in your Component

Use the useWebSocket hook in your Next.js component to interact with the WebSocket connection.

// pages/index.tsx
import React, { useState } from 'react';
import useWebSocket from '../hooks/useWebSocket';

const IndexPage: React.FC = () => {
  const [message, setMessage] = useState('');
  const { socket, connected, connect, disconnect, sendMessage } = useWebSocket();

  const handleConnect = () => {
    connect();
  };

  const handleDisconnect = () => {
    disconnect();
  };

  const handleSendMessage = () => {
    sendMessage(message);
  };

  return (
    <div>
      <h1>WebSocket Example</h1>
      <h2>Status: {connected ? 'Connected' : 'Disconnected'}</h2>
      <button onClick={handleConnect}>Connect</button>
      <button onClick={handleDisconnect}>Disconnect</button>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleSendMessage}>Send Message</button>
    </div>
  );
};

export default IndexPage;