Skip to content

Instantly share code, notes, and snippets.

@reecelucas

reecelucas/useWebSocket.js

Last active April 17, 2020 09:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save reecelucas/e3aef5e2e17255464bdcd8f670f9d2f1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save reecelucas/e3aef5e2e17255464bdcd8f670f9d2f1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. reecelucas revised this gist Apr 17, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion useWebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    import { useEffect, useRef } from 'react'

    const isFunction = fn => fn && typeof fn === 'function';
    const isFunction = fn => typeof fn === 'function';
    const connectionIsOpen = ws => ws && ws.readyState === WebSocket.OPEN;

    /**
  2. reecelucas revised this gist May 28, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion useWebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ const connectionIsOpen = ws => ws && ws.readyState === WebSocket.OPEN;

    /**
    * Usage:
    * const { ws, sendMessage, closeConnection } = useWebSocket({
    * const { webSocket, sendMessage, closeConnection } = useWebSocket({
    * url: 'wss://echo.websocket.org/',
    * onOpen: useCallback(event => {
    * console.log('Connection opened: ', event);
  3. reecelucas revised this gist May 28, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion useWebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -55,7 +55,7 @@ const useWebSocket = ({ url, onOpen, onClose, onMessage, onError }) => {
    }, [url, onOpen, onClose, onMessage, onError]);

    return {
    ws: socket.current,
    webSocket: socket.current,
    sendMessage: data => {
    if (connectionIsOpen(socket.current)) {
    try {
  4. reecelucas revised this gist May 28, 2019. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions useWebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    import { useEffect, useRef } from 'react'

    const isFunction = fn => fn && typeof fn === 'function';
    const connectionIsOpen = ws => ws && ws.readyState === WebSocket.OPEN;

  5. reecelucas revised this gist May 28, 2019. No changes.
  6. reecelucas created this gist May 28, 2019.
    72 changes: 72 additions & 0 deletions useWebSocket.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    const isFunction = fn => fn && typeof fn === 'function';
    const connectionIsOpen = ws => ws && ws.readyState === WebSocket.OPEN;

    /**
    * Usage:
    * const { ws, sendMessage, closeConnection } = useWebSocket({
    * url: 'wss://echo.websocket.org/',
    * onOpen: useCallback(event => {
    * console.log('Connection opened: ', event);
    * }, []),
    * onClose: useCallback(event => {
    * console.log('Connection closed: ', event);
    * }, []),
    * onError: useCallback(event => {
    * console.log('Connection error: ', event);
    * }, []),
    * onMessage: useCallback(event => {
    * console.log('Message received: ', event);
    * }, [])
    * });
    *
    * sendMessage('Hello from the client!');
    */
    const useWebSocket = ({ url, onOpen, onClose, onMessage, onError }) => {
    let socket = useRef();

    useEffect(() => {
    socket.current = new WebSocket(url);

    socket.current.onopen = event => {
    if (isFunction(onOpen)) {
    onOpen(event);
    }
    };

    socket.current.onclose = event => {
    if (isFunction(onClose)) {
    onClose(event);
    }
    };

    socket.current.onmessage = event => {
    if (isFunction(onMessage)) {
    onMessage(event);
    }
    };

    socket.current.onerror = event => {
    if (isFunction(onError)) {
    onError(event);
    }
    };
    }, [url, onOpen, onClose, onMessage, onError]);

    return {
    ws: socket.current,
    sendMessage: data => {
    if (connectionIsOpen(socket.current)) {
    try {
    socket.current.send(JSON.stringify(data));
    } catch (error) {
    throw new Error(error);
    }
    }
    },
    closeConnection: () => {
    if (connectionIsOpen(socket.current)) {
    socket.current.close();
    }
    }
    };
    };