How do I communicate between client.js and server.js?

Coding Help
1

I’m making a program that will get stats from your profile on a site, then make achievements based off those stats. So far I’m just having it so it’ll send me the stats back. Problem is I don’t know how to have it so you type in a username, it tells that the server.js, then gets the stats, sends it to client.js to display onto your screen. I’ve looked around but everything seems too confusing, where do I start?

1 Like
2

@Jacklack3 I recommend you research into Web Sockets and implement them. Socket.io is a great library to start off on.

3

@Jacklack3 If I understand your question you are just learning how server/client communicate.

Check these concepts:

  • End Points: an address (url) where the server exposes the information and where the client will read it.
  • The role of the Headers: this is how the information is transferred between points.
  • HTTP methods: POST, GET, etc.

Did I understand your question? Hope this helps.

4

Maybe you can research about templates engines like ejs

This is helpfull if you want to send info from the server to a html view.

1 Like
5

How do you send a POST request from the client in the first place?

6

Hi Jacklack,

I had a friend with the same question so I made this basic explainer project: https://glitch.com/~showsearch

If you check out the README it will lay out the parts for you, then check out the doSearch function in client.js, see how it calls off to /search in the backend and uses the results.

This is a basic project with no framework. If you were going to do something cleverer, you could get to grips with a frontend framework like Vue.js (that would be my recommendation).

Hope it helps!

3 Likes
7

@Un-index I’ll reply to your PM here to keep the info public and useful to everyone:

I’d like to ask you for an outline where it (the client) communicates with the server in that it sends data to the server, and then on the server a callback function is executed when the data is received (a very simplified explanation please).

Sure:

Look at the function doSearch in client.js. It creates an AJAX request which is a GET to the backend route search and it passes one piece of data, which is the query, (q for short). This is whatever the user has typed into the search box.

On the backend in server.js, we set up a /search route. It checks the request for the q parameter, then handles it by looking up the matching rows from the database. It returns a response using response.send.

When this data arrives back in the client, it is handled by the callback which creates an <li> element for each result.

You can inspect the results of the search yourself by going to /search?q=Great in your browser. That’s the response that the client handles. You can look at it this way because it the backend search route just uses GET, not POST.

(Glitch is down as I write this so I can’t check the details but this is basically it)

Any other questions go ahead :slight_smile:

4 Likes