title: Incorporating Socket.IO in React Application
body: <p>I am trying to incorporate socket.io in a React application. When the user clicks a button, I want the program to display a modal notifying all other users that the button has been clicked. In my current implementation, I set up the socket.io connection in my server.js file and use socket.io-client in one of the component files to send / listen for information from the server.</p>
  
  <p>Server.js file: </p>
  
  <pre><code>io.on("connection", function(socket) {
      console.log("Socket.io connection established");
  
      socket.emit("saved article", function(article){
          console.log("article saved");
          io.emit("saved article", article);
      });
  }); 
  </code></pre>
  
  <p>Component file: </p>
  
  <pre><code>const socket = io();
  
  class Search extends Component {
      state = {
          topic: "",
          start: "",
          end: "",
          results: [],
          savedModalTriggered: false,
          articlesSaved: [] 
      };
  
      componentDidMount(){
          socket.on("saved article", article =&gt; {
              let articlesSavedCopy = this.state.articlesSaved;
              articlesSavedCopy.push(article.title);
              this.setState({savedModalTriggered: true, articlesSaved: articlesSavedCopy});
          });
      };
  
      saveOrUnsave = (index) =&gt; {
          API.saveArticle(this.state.results[index]).then(response =&gt; {
              const article = {
                  title: response.data.title
              };
              socket.emit("saved article", article);
              this.reverseSaved(index, response.data);
          });
      };
  };
  </code></pre>
  
  <p>The following problems arise when I run my code: </p>
  
  <p>1) When the Search component mounts, the program triggers socket.on("saved article"), causing the notification modal to pop up even though the saveOrUnsave function was not called. </p>
  
  <p>2) After some period of time, I get the following error in my console: "WebSocket connection to localhost:3000... failed: Connection closed before receiving a handshake response" </p>
  
  <p>3) I also get the following error in my console: "WebSocket connection to localhost:3000... failed: WebSocket opening handshake timed out"</p>