0

client (browser) POSTs values like username, password, email ... My NodeJS application receives them and now needs to first check if the username/email is already used in the database, and responses to client "Username is already taken" if so.

My problem is how do I tell the client within app.post() ?

app.post("/register", function(req,res){

Should I just use Socket.IO for everything and just avoid using POST (I thought POST was handy)?

1 Answer 1

1

EDIT

My problem is I want the client to be triggered on a message like "Username is already taken" and just do a minor change on a label "Username taken" instead of writing the entire page new.

Ok, I think I see the issue you face.

Assuming you have a page on the client with a <form> such as this:

<form id="myform" action="/register" method="post">
  <label for="fname">First name:</label>
  <input type="text" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

When the user clicks the Submit button, their browser will send the POST request by redirecting the user's page.

If I understand correctly, you want to send this request without the user being redirected.

If this is indeed the case, I would use a fetch (or something similar) to do the job.

So on the client's page, you would do something like this:

First, add this prop to your form:

...
<form onsubmit="submitForm(event)">
...

Then add something like this script:

<script type="text/javascript">
async function submitForm(event) {
   event.preventDefault(); // This will keep the user from being redirected

  try {
    const username = getUsernameValue(); // get the value from the input or something

    // Fetch will send a POST request to /register without navigating the page
    const response = await fetch('/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      // The body is what will be in req.body on the server
      body: JSON.stringify({
        username: username
      })
    });

    const responseData = response.json();
    /*
      Assuming the server returns some structure like:
      {
         error: "Username is already taken"
      }
    */
    if (responseData.error && responseData.error === 'Username is already taken') {
      // Do something here
    } else {
      console.log("Everything is OK");
    }
  } catch(err) {
    console.error('something went wrong', err);
  }
}
</script>

Original Answer

Socket.IO (more broadly, Websockets) and POST (REST APIs) function differently and each can help solve different problems.

For the type of situation you outlined, I would continue to use a REST API.

I recommend reading up a bit on Express and how to send a response.

Here is some pseudo-code that will hopefully point you in the right direction:

app.post("/register", function(req,res){
  const { username, email, password } = req.body;

  if (!isUsernameUnique(username) || !isEmailUnique(email)) {
    return res.status(400).send('Username is already taken');
  }

  // Save in Database
  ...
  ...
  ...

  // Everything is good now
  res.send("Created user");
});
Sign up to request clarification or add additional context in comments.

2 Comments

My problem is I want the client to be triggered on a message like "Username is already taken" and just do a minor change on a label "Username taken" instead of writing the entire page new.
@VolkanY See my latest edit - let me know if this is closer to what you are after

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.