I am trying to communicate with the frontend to the backend. currently, I have the backend sending an expression to the frontend, and the frontend computes it. from there I want the frontend to send the computed answer back to the backend.

Forexample: the backend sends "2 2=" the frontend computes that 2 2 = 4 the frontend then sends the answer 4 to the backend the backend logs the answer 4

Front-end

var XMLHttpRequest = require('xhr2');
const URL = "http://localhost:5000/"
let firstNumber = Math.floor(Math.random() * 10);
let secondNumber = Math.floor(Math.random() * 10);
const express = require('express');
const app = express();



// excecuting random addition
const finalExpression = firstNumber   " "   secondNumber   "="

console.log(finalExpression);

var xhr = new XMLHttpRequest();
xhr.open("POST", URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    expression: finalExpression
}))

Back-end:

const express = require('express')
const app = express()
app.use(express.json())

app.post('/', (req, res) => {
  console.log(req.body.expression);
  arr = req.body.expression.split("")
  console.log(parseInt(arr[0])   parseInt(arr[2]))
  // res.send(parseInt(arr[0])   parseInt(arr[2]))
})

app.listen(5000, () => console.log())

as you can see, I tried res.send in the frontend to the backend.

CodePudding user response：

You appear to have mixed things up a little.

1. You can't use express on the front-end - it's a node application. You shouldn't need to use XMLHttpRequest on the server at all. express will handle all the routing for you.

2. You should use fetch on the front-end to get/post requests to the server (I've used async/await here).

It might look a little more like this.

Server:

// Send an expression to the front-end
app.get('/getExpression', (req, res) => {
  res.send(expression);
});

app.post('/postResult', (req, res) {
  const result = res.body; 
 
  // Calculate whether the result is correct,
  // and then send the answer back
  res.send(isResultCorrect);
});

Client:

// To get the expression from the server
const response = await fetch('/getExpression');
const expression = await response.text();

// To post the result back to the server
const options = { type: 'POST', body: result };
const response = await fetch('/postResult', options);
const isResultCorrect = await response.text();

CodePudding user response：

You invert frontend and backend :) It is the frontend that sends the XMLHTTPREQUEST and it is the server that processes the request and returns the response.

This being said, using res.send is the right solution to return a response. You did the right thing in BACKEND. Therefore, you can uncomment the // res.send(parseInt(arr[0]) parseInt(arr[2])) and leave the backend code as it is.

What is missing in the FRONTEND is a code to listen to and handle this response :

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      console.log(xhr.response);
    }
}

Add it after var xhr = new XMLHttpRequest();

Your code should then look like this :

var xhr = new XMLHttpRequest();
// New code added here
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
       // Handle the response (ex: console.log it)
       console.log(xhr.response);
    }
}

xhr.open("POST", URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    expression: finalExpression
}))