Express server posting twice, exactly two minutes apart? - node.js

Question

I am trying to build a react chat box using an express server and pusher to listen for a dialogflow bot. It works fine at first, but the bot always responds a second time, repeating itself (but sometimes with a different response) exactly two minutes later to the second.
I have some logging statements in the server code to try and debug it, and have been monitoring the react front-end for network activity. It appears that react is only sending one fetch request, because there is only one network log in the browser. But on the server-side, the request is logged twice. I'm not sure why this is or what I'm doing wrong!
// server.js
require("dotenv").config({ path: "variables.env" });
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const processMessage = require("./process-message");
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post("/chat", (req, res) => {
const { message } = req.body;
processMessage(message);
console.log(message);
});
app.set("port", process.env.PORT || 5000);
const server = app.listen(app.get("port"), () => {
console.log(`Express running → PORT ${server.address().port}`);
});
//process-message.js
const Dialogflow = require("dialogflow");
const Pusher = require("pusher");
const projectID = "firstchatbox-fakeURL";
const sessionID = "123456";
const languageCode = "en-US";
const config = {
credentials: {
private_key: process.env.DIALOGFLOW_PRIVATE_KEY,
client_email: process.env.DIALOGFLOW_CLIENT_EMAIL
}
};
const pusher = new Pusher({
appId: process.env.PUSHER_APP_ID,
key: process.env.PUSHER_APP_KEY,
secret: process.env.PUSHER_APP_SECRET,
cluster: process.env.PUSHER_APP_CLUSTER,
encrypted: true
});
const sessionClient = new Dialogflow.SessionsClient(config);
const sessionPath = sessionClient.sessionPath(projectID, sessionID);
const processMessage = message => {
const request = {
session: sessionPath,
queryInput: {
text: {
text: message,
languageCode
}
}
};
sessionClient
.detectIntent(request)
.then(responses => {
console.log(responses);
const result = responses[0].queryResult;
return pusher.trigger("bot", "bot-response", {
message: result.fulfillmentText
});
})
.catch(err => {
console.error("ERROR:", err);
});
};
module.exports = processMessage;
// Here is the React front-end code, even though i'm ~60% sure
//the bug is server-side at this point
//App.js
import React, { Component } from "react";
import Pusher from "pusher-js";
import "./App.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
userMessage: "",
conversation: []
};
}
componentDidMount() {
const pusher = new Pusher("fakepusherappID454564564566", {
cluster: "us3"
});
const channel = pusher.subscribe("bot");
channel.bind("bot-response", data => {
const msg = {
text: data.message,
user: "ai"
};
this.setState({
conversation: [...this.state.conversation, msg]
});
});
}
handleChange = event => {
this.setState({ userMessage: event.target.value });
};
handleSubmit = event => {
event.preventDefault();
if (!this.state.userMessage.trim()) return;
const msg = {
text: this.state.userMessage,
user: "human"
};
this.setState({
conversation: [...this.state.conversation, msg]
});
fetch("http://localhost:5000/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
message: this.state.userMessage
})
})
.then(d => console.log(d))
.catch(e => console.log(e));
this.setState({ userMessage: "" });
};
render() {
const ChatBubble = (text, i, className) => {
return (
<div key={`${className}-${i}`} className={`${className} chat-bubble`}>
<span className="chat-content">{text}</span>
</div>
);
};
const chat = this.state.conversation.map((e, index) =>
ChatBubble(e.text, index, e.user)
);
return (
<div>
<h1>React Chatbot</h1>
<div className="chat-window">
<div className="conversation-view">{chat}</div>
<div className="message-box">
<form onSubmit={this.handleSubmit}>
<input
value={this.state.userMessage}
onInput={this.handleChange}
onChange={this.handleChange}
className="text-input"
type="text"
autoFocus
placeholder="Type your message and hit Enter to send"
/>
</form>
</div>
</div>
</div>
);
}
}
export default App;
It shows occasional console errors:
Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: http://localhost:3000/static/js/0.chunk.js
Source Map URL: 0.chunk.js.map
but I don't think they are relevant?

Answer 1

Exactly two minutes apart sounds like it could be a browser request that timed out and the browser is retrying.
And, now that I look at your app.post() handler, you don't seem to send any sort of response back to the client so that could cause an issue like this.
All http requests received by your server must send some sort of response, even if they just send a 404 or 500 status back. Either do res.sendStatus(200) or res.send("some response");.
You can open the debugger in Chrome and look at the network tab and then submit your form and watch exactly what network traffic happens between client and server.
And, since you tried this and it fixed your problem, I'm posting it as an answer.