in che modo reagisce js come client websocket?

Voglio creare un'applicazione client-server basata su Websocket. In questo sono stato creato il server js websocket che sta aspettando i client. Ora voglio creare reacs js client websocket. Sto usando react js come websocket perché devo renderizzare continuamente gli elementi che il server invia come un semplice messaggio di testo.in che modo reagisce js come client websocket?

Sono colpito all'implementazione del react js come client websocket. Come dovrebbe funzionare come un client websocket e come sarà invia una richiesta al server websocket proprio come questo:

'ws://localhost:1234'

Voglio sapere di più su client websocket e anche voler risolvere questo problema?

fonte

2016-06-30 kit

Io suggerirei di leggere questo https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications, prima di fare altre domande. –

ok ... leggi questa pagina ... Ma voglio implementarlo nella risposta js ... la mia domanda è che solo come posso implementare il client websocket in risposta a js? – kit

Sembra un tutorial sui suoni https://www.alfresco.com/blogs/devops/2015/07/07/how-i-probably-over-simplified-integrated-web-sockets-messaging-and-reactjs-components/ –

Quindi un esempio molto semplice senza troppe spese generali richiederebbe due cose:

un componente con un riferimento a websocket connessione
un listener di eventi sulla connessione che aggiorna lo stato del componente quando arriva un messaggio

Demo: http://jsfiddle.net/69z2wepo/47360/

const Echo = React.createClass({ 
    getInitialState(){ 
    return { messages : [] } 
    }, 
    componentDidMount(){ 
    // this is an "echo" websocket service for testing pusposes 
    this.connection = new WebSocket('wss://echo.websocket.org'); 
    // listen to onmessage event 
    this.connection.onmessage = evt => { 
     // add the new message to state 
     this.setState({ 
     messages : this.state.messages.concat([ evt.data ]) 
     }) 
    }; 

    // for testing: sending a message to the echo service every 2 seconds, 
    // the service sends it right back 
    setInterval(_ =>{ 
     this.connection.send(Math.random()) 
    }, 2000) 
    }, 
    render: function() { 
    // render the messages from state: 
    return <ul>{ this.state.messages.map((msg, idx) => <li key={'msg-' + idx }>{ msg }</li>)}</ul>; 
    } 
});

fonte

2016-06-30 13:04:43 pawel

- Ehi, suona bene ... ma sto affrontando la configurazione di Bad JSFiddle **, per favore batta l'errore originale di React JSFiddle **, penso che la mia struttura non sia valida, per favore dimmi come creare una struttura per la mia app di reazione ? vale a dire html, js, webpack.config.js e package.json – kit

Dove viene visualizzato questo errore? Sul demo fiddle collegato nella mia risposta? – pawel

sì ... sto solo posizionando js code n change ws url e In html stiamo usando usando questo

Just create rest program from server side and create the connection at Web page 

var connection = new WebSocket('ws://localhost/echo', ['soap', 'xmpp']); 

opening the connection 
connection.onopen = function() { 
    connection.send('Ping'); // 
}; 


connection.onerror = function (error) { 
    console.log('WebSocket Error ' + error); 
}; 

//to receive the message from server 
connection.onmessage = function (e) { 
    console.log('Server: ' + e.data); 
}; 

// Sending String 
connection.send('your message'); 


At server side you will get session and message ,So you can do communication with N sessions

fonte

2016-06-30 13:14:48

Problemi correlati