title: Express server posting twice, exactly two minutes apart?
body: <p>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.  </p>
  
  <p>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!</p>
  
  <pre><code>// 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) =&gt; {
    const { message } = req.body;
    processMessage(message);
    console.log(message);
  });
  
  app.set("port", process.env.PORT || 5000);
  const server = app.listen(app.get("port"), () =&gt; {
    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 =&gt; {
    const request = {
      session: sessionPath,
      queryInput: {
        text: {
          text: message,
          languageCode
        }
      }
    };
  
    sessionClient
      .detectIntent(request)
      .then(responses =&gt; {
        console.log(responses);
        const result = responses[0].queryResult;
        return pusher.trigger("bot", "bot-response", {
          message: result.fulfillmentText
        });
      })
      .catch(err =&gt; {
        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 =&gt; {
        const msg = {
          text: data.message,
          user: "ai"
        };
        this.setState({
          conversation: [...this.state.conversation, msg]
        });
      });
    }
  
    handleChange = event =&gt; {
      this.setState({ userMessage: event.target.value });
    };
  
    handleSubmit = event =&gt; {
      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 =&gt; console.log(d))
        .catch(e =&gt; console.log(e));
  
      this.setState({ userMessage: "" });
    };
  
    render() {
      const ChatBubble = (text, i, className) =&gt; {
        return (
          &lt;div key={`${className}-${i}`} className={`${className} chat-bubble`}&gt;
            &lt;span className="chat-content"&gt;{text}&lt;/span&gt;
          &lt;/div&gt;
        );
      };
  
      const chat = this.state.conversation.map((e, index) =&gt;
        ChatBubble(e.text, index, e.user)
      );
  
      return (
        &lt;div&gt;
          &lt;h1&gt;React Chatbot&lt;/h1&gt;
          &lt;div className="chat-window"&gt;
            &lt;div className="conversation-view"&gt;{chat}&lt;/div&gt;
            &lt;div className="message-box"&gt;
              &lt;form onSubmit={this.handleSubmit}&gt;
                &lt;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"
                /&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  
  <p>It shows occasional console errors: </p>
  
  <p>Source map error: TypeError: NetworkError when attempting to fetch resource.</p>
  
  <p>Resource URL: <a href="http://localhost:3000/static/js/0.chunk.js" rel="nofollow noreferrer">http://localhost:3000/static/js/0.chunk.js</a></p>
  
  <p>Source Map URL: 0.chunk.js.map</p>
  
  <p>but I don't think they are relevant?</p>