websocketConnection.tsx

TLDR

This file, located at src/pages/boardPage/websocketConnection.tsx, exports a React component called WebsocketConnection. The component checks the state of a websocket client and shows a banner if the connection is closed.

Methods

None

Classes

None

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useEffect, useState} from 'react'
import {FormattedMessage} from 'react-intl'

import wsClient, {WSClient} from '../../wsclient'
import {useAppSelector} from '../../store/hooks'

import {getMe} from '../../store/users'
import {IUser} from '../../user'

const websocketTimeoutForBanner = 5000

// WebsocketConnection component checks the websockets client for
// state changes and if the connection is closed, shows a banner
// indicating that there has been a connection error
const WebsocketConnection = () => {
    const [websocketClosed, setWebsocketClosed] = useState(false)
    const me = useAppSelector<IUser|null>(getMe)

    useEffect(() => {
        let timeout: ReturnType<typeof setTimeout>
        const updateWebsocketState = (_: WSClient, newState: 'init'|'open'|'close'): void => {
            if (timeout) {
                clearTimeout(timeout)
            }

            if (newState === 'close') {
                timeout = setTimeout(() => {
                    setWebsocketClosed(true)
                }, websocketTimeoutForBanner)
            } else {
                setWebsocketClosed(false)
            }
        }

        wsClient.addOnStateChange(updateWebsocketState)

        return () => {
            if (timeout) {
                clearTimeout(timeout)
            }
            wsClient.removeOnStateChange(updateWebsocketState)
        }
    }, [me?.id])

    if (websocketClosed) {
        return (
            <div className='WSConnection error'>
                <a
                    href='https://www.focalboard.com/fwlink/websocket-connect-error.html'
                    target='_blank'
                    rel='noreferrer'
                >
                    <FormattedMessage
                        id='Error.websocket-closed'
                        defaultMessage='Websocket connection closed, connection interrupted. If this persists, check your server or web proxy configuration.'
                    />
                </a>
            </div>
        )
    }

    return null
}

export default WebsocketConnection