Create a simple messages service (part 4)

1- To solve for the undefined message in the console, we need to install a body parser app. So, in console, type

npm install -s body-parser

2- Once installed, let's require it at the top of our server.js file (above the call to express app):

var bodyParser = require('body-parser')

3- Set the bodyParser variable as middleware* with app.use.

Add this code below app.use(express.static(__dirname))

app.use(bodyParser.json())

*Middleware: it works as a communication layer between client and server: a request comes in and goes out through the middleware before ever hitting your own logic

4- Go back to Postman and hit "send"
5- The console should show the name and message properties for the message object

{"name": "Jane", "message": "from postman"}

6- Instead of console logging the object, we will push this object directly into the messages array:

//i.e. how to handle the post requests from client/browser

app.post('/messages', (req, res) => {
  messages.push(req.body)
  res.sendStatus(200)
})

7- Go back to Postman and hit "send"

8- Go back to localhost:3000 and hit "refresh", you will notice the name and message we sent via Postman are showing up in the list

9- Post messages from the browser and not from Postman: 

Go back to the HTML file and below the get messages function, use a post messages function:

//posts the message via browser and no longer via Postman
function postMessage(message) {
  $.post('http://localhost:3000/messages', message)
}

10- Modify the form in the HTML to also show a message field. This is to allow for sending both name and message data:

  <div class="jumbotron">
    <h1 class="display-4">
      Send message
    </h1>
    <br>
    <input id="name" class="form-control" placeholder="Name">
    <br>
    <textarea id="message" class="form-control" placeholder="Message"></textarea>
    <br>
    <button id="send" class="btn btn-success">Send</button>
  </div>

11- Modify the click() event by creating a message variable and assigning the values from the input fields into it (with the help of jQuery's val() function):

$(()=>{
  $('#send').click(()=>{
    var message = { name: $('#name').val(), message: $('#message').val() }
    postMessage(message)
  })
  getMessages()
})

12- Refresh the page in the browser. Add text to both input fields and hit "send", then refresh the page. Now, below the form, two "undefined" messages will show up. This is because this data is being sent to the server in URL format (URL encoded). So we must set up body parser app to support this. 

Below the app.use(bodyParser.json()) call, let's add:

app.use(bodyParser.urlencoded({extended: false}))

13- Refresh the page in the browser. Add text to both input fields and hit "send", then refresh the page. Now, the text you just added should show up below the fields.

Please remember: in server.js we hold the code that instructs the server how to handle the data that's being transmitted with the client/browser.

To sum up. Here, we:

1. Required and used the body parser app to interpret JSON formatted data
2. Tested this via Postman app
3. On the front end, we used jQuery's $.get() function to get the contents from the message variable in JSON format
4. On the front end, we also used jQuery's $.post() function to post the contents from the input fields over to the message variable in JSON format which is located in the /messages address
5. Used body parser app to interpret URL encoded data that came from the client side