Skip to content

Instantly share code, notes, and snippets.

@mohsenasm

mohsenasm/WebSocket.js

Last active April 15, 2020 06:56
Show Gist options
  • Save mohsenasm/5b01a8cc82e9140df8a86860bd16d108 to your computer and use it in GitHub Desktop.
Save mohsenasm/5b01a8cc82e9140df8a86860bd16d108 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mohsenasm revised this gist Apr 15, 2020. 1 changed file with 18 additions and 8 deletions.
    26 changes: 18 additions & 8 deletions WebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,19 @@
    import { useState, useCallback, useRef } from 'react';

    function useWebSocket(url) {
    const reconnectInterval = 2000;

    const [isConnected, setConnected] = useState(false);
    const [socket, setSocket] = useState(null);

    const isReconnectionEnable = useRef(true);
    const setReconnectionEnable = useCallback((newValue) => {
    isReconnectionEnable.current = newValue;
    }, []);

    const reconnectInterval = useRef(5000);
    const setReconnectInterval = useCallback((newValue) => {
    reconnectInterval.current = newValue;
    }, []);

    const onOpen = useRef(() => { });
    const onClose = useRef(() => { });
    const onMessage = useRef(() => { });
    @@ -40,22 +48,24 @@ function useWebSocket(url) {
    newSocket.onclose = (event) => {
    onClose.current(event);
    setConnected(false);
    setTimeout(() => {
    console.log("** web socket reconnecting onClose **");
    reconnect();
    }, reconnectInterval);
    if (isReconnectionEnable.current)
    setTimeout(() => {
    console.log("** web socket reconnecting onClose **");
    reconnect();
    }, reconnectInterval.current);
    }
    setSocket(newSocket);
    }, [url]);

    // use this code in parent component to connect
    // use this code in parrent component to connect
    // OR uncomment this to connect automatically
    // useEffect(() => {
    // reconnect()
    // }, [reconnect]);

    return {
    socket, reconnect, isConnected,
    socket, reconnect, isConnected,
    setReconnectionEnable, setReconnectInterval,
    setOnOpen, setOnMessage, setOnClose, setOnError
    }
    }
  2. mohsenasm revised this gist Apr 15, 2020. 1 changed file with 0 additions and 4 deletions.
    4 changes: 0 additions & 4 deletions WebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -36,10 +36,6 @@ function useWebSocket(url) {
    newSocket.onerror = (event) => {
    onError.current(event);
    setConnected(false);
    setTimeout(() => {
    console.log("** web socket reconnecting onError **");
    reconnect();
    }, reconnectInterval);
    }
    newSocket.onclose = (event) => {
    onClose.current(event);
  3. mohsenasm revised this gist Mar 30, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion WebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -52,7 +52,7 @@ function useWebSocket(url) {
    setSocket(newSocket);
    }, [url]);

    // use this code in parrent component to connect
    // use this code in parent component to connect
    // OR uncomment this to connect automatically
    // useEffect(() => {
    // reconnect()
  4. mohsenasm created this gist Mar 30, 2020.
    68 changes: 68 additions & 0 deletions WebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    import { useState, useCallback, useRef } from 'react';

    function useWebSocket(url) {
    const reconnectInterval = 2000;

    const [isConnected, setConnected] = useState(false);
    const [socket, setSocket] = useState(null);

    const onOpen = useRef(() => { });
    const onClose = useRef(() => { });
    const onMessage = useRef(() => { });
    const onError = useRef(() => { });

    const setOnOpen = (f) => {
    onOpen.current = f;
    };
    const setOnClose = (f) => {
    onClose.current = f;
    };
    const setOnMessage = (f) => {
    onMessage.current = f;
    };
    const setOnError = (f) => {
    onError.current = f;
    };

    const reconnect = useCallback(() => {
    const newSocket = new WebSocket(url);
    newSocket.onopen = (event) => {
    setConnected(true);
    onOpen.current(event);
    };
    newSocket.onmessage = (event) => {
    onMessage.current(event);
    }
    newSocket.onerror = (event) => {
    onError.current(event);
    setConnected(false);
    setTimeout(() => {
    console.log("** web socket reconnecting onError **");
    reconnect();
    }, reconnectInterval);
    }
    newSocket.onclose = (event) => {
    onClose.current(event);
    setConnected(false);
    setTimeout(() => {
    console.log("** web socket reconnecting onClose **");
    reconnect();
    }, reconnectInterval);
    }
    setSocket(newSocket);
    }, [url]);

    // use this code in parrent component to connect
    // OR uncomment this to connect automatically
    // useEffect(() => {
    // reconnect()
    // }, [reconnect]);

    return {
    socket, reconnect, isConnected,
    setOnOpen, setOnMessage, setOnClose, setOnError
    }
    }


    export default useWebSocket;