ReactJS communication with server using WebSockets

Question

I'm pretty new to UI development, JavaScript, ReactJS, so please excuse lack of foundational knowledge.

I'm trying to develop a simple ReactJS application that accepts a User input through a Form, sends to a backend server and receives responses from the server. The backend server is listening on a WebSocket URL 'ws://localhost:8025/websockets/WSService'. I have provided the code snippet below. When I enter some text input and click on 'Submit' the message is successfully received by the server. I'm now trying to receive the response sent by the server and would like to know where to setup the 'onmessage' function.

I have reviewed the following questions already but they are slight variations to my requirement and I'm unable to map the suggestions directly to my solution:

Code snippet provided below:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      ws: new WebSocket('ws://localhost:8025/websockets/WSService'),
      value: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    console.log(this.state.value);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.state.ws.send(this.state.value);
    console.log(event.target.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default App;

The document of react-websocket says that you can render it as component. — Prakash Sharma
– Prakash Sharma, Commented Aug 30, 2017 at 17:05
@Prakash sharma, yes, the react-socket website npmjs.com/package/react-websocket provides a ProductDetail code sample where Websocket is used as a component: "<Websocket url='ws://localhost:8888/live/product/12345/' onMessage={this.handleData.bind(this)}/>", but how do I then use this web socket instance to send messages? The documentation is not very clear. — Hari N
– Hari N, Commented Aug 30, 2017 at 17:51

Hari N · Accepted Answer · 2017-08-31 10:52:27Z

0

Well, I was able to figure out the solution and it turned out to be pretty simple. All I had to do was to define onmessage inside handleSubmit().

  handleSubmit(event) {
    event.preventDefault();
    this.state.ws.send(this.state.value);
    this.state.ws.onmessage = (event) => {
      console.log(event.data);
    };
  }

Now however I see a warning message "Do not mutate state directly. Use setState() react/no-direct-mutation-state", and I'm unable to figure out how to move my 'onmessage' definition into a setState(). But my original requirement is met and I guess I can live with this warning for now!

answered Aug 31, 2017 at 10:52

Hari N

1674 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS communication with server using WebSockets

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related