Sending Variables between Client and Server

I’m working on a project where the user can enter a URL and receive the HTTP status of that URL in return. Here’s the optimal workflow:

User enters URL into textbox in index.html
On button click, client JavaScript pulls value from text box and assigns it to variable
Variable is sent from client to server
Server uses Axios to preform a GET request and return the HTTP status as a string
Server sends that string back to client
Client updates placeholder HTML to show that string

I’ve been able to get everything working but the transfer between client and server. How am I able to send this information back and forth? In the default server.js it shows:

// server.js
// where your node app starts

// init project
const express = require('express');
const app = express();

// we've started you off with Express, 
// but feel free to use whatever libs or frameworks you'd like through `package.json`.

// http://expressjs.com/en/starter/static-files.html
app.use(express.static('public'));

// http://expressjs.com/en/starter/basic-routing.html
app.get('/', function(request, response) {
  response.sendFile(__dirname + '/views/index.html');
});

// listen for requests :)
const listener = app.listen(process.env.PORT, function() {
  console.log('Your app is listening on port ' + listener.address().port);
});

which says that the server is listening to a specified port. How would I be able to accomplish this communication between client and server, and vice versa?

Thank you very much! I’ve been stumped for too long on this. :laughing:

Look through this article - http://expressjs.com/en/starter/basic-routing.html

You can use fetch API on client, or, if you’re using JQuery, $.ajax, etc.

hi @bdn! If you want to keep using XMLHttpRequests (which I think are what come default with the standard node/express starter project) this can tell you how to include data in the request that you send back to the server:


and this can tell you how to retrieve data that you sent in that request (on the server side):

Please feel free to follow up to clarify any questions that come up, or, if it would be simpler, you can send me an invite so that I can work on it with you!

Thank you very much! I’d be super grateful if you could join the project and discuss a bit further. I don’t think I have the ability to PM you the invite link, how should I send it over?
Edit: LOL, just after posting I got promoted a trust level. I’ll send it over.

1 Like

Hi @bdn!

Here’s a minimal example app using the Fetch API that you can check out: https://glitch.com/edit/#!/defiant-bluebell

fetch

What’s happening is that we use fetch to pass whatever string is entered into the form over to the server with a POST request.
Then on the server, we edit the string (here, just adding the words edited-) and then return the manipulated string over to the client, at which point it’s added to the page.

On the client side (in client.js), we submit the POST request like this:

dreamsForm.onsubmit = function(event) {
  // stop our form submission from refreshing the page
  event.preventDefault();
  
  // format the data we want to pass to the server as JSON
  const data = {dream: dreamInput.value};
  
  // submit a POST request
  fetch('/editDream', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {'Content-Type': 'application/json'},
  })
    .then(response => response.json())
    .then(data => {
      // get the response from the server POST request
      console.log(JSON.stringify(data));
      
      // Add the response to the page
      appendNewDream(data.dream);
    
      // reset form
      dreamInput.value = '';
      dreamInput.focus();
  });
};

and then on the server side (in server.js), we use bodyParser to help interpret our requests as JSON, manipulate the string, and then send it back in a response:

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// receives data from our form on the client, edits the string, and passes the edited string back to the client
app.post('/editDream', function(request, response) {
  const dream = request.body.dream;
  console.log(dream);
  
  const editedDream = `edited-${dream}`;
  response.send({ dream: editedDream})
});

Hope this helps!

1 Like