I am developing a registration form using react and storing the data in a mysql database. Every time I start running the server and the client app, I can only click submit on the form once. After the click, the data gets stored in the database, but the following error appears on the server side:
[nodemon] starting `node server.js --port 3001`
running on port 3001
null
events.js:377
throw er; // Unhandled 'error' event
^
Error: Connection lost: The server closed the connection.
at Protocol.end (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\protocol\Protocol.js:112:13)
at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:94:28)
at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:526:10)
at Socket.emit (events.js:412:35)
at endReadableNT (internal/streams/readable.js:1317:12)
at processTicksAndRejections (internal/process/task_queues.js:82:21)
Emitted 'error' event on Connection instance at:
at Connection._handleProtocolError (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:423:8)
at Protocol.emit (events.js:400:28)
at Protocol._delegateError (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\protocol\Protocol.js:398:10)
at Protocol.end (C:\Users\user\OneDrive\Documents\websiteserver\node_modules\mysql\lib\protocol\Protocol.js:116:8)
at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:94:28)
[... lines matching original stack trace ...]
at processTicksAndRejections (internal/process/task_queues.js:82:21) {
fatal: true,
code: 'PROTOCOL_CONNECTION_LOST'
}
[nodemon] app crashed - waiting for file changes before starting...
So I can't submit another form unless I restart the server. Does anyone know how to solve it?
My client side code:
import React, {useState} from 'react'
import {
FormWrap,
Container,
Icon,
FormContent,
Form,
FormH1,
FormLabel,
FormInput,
Text,
FormButton,
TextLeft,
Heading,
Subtitle,
TextWrapper,
LogoPage}
from './SignInElements'
import Axios from 'axios'
const SignIn = ({}) => {
const[name, setname] = useState("")
const[cpf, setcpf] = useState("")
const[tel, settel] = useState("")
const[email, setemail] = useState("")
const register = () => {
Axios.post('http://localhost:3001/register/', {
name: name,
cpf: cpf,
tel: tel,
email: email,
}).then((response) => {console.log(response)});
};
return (
<>
<Container>
<FormWrap>
<FormContent>
<TextLeft action="#">
<Icon to="/"> <LogoPage src={require('../../images/Brand.svg').default} /> </Icon>
<TextWrapper>
<Heading>Test</Heading>
<Subtitle>Test</Subtitle>
</TextWrapper>
</TextLeft>
<Form action="#">
<FormLabel htmlFor="for">name</FormLabel>
<FormInput placeholder="Nome Sobrenome" type="text" required onChange={(e) => setname(e.target.value) }/>
<FormLabel htmlFor="for">cpf</FormLabel>
<FormInput placeholder="000.000.000-00" type="number" required onChange={(e) => setcpf(e.target.value) }/>
<FormLabel htmlFor="for">tel</FormLabel>
<FormInput placeholder="(DDD) 90000-0000" type="text" required onChange={(e) => settel(e.target.value) } />
<FormLabel htmlFor="for">email</FormLabel>
<FormInput placeholder="[email protected]" type="email" required onChange={(e) => setemail(e.target.value) } />
<FormButton type="submit" onClick={register}>Register</FormButton>
</Form>
</FormContent>
</FormWrap>
</Container>
</>
)
}
export default SignIn
My server side code:
const express = require("express");
const mysql = require("mysql");
const app = express();
const cors = require("cors");
app.use(express.json());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header("Access-Control-Allow-Headers", "x-access-token, Origin, X-Requested-With, Content-Type, Accept");
next();
});
const db = mysql.createConnection({
user: "--",
host: "--",
password: "--",
database: "--"
});
app.post('/register', (req, res) => {
const name = req.body.name;
const cpf = req.body.cpf;
const tel = req.body.tel;
const email = req.body.email;
db.query("INSERT INTO table (name, cpf, tel, email) VALUES (?,?,?,?)",
[name,cpf,tel,email],
(err,result)=> {console.log(err);
}
)
});
app.listen(3001, () => {
console.log("running on port 3001")
});
CodePudding user response:
try to force mysql to keep the connection alive. This code should do it
setInterval(function () {
db.query('SELECT 1');
}, 5000);