Skip to content

Latest commit

 

History

History
35 lines (24 loc) · 1.84 KB

README.md

File metadata and controls

35 lines (24 loc) · 1.84 KB
Raw

Tiny Post Upload

This example uses the fetch function of Javascript to issue an HTTP POST request to an Express server. The request includes a JSON message which the server stores and returns to the client. Subsequent HTTP GET requests can retrieve the stored message.

Installation

git clone https://github.com/portsoc/tinypostupload.git
cd tinypostupload
npm install
npm start

Then open http://localhost:8080 in your preferred browser.

How it works

The example comprises two parts, a server and a client.

The Server ...

  • listens on port 8080 for HTTP requests.
  • will serve any files contained in the client folder (therefore requesting http://localhost:8080/ will return the index.html file).
  • provides a special path http://localhost:8080/message with different behaviours for 'POST' and 'GET' requests.
    • When a GET request is received, stored message is returned.
    • When a POST request is received, the server updates the message that the server sends in response to a GET request. This updated message is returned to the client as a response to the POST request (so the client can clearly check if the update was successful).

You can test to see what the current message is by opening http://localhost:8080/message in your preferred browser.

The Client

  • The client uses a function called sendMessage to undertake the round-trip from client, to server, and back to the client. This sendMessage function:
    • runs whenever the upload button is pressed.
    • constructs an object that describes the method to be used (POST), a header block where the data format of JSON is specified, and a body that contains the stringified JSON message that is sent to the server.
    • waits for the server to respond and updates the page to reflect what the server sent back (which should be exactly what was sent).