Incorporating Socket.IO in React Application - reactjs

Question

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.
Server.js file:
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);
});
});
Component file:
const socket = io();
class Search extends Component {
state = {
topic: "",
start: "",
end: "",
results: [],
savedModalTriggered: false,
articlesSaved: []
};
componentDidMount(){
socket.on("saved article", article => {
let articlesSavedCopy = this.state.articlesSaved;
articlesSavedCopy.push(article.title);
this.setState({savedModalTriggered: true, articlesSaved: articlesSavedCopy});
});
};
saveOrUnsave = (index) => {
API.saveArticle(this.state.results[index]).then(response => {
const article = {
title: response.data.title
};
socket.emit("saved article", article);
this.reverseSaved(index, response.data);
});
};
};
The following problems arise when I run my code:
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.
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"
3) I also get the following error in my console: "WebSocket connection to localhost:3000... failed: WebSocket opening handshake timed out"

Answer 1

The problem is that you are emitting a saved article event upon connection. When the client opens a new connection in the componentDidMount callback the server emits an event, thus triggering the callback you have registered.
If that is not what you want you should remove the emit logic from your connection callback in the server code.