Как получить доступ к 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 и фактический код в одном файле, и я не думаю, что это сработает для меня.