stomp

import { FC, ReactNode, useEffect, useState } from 'react';
import propTypes from 'prop-types';
import { over } from 'stompjs';
import SockJS from 'sockjs-client';
import { Button } from '@material-ui/core';

interface SocketHandlerProps {
  children: ReactNode;
  id:string
}

let recInterval = null;
let stompClient = null;

const SocketHandler: FC<SocketHandlerProps> = (props) => {
  const {
    children, id
  } = props;

  const [displayMessage, setDisplayMessage] = useState('You server message here.');
  const [notificationCount, setNotificationCount] = useState<number>(0);

  const makeid = (length) => {
    let result:string = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    for (let i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random()
 * charactersLength));
    }
    return result;
  };

  const showMessage = (message:string) => {
    console.log(message);
  };

  const sendMessage = () => {
    console.log('sending message');
    stompClient.send('/ws/message', {}, JSON.stringify({ messageContent: makeid(20) }));
  };

  const sendPrivateMessage = () => {
    console.log('sending private message');
    stompClient.send('/ws/private-message', {}, JSON.stringify({ messageContent: makeid(20) }));
  };

  const resetNotificationCount = () => {
    // notificationCount = 0;
    setNotificationCount(0);
  };

  const connectCallBack = (frame) => {
    console.log(`Connected: ${frame}`);
    stompClient.subscribe('/topic/messages', (message) => {
      setDisplayMessage(JSON.parse(message.body).content);
    });

    stompClient.subscribe('/user/topic/private-messages', (message) => {
      setDisplayMessage(JSON.parse(message.body).content);
    });

    stompClient.subscribe('/topic/global-notifications', (message) => {
      setNotificationCount(notificationCount + 1);
      showMessage(JSON.parse(message.body).content);
    });

    stompClient.subscribe('/user/topic/private-notifications', (message) => {
      setNotificationCount(notificationCount + 1);
      showMessage(JSON.parse(message.body).content);
    });
  };

  const errorCallback = () => {
    console.log('error');
  };

  const connect = () => {
    let socket = new SockJS('http://localhost:8080/our-websocket');

    clearInterval(recInterval);

    socket.onopen = () => {

    };

    socket.onclose = () => {
      socket = null;
      recInterval = setInterval(() => {
        connect();
      }, 2000);
    };
    stompClient = over(socket);
    stompClient.connect({}, connectCallBack, errorCallback);
  };

  useEffect(() => {
    connect();
  }, [id]);

  return (
    <>

      <Button
        variant="text"
        onClick={sendMessage}
      >
        sendMessage();
      </Button>
      <Button
        variant="text"
        onClick={sendPrivateMessage}
      >
        resetNotificationCount();
      </Button>
      <Button
        variant="text"
        onClick={resetNotificationCount}
      >
        resetNotificationCount();
      </Button>
      <div>
        Notifications Count:
        {' '}
        {notificationCount}
      </div>
      <div>
        Message:
        {' '}
        {displayMessage}
      </div>
      <div>{id}</div>
      {children}
    </>
  );
};

SocketHandler.propTypes = {
  id: propTypes.string.isRequired,
  children: propTypes.node.isRequired
};

export default SocketHandler;