Как получить доступ к websocket из другой функции в другом файле

Я пытаюсь сделать страницу входа в систему и хочу получить доступ к открытому мной вебсокету. Я предполагаю, хотя могу и ошибаться, что одновременно должен быть открыт только один websocket, поэтому я пытаюсь использовать тот, который был открыт ранее. Но у меня проблемы с доступом к нему. Вот мой основной файл, в котором размещено то, что у меня есть на данный момент

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom'
import WebSocketStuff from './websocket';
import Navbar from './navbar';
import Login from './login';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";


function App() {
    return (
        <div>
            <Navbar />
            <WebSocketStuff />
            <Router>
                <Switch>
                    <Route path="/account/login" component={Login}></Route>
                </Switch>
            </Router>
        </div>
    );
}


const appDiv = document.getElementById("app");
render(<App />, appDiv);

Это файл javascript, содержащий код websocket.

import React, { Component, useState, useEffect } from 'react';

export default function WebSocketStuff(props) {

    const [name, setName] = useState('');

    console.log(window.location)
    var loc = window.location
    var socket;

    useEffect(() => {
        var wsStart = 'ws://'
        if (loc.protocol == 'https:') {
            wsStart = 'wss://'
        }
        var endpoint = wsStart + loc.host + loc.pathname;
        socket = new WebSocket(endpoint);
        console.log(socket);

        socket.onmessage = function (e) {
            console.log("message", e)
            setName(e.data);
        };

        socket.onopen = function (e) {
            console.log("open", e)
        };

        socket.onerror = function (e) {
            console.log("error", e)
        };

        socket.onclose = function (e) {
            console.log("close", e)
        };

        
    }, []);

    var sendData = (message) => {
        socket.send(message);
    };

    return (
        <div>
            {/* <h1>Hello, {name}</h1>
            <h2>This is Me</h2> */}
        </div>
    );
}

И, наконец, страница входа

import React, { Component, useState, useEffect } from 'react';
import WebSocketStuff from './websocket';

export default function Login(websocket)
{

    return (
        <div className="login-container">
            <h2 className="account-header">Login</h2>
            <form method="POST">
                <input className="account-login" placeholder="Username" />
                <input className="account-login" placeholder="Password" />
                <button type="submit" className="account-submit btn btn-primary">Log In</button>
                <button type="submit" className="account-submit btn btn-primary">Sign Up</button>
                <a href="#"><p className="account-forgot">Forgot Password</p></a>
            </form>
        </div>
    )
}

Я пробовал несколько методов передачи данных в функцию WebSocketStuff, но это было безуспешно, любые идеи были бы отличными, потому что я застрял, и все учебники, которые я видел, просто имеют websocket и фактический код в одном файле, и я не думаю, что это сработает для меня.

Вернуться на верх