Así que tengo una aplicación de reacción, quiero incluir un archivo para websockets (actualmente una clase) pero quiero poder llamar cosas en la aplicación desde allí (cuando el WS proporciona mensajes). Estoy buscando algo como un accesorio de devolución de llamada de reacción, pero no creo que sea necesario usar un componente ya que esta clase no generará nada.
¿Cuál es la mejor manera de implementar esto?
class App extends React.Component { constructor() { super() this.ws = undefined; } sendMessage(data) { console.log(data) } connect = () => { this.ws = new Websocket(); }; render() { return <div> <button onClick={this.connect}>Connect</button> </div> } } let ws = new WebSocket("ws://localhost:8080/"); export default class Websocket { componentDidMount() { ws.addEventListener("message", this.getPosition); } componentWillUnmount() { ws.removeEventListener("message", this.getPosition); } giveData = ({data}) => { //here I want to send the data to sendMessage in App component }; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Puede usar una clase para crear varias instancias de una conexión WebSocket si lo desea, pero
Estoy buscando algo como un apoyo de devolución de llamada de reacción
No estoy seguro de lo que quiere decir con eso, pero si desea pasar una función de devolución de llamada para que se llame cuando la instancia ws recibe un mensaje, podría pasar la devolución de llamada a la clase WebSocket en el constructor.
Digamos que este es su Websocket en el archivo Websocket.js
export default class Websocket { constructor(onMessage) { // onMessage is expected to be a callback function this.ws = new WebSocket("wss://<url>"); this.onMessage = onMessage; // add the event listener using the custom callback you pass in constructor this.ws.addEventListener("message", this.onMessage); } // when closing the connection to make sure to remove the event listener closeConnection = () => { // as a cleanup you should call this in your `componentWillUnmount` hook, which will clear the event listeners, // in order to prevent memory leaks this.ws.removeEventListener("message", this.onMessage); this.ws.close(); }; // incase you need to reopen the connection openConnection = () => { // if connection is already open or connecting if ( this.ws.readyState === this.ws.OPEN || this.ws.readyState === this.ws.CONNECTING ) return; this.ws.addEventListener("message", this.onMessage); }; Ahora, en el componente de su App , puede simplemente pasar la función a la que desea que se llame cuando se reciba un mensaje así
export default class App extends Component { constructor() { super() this.ws = null; } sendMessage(data) { console.log(data); } connect = () => { // pass sendMessage to be used when receiving socket messages in the constructor this.ws = new Websocket(this.sendMessage); }; // cleanup to ensure eventListeners are cleared componentWillUnmount = () => { this.ws.closeConnection(); } render() { return ( <div> <button onClick={this.connect}>Connect</button> </div> ) } }