Socket.io is not refreshing React component - node.js

Question

I have a Server and Client with sockets, the connection is working between them, but my React component is not refreshing.
My component is a publication that is printed by an array of elements, and I get all this information from and API (Express) connected to a MySQL database.
This is my React file:
import React, { Component } from 'react';
import './component.css';
import io from 'socket.io-client';
import Msg from './components/Msg';
import ItemMsg from './components/ItemMsg';
import Sidebar from './components/Sidebar';
let socket = io('http://localhost:8082');
class App extends Component {
constructor(props){
super(props);
this.state = {
ids: []
};
}
componentDidMount() {
socket.on('update:component', (data) => {
// Debug line
console.log('recived message:', data);
// Update state
this.setState(prevState => {
// Get previous state
const { ids } = prevState;
// Add new item to array
ids.push(data);
// Debug line
console.log('new state:', ids);
// Return new state
return { ids };
});
});
fetch('/todos/ids')
.then((response) => response.json())
.then((responseJson) => {
this.setState({ids: responseJson.data})
console.log(responseJson.data);
})
}
render() {
return (
<div>
<Sidebar/>
<Msg/>
<ul>
{
this.state.ids.map((i, k) =>
<li key={k}><ItemMsg idfromparent={i.ID_Publicacion}/></li>
)
}
</ul>
</div>
);
}
}
export default App;
This is my Server file:
var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);
var messages = [{
id: 1,
text: "I'm a message",
author: "I'm the author"
}];
app.use(express.static('public'));
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-Type');
res.header('Access-Control-Allow-Credentials', 'true');
next();
})
app.get('/hello', function(req, res) {
res.status(200).send("Hello World!");
});
io.on('connection', function(socket) {
console.log('Alguien se ha conectado con Sockets');
socket.on('update:component', function(data) {
socket.emit('Thanks', data);
console.log(data);
});
});
server.listen(8082, function() {
console.log("Server corriendo en http://localhost:8082");
});
Insert component:
import React, { Component } from 'react';
import avatar from '../avatar.jpg'
import '../component.css'
import io from 'socket.io-client';
let socket = io('http://localhost:8082');
class Msg extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleSubmit(e){
e.preventDefault();
var self = this;
// On submit of the form, send a POST request with the data to the server.
fetch('/todo/meterla',{
method: 'POST',
body:JSON.stringify({
publicacion: self.refs.task.value
}),
headers: {"Content-Type": "application/json"}
})
.then(function(response){
return response.json()
}).then(function(data){
console.log('json:', data);
socket.emit('update:component', data );
});
}
componentDidMount(){
socket.on('update:component', (data) => {
// Update state
this.setState(prevState => {
// Get previous state
const { ids } = prevState;
// Add new item to array
ids.push(data);
// Return new state
return { ids };
});
});
}
handleChange(event) {
this.setState({value: event.target.value});
}
render(data) {
return (
<div>
<form className="post" action="index.html" method="post" onSubmit={this.handleSubmit.bind(this)}>
<img className="avatar" src={avatar} alt="" />
<input type="text" placeholder="Escribe algo" ref="task" value={this.state.value} onChange={this.handleChange}/>
<input type="submit" value="Publicar" />
</form>
</div>
);
}
}
export default Msg;
this is the result of the logs

Answer 1

Issue
I want to automatically refresh the component when I insert a data in the database, and thats why i've implemnted the websockets. The fetch brings me a select from the database
I guess you mean every time you send a post request trough handleSubmit(), right?
Post request
Handle your post request with express:
You need to emit a custom event every time you send the post request:
Emits an event to the socket identified by the string name. Any other parameters can be included.
app.post("/foo", function(req, res, next) {
io.sockets.emit("foo", req.body);
res.send({});
});
See: docs
Get value from input
In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().
See: Controlled components
// Set state
this.state = {value: ''};
...
handleChange(event) {
this.setState({value: event.target.value});
}
...
// Render
<input type="text" value={this.state.value} onChange={this.handleChange} />
Handling Events
This binding is necessary to make this work in the callback
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
See: docs
Setup react component + socket.io
const io = require('socket.io-client');
...
class MyComponent extends React.Component {
ComponentWillMount(){
this.socket = io();
}
}
See: Set up React component to listen to socket.io
Listen for event
Register a new handler for the given event.
See: docs
You are only updating the state only one time on fetch(), trigger updateState inside a listener:
ComponentDidMount(){
// Listen for custom event and add handler
this.socket.on('update:component', (data) => {
...
Using state correctly
Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.
Do Not Modify State Directly, the only place where you can assign this.state is the constructor:
this.setState(prevState => {
// Get previous state
const { ids } = prevState;
// Add new item to array
ids.push(data);
// Return new state
return { ids };
});
}
Render
JSX allows embedding any expressions in curly braces so we could inline the map() result
{
this.state.ids.map((i, k) =>
<li key={k}><ItemMsg idfromparent={i.ID_Publicacion}/></li>
);
}
Github
websockets_react/issues/1
Resources
Socket.io: documentation
React-state: documentation
Npm-package: react-socket-io
Learn: React + socket.io