title: react-native How to use websocket?
body: <h3>Project Structure</h3>
  
  <p><a href="https://i.stack.imgur.com/yW00c.png" rel="nofollow noreferrer">project structure</a></p>
  
  <h3>Problem</h3>
  
  <p>As you see above, I want to connect React-Native-App with React-Web Using websocket.</p>
  
  <p>I succed to send data from React Native app to Server.js but fail to send data from Server.js to React Web Client(App.js).</p>
  
  <p>Here is My React (Web) directory structure.</p>
  
  <h3>React (Web) Structure</h3>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/client
    /node_modules
    /public
    /src
      /App.js
    package.json
  server.js
  package.json</code></pre>
  </div>
  </div>
  </p>
  
  <p>And My Code.</p>
  
  <h3>Code</h3>
  
  <ul>
  <li>App.js (React Web : ../client/src/App.js)</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  const WebSocket = require('ws');
  
  class App extends Component {
    componentDidMount() {
      let ws = new WebSocket('ws://localhost:8080');
      ws.on('message', function incoming(data) {
        console.log(data);
      });
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h1 className="App-title"&gt;Welcome to React&lt;/h1&gt;
          &lt;/header&gt;
          &lt;p className="App-intro"&gt;
            To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
          &lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>Server.js (React Web : ../Server.js)</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/**
   * WebSocket
   */
  
  const express = require('express');
  const http = require('http');
  const WebSocket = require('ws');
  
  const app = express();
  
  app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      next();
  });
  
  //initialize a simple http server
  const server = http.createServer(app);
  
  //initialize the WebSocket server instance
  const wss = new WebSocket.Server({ server });
  
  wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(data) {
      // Broadcast to everyone else.
      wss.clients.forEach(function each(client) {
        console.log('client', client);
        if (client !== ws &amp;&amp; client.readyState === WebSocket.OPEN) {
          client.send(data);
        }
      });
      console.log('received: %s', data);
      ws.send(`Hello, you sent -&gt; ${data}`);
    });
  
    ws.on('hello', function incoming(data) {
      console.log('received: %s', data);
    });
    ws.send('Hi there, I am a WebSocket server');
  });
  
  //start our server
  server.listen(process.env.PORT || 8080, () =&gt; {
      console.log(`Server started on port ${server.address().port} :)`);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>App.js (React Native App)</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              open: false,
              connected: false,
          };
  
          this.socket = new WebSocket('ws://127.0.0.1:8080');
          this.socket.onopen = () =&gt; {
            this.setState({connected:true})
          }; 
          this.testPusher = this.testPusher.bind(this);
      }
      
      testPusher() {
          console.log('testPusher');
          if( this.state.connected ) {
              this.socket.send(JSON.stringify({
                  messgaes: 'hello~!~!~!',
              }))
              this.setState(prevState =&gt; ({ open: !prevState.open }))
          }
      }
      
      // ...
  }</code></pre>
  </div>
  </div>
  </p>
  
  <h3>How can I do this?</h3>
  
  <p>Please let me know, Thank you!</p>
  
  <h3>Is there another solution?</h3>
  
  <p>If there is, Please Recommend me!</p>
  
  <p>Thanks for reading!</p>