CODEWITHSUNDEEP
reactjs
Worker
Worker

Reputation: 283

How to update the value coming from web socket server in React.js?

I'm new to React and was trying to set and then update the value from a websocket object in javascript to render it to the interface using React.

Below is the whole javascript code I'm using. I tried using the componentDidMount() and componentWillMount() methods in React but nothing seems to work.

Can anybody please tell how it can be done ? The value coming is constantly changing. I have added the code that I was experimenting with below but this also doesn't seem to work. If any similar solution for the same will also be helpful.

var client = new WebSocket('ws://localhost:8000/','echo-protocol');
        var val =null;

               client.onerror = function() {
                   console.log('Connection Error');
               };

               client.onopen = function() {
                  function sendNumber() {
                       if (client.readyState === client.OPEN) {
                           var number = Math.round(Math.random() * 0xFFFFFF);
                           client.send(number.toString());
                           setTimeout(sendNumber, 1000);
                       }
                   }
                   sendNumber();
               };

               client.onclose = function() {
                   console.log('echo-protocol Client Closed');
               };
        /*
               client.onmessage = function(e) {
                   if (typeof e.data === 'string') {
                        val=e.data;
                     console.log("Received: '" + val + "'");
                   }
               };

            */

               var ReceivedData = React.createClass({
                  getInitialState: function() {
                     return { value : [] };
                  },

                  componentDidMount: function() {
                      client.onmessage = function(e) {
                           if (typeof e.data === 'string') {
                                this.setState({
                                    value: e.data
                                })
                           }
                       };
                      },

                  render: function() {
                        return (React.createElement("div",this.state.value))
                    }
             });

            ReactDOM.render(React.createElement(ReceivedData,null), document.getElementById("container"));

Upvotes: 3

Views: 3503

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

Here is a fixed code. Demo(using jsx)

var ReceivedData = React.createClass({

  getInitialState: function() {
    return {
      data: ''
    };
  },

  componentDidMount: function() {
    client.onmessage = function(e) {
      this.setState({
        data: e.data
      });
    }.bind(this); // you need to bind here
  },
  render: function() {
    // pass children (text content) as the 3rd argument
    return React.createElement("div", null, this.state.data);
  }
});

ReactDOM.render(
  React.createElement(ReceivedData, null), // react element
  document.getElementById("container")); // incorrect parenthesis

Upvotes: 1

Related Questions