Implementazione di Socket.io con ReactJS ES6

Non riesco a incorporare il client SocketIO nel mio progetto poiché il progetto è stato configurato in modo isomorfico. Dopo aver incluso il file socket nel mio html di base, provo a chiamare let socket = io(); nel componentedidmount di uno dei miei componenti, ma inizialmente dopo averlo loggato nella mia console non è definito. Quando mi dirigo verso un altro componente e ritorni a quel componente con quella variabile socket, esso viene riempito con alcuni dati. Suppongo che il mio punto qui non stia inizializzando nel mio componente quale socket sia, sembra che debba aspettare come faccio a risolvere questo problema?Implementazione di Socket.io con ReactJS ES6

Component.jsx

componentDidMount() { 
    let socket = io(); 
    console.log(socket); 
    }

Base.html

<!doctype html> 
<html lang=""> 

<head> 
    <title>TITLE</title> 

    META 

    LINK 

</head> 

<div class="app">CONTENT</div> 

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 
<script> 
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 
    ga('create', 'UA-XXXXX-X', 'auto'); 
    ga('send', 'pageview'); 
</script> 
<script type="text/javascript" charset="utf-8" src="/assets/app.js"></script> 

<script src="/socket.io/socket.io.js"></script> 
<script> 
     var socket = io(); 
</script> 

</body> 
</html>

Questo funziona bene btw io per cose come il collegamento dal server, emette che un utente si connette e disconnessione dal server , solo la manipolazione del cliente mi ha lasciato perplesso.

fonte

2015-12-27 Karan

Stai utilizzando un bundle di moduli come webpack o browserify? – azium

Sì, lo sono! Webpack, quindi dovrei richiedere un qualche tipo di libreria? – Karan

È possibile importare il socket nel componente root e, se necessario, passarlo con props.https: //www.npmjs.com/package/socket.io-client. ecco un esempio da uno dei miei progetti https://github.com/zen-games/ui/blob/develop/src/components/App.js – azium

Probabilmente ci sono altre soluzioni, ma le seguenti opere per me:

1) NPM installare la presa socket client side package

2) importazione nella componente più radicale di tutti i componenti che necessitano di funzionalità presa

ascoltatori 3) ai collegamenti evento presa lato server in uno degli eventi del ciclo di vita (constructor/componentWillMount, componentDidMount)

4) tramandare calzino et oggetto attraverso i puntelli se ha senso per gestire determinati eventi del server in componenti figlio

esempio:

import io from 'socket.io-client' 
let socket = io(`http://localhost:8000`) 

class App extends Component { 
    state = { data: {} } 

    componentDidMount() {  
    socket.on(`server:event`, data => { 
     this.setState({ data }) 
    }) 
    } 

    sendMessage = message => { 
    socket.emit(`client:sendMessage`, message) 
    } 

    render() { 
    return (
     <Child 
     socket = { socket } 
     sendMessage = { this.sendMessage } 
     /> 
    ) 
    } 
}

fonte

2015-12-29 05:06:39 azium

Ho avuto lo stesso problema strano con socket.io e reagire. Volevo determinare una linea chiara dell'iniezione di dipendenza con oggetti di scena ad altri componenti dal mio file main.jsx. Venuto fuori che ho dovuto solo inizializzare io come questo ...

const socket = window.io();

E così è stato. Ha funzionato.

fonte

2017-06-17 12:48:43

Implementazione di Socket.io con ReactJS ES6

risposta

Problemi correlati