comment réagir js agit comme un client websocket?

Je veux créer un Websocket base de l'Application client-serveur. En ce que je créé node js serveur websocket qui est en attente pour les clients. Maintenant, je veux créer réagir js client websocket. Je suis l'aide de réagir js comme un websocket parce que j'ai à rendre les éléments de permanence qui serveur envoie un message texte simple.

Je suis frappé à la mise en œuvre de la réagir js comme un client websocket. Comment il doit fonctionner comme un client websocket et comment il va envoyer la requête au serveur websocket comme cela :

'ws://localhost:1234'

Je veux en savoir plus sur websocket client et souhaitez résoudre ce problème?

InformationsquelleAutor kit | 2016-06-30
  1. 25

    Donc un exemple très simple, sans beaucoup de frais généraux aurait besoin de deux choses:

    1. un composant avec une référence à la connexion websocket

    2. un écouteur d'événement sur la connexion que les mises à jour de l'état du composant
      lorsqu'un message arrive

    Démo: http://jsfiddle.net/69z2wepo/47360/

    Démo (2019): http://jsfiddle.net/643atLce/

    class Echo extends React.Component {
    constructor(props){
    super(props);
    this.state = { messages : [] }
  }

  componentDidMount(){
    //this is an "echo" websocket service
    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 purposes: sending to the echo service which will send it back back
    setInterval( _ =>{
        this.connection.send( Math.random() )
    }, 2000 )
  }

  render() {
    //slice(-5) gives us the five most recent messages
    return <ul>{ this.state.messages.slice(-5).map( (msg, idx) => <li key={'msg-' + idx }>{ msg }</li> )}</ul>;
  }
};
    • - Hé, Ça sonne bien...mais je suis confronté à Mauvais JSFiddle de configuration, veuillez fourche origine Réagir JSFiddle erreur, je pense que ma structure n'est pas valide, s'il vous Plaît dites-moi comment la structure de mon réagir application? c'est à dire html,js,webpack.config.js & paquet.json
    • Où obtenez-vous cette erreur? Sur la démo de violon lié dans ma réponse?
    • oui...je suis juste de placer du code js n changement ws url et En html, nous sommes à l'aide de l'utilisation de ce <script>, de sorte que cette erreur est arriver...
    • Pour toute personne ayant des problèmes avec le jsfiddle lien ci-dessus. Après avoir cliqué sur le lien, vous pouvez voir une sélection HTML qui a une valeur de "Javascript". Flip cela, sélectionnez à "Réagir", puis cliquez sur le bouton "démarrer" dans le coin supérieur gauche de la page. Voilà comment j'ai eu l'exemple de travailler pour moi.
    • mis à jour le lien dans ma réponse. Le violon a été faite il y a longtemps par un fork de la "Réagir de la Base de Violon" (je pense qu'il n'y a pas de prédéfinis Réagir config dans jsfiddle puis). Merci!
    InformationsquelleAutor pawel
  2. 1

    Il suffit de créer programme de repos depuis le côté serveur et la création de la connexion à une page Web.

    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');

    À côté serveur, vous obtiendrez de la session et le message, de Sorte que vous pouvez faire de la communication avec la N des séances de.

    InformationsquelleAutor Vinayak Shedgeri
  3. 0

    Dans votre réagir le dossier du Projet dans App.js ajouter une connexion websocket & écouter les messages en provenance du serveur websocket.

    class App extends React.Component{
  constructor(){
   super();
    this.state={
      endpoint:"ws://localhost:1234",
      messages:[]
     }
   }

  componentDidMount(){
  //initialize connection
   const ws = new WebSocket(this.state.endpoint)
    ws.onopen = () =>{
     //send any msg from Client if needed
       ws.send(JSON.stringify(temp))
  }
   //save whatever response from client
    ws.onmessage = evt =>{
     this.setState({
      message:this.state.message.concat(evt.data)
    })
  }
 }
 render(){
 return(
 <div>
 <p>{this.state.message.map(items=><li>{items}</li>)}</p>
 </div>
)}

    }

    InformationsquelleAutor AD95