This common diagram, frequently encountered when learning about web technology, often leads to confusion among newcomers regarding the roles of servers and clients.
Le newcomer: "What on earth?! In the diagram, the server and client are depicted as separate computers. However, when I build a web app, my PC acts as a server when I run 'npm start' in VScode, and it acts as a client when I open the output in the browser."
So, I would like to share my understanding in client - server working here and hopefully, this will be helpful for those who are new to web development.
What is Server and Client?
First, keep in mind that the server and client both are applications like other applications on your phone or PC. The server will serve files like HTML, JSON, mp4, mp3, PNG, jpg, etc and the client will request the files to the server and display the files. For instance, Live Server (a VScode extension) acts as a server, while browsers act as clients.
However, when working with frameworks like Django or ExpressJS, you don’t need a separate server. These frameworks inherently function as servers.
Wait! The server and client are applications so we can run on the same computer that is fine but how the client can send a request to the server for the file? need a network right? Here the concepts of localhost and loopback come into the picture.
for visualization purposes just think that your entire PC is a pipeline and the pipeline has holes called ports. Also, consider the applications in your PC are extensions to collect or contribute water through the pipeline. So when you run your server and client(browser) in your system they are up in 2 ports and communicate with each other.
HTTP Request and Response
Server and Client interact with each other through HTTP requests and HTTP responses. So we need an idea about the HTTP.
HTTP is a stateless protocol that is used in web technology, check the link to dive more into HTTP.
for visualization purposes just think the HTTP request is a letter from the client to request a file, and the HTTP response is a reply letter from the server, maybe it’s a positive or negative reply. Like in a formal letter each HTTP request and response have a header and body. Each HTTP header has the metadata of the server and client like OS, IP, requested time, etc. Check the network tab in your browser to get the log to understand the server-client interactions.
Server as a Computer
The server is an application, so is the diagram wrong? Absolutely not; consider the analogy of smartphones. A smartphone can perform various tasks like taking photos, gaming, and routing, but its primary purpose remains communication (i.e., making calls). Similarly, when we deploy a server on the internet, it must be available 24/7 to handle numerous client requests efficiently. To achieve this, we often dedicate specific computers or clusters solely to run the server. Consequently, these computers are commonly referred to as servers.
Let’s check how the server-client interaction happening in localhost, LAN, and internet.
Server in Localhost
For the demo purpose, I’m going to use Live Server (a VScode extension) as the server and I have created index.html and home.html files to serve. To start the server enter Ctrl + Shift + P and select “open with live server” Then the live server will be up in localhost:5500
Here the client requested to root ( localhost:5500/ ) so in this case the live server gives the root file index.html (the live server considers the file name “index.html” file as the root file ).
Here the client requested the path /home.html ( localhost:5500/home.html ) so the server serves the file home.html
Here the client requested the path /abc.html ( localhost:5500/abc.html ) but there is no file abc.html in the server so the server returns an error, the path not found ( status code 404 )
Server in LAN
Now, we understand how to run the server in localhost, our next challenge is to access files from a device other than the one running the server. Let’s explore how to view the previous output on a mobile phone that’s connected to the same Wi-Fi router as the computer running the server.
Use ipconfig(windows) or ifconfig(Linux) to get network configurations. Keep in mind that the result may contain sensitive data so be aware when you share this output. Here 192.168.1.6 is the local IP of the PC running server.
Yey! If request to 192.168.1.6:5500 any device from the same LAN will get the index.html file.
Server in Internet
Now we can try to make the server public, to do this we need to download the service Ngrok. After downloading we get a CLI tool and we need to authenticate to the tool using a token and enable the tunnel ( in our case the port number is 5500 )
After executing the tunnel command we will get a temp URL from Ngrok, so the server is public now!! But there is a problem, if we close the server, close the tunnel, or shut down the PC then the public can’t access the server. So we need to use a hosting platform like Netlify.
Conclusion
In this part we’ve covered how web servers serve static files. We’ve discussed the fundamental concepts and explored ways to visualize these ideas.
Stay tuned for more insightful explorations into the world of web servers!”
Top comments (0)