A question about how web applications work and how server-client is implemented

Question

This is kind of a weird question I think to ask, but I have browsing about for the past some time and cannot find a clear definite answer.

I understand that a client connects to its own server and communicates with the web-server through sockets and I kind of see how that works in php (I have never used php but have used sockets before so I understand the concept). The issue is I'm trying to get a real view of this. The question is, do websites generally use sockets and contact a web-server to fetch data or the actual html? Or is it a rare choice made in some areas?

If it is generally used, then is the "real" js usually in the server? or is it client-side (for performance sake)?

Context:

Let me explain a bit where I'm coming from, I'm not a web expert, but I am a computer engineering student so most concepts are easy to understand. A "real"-er view of this would be very helpful.

Now, onto why I'm asking this. I'm developing a web-app as part of a project and have done a fair bit of progress on it but everything was done on a local dev server (so basically a client?) I've started wondering about this because I wanted to use a database for my website and since I want to connect to something, I will need to connect to a web-server first (for security sake). My question's intent is to guide me on how and most importantly, where , to setup this server.

I don't think showing any code would be of help here, but assume I have my client running on localhost:1234, my database on localhost:3306, I think I should have a web-server on another port so I can establish this communication, but I want to do it in a clean and legitimate way so all of my current solutions can be ported online with little to no changes (except the obvious)

Answer 1

There's a bunch to unpack here.

First of all, servers can be distant or local . Usually they are distant, local server are mostly used for development purposes.

Even if your server is on your local machine, it still isn't the client. The client is the part that is connecting to your server. For web development it is usually the user browser.

Javascript is a language that can be used server-side, with a NodeJS server, but more often client-side, in your user browser.

Your website, or web application, communicate with your server through various means. Most common one is the HTTP protocol , used to make server requests such as data request to populate your page (in case of an API server, REST or otherwise), or simply request the actual page to display in the browser. The HTTP protocol works by resolving URLs, and making requests to your server registered to this url using special methods such as GET , POST , DELETE , etc...

Sockets are used to create a persistent connection with your server that works both ways. It is mostly used for realtime updates, such as a live chat, as it allows you to push updates from the server instead of having the client request everything.

In most cases the database can be found on the same server as the one serving the website or application, as it is a lot easier to handle, and often faster without the extra networks requests to get the data. However it can be placed on another server, with it's own API to get the data (not necessarily web related)

Ports such as 1234 or 3306 are often used for local development, however once your move your project to a host service, this is usually replace by urls . And the host service will provide you with a config to access the associated database. Or if you are building your own server you might still use ports. It is heavily dependent on your server config.

Hope this clear some things up.

Answer 2

In addition to @Morphyish answer, in the simplest case, a web browser (the client) requests an URL from a server. The URL contains the domain name of the server and some parameters. The server responds with HTML code. The browser interprets the code and renders the webpage.

The browser and the server communicates using HTTP protocol . HTTP is stateless and closes the connection after each request.

The server can respond with static HTML, eg by serving a static HTML file. Or, by serving dynamic HTML. Serving dynamic HTML requires some kind of server language (eg nodejs, PHP, python) that essentially concatenates strings to build the HTML code. Usually, the HTML is created by filling templates with data from the database (eg MySQL, Postgres). There are countless languages, frameworks, libraries that help to achieve this.

In addition to HTML, the server can also serve javascript that is interpreted in the browser and adds dynamics to the webpage. However, there could be 2 types of javascript that should not be mixed. NodeJS runs on the server and formats the server response, client javascript runs on the browser. Remember, client and server are completely isolated and can communicate only through an HTTP connection.

That said, there ways to make persistent connections between client and server with WebSockets, and add all kinds of exotic solutions. The core principle remains the same.

It does not matter if server software (eg apache, nginx) is running on your local machine or anywhere else. The browser makes a request to an address, the DNS and network stack figures out how to reach the server and makes it work.