web服务器和web客户端_Web的工作方式第二部分：客户端-服务器模型和Web应用程序的结构...-CSDN博客

web服务器和web客户端

by Preethi Kasireddy

通过Preethi Kasireddy

Web的工作方式第二部分：客户端-服务器模型和Web应用程序的结构 (How the Web Works Part II: Client-Server Model & the Structure of a Web Application)

In my previous post, we dived into how the web works on a basic level, including the interaction between a client (your computer) and a server (another computer which responds to the client’s requests for websites).

在我的上一篇文章中，我们深入探讨了网络的基本工作方式，包括客户端(您的计算机)和服务器(另一台响应客户端对网站请求的计算机)之间的交互。

For this post — part two of a four-part series — let’s double click on understanding how the client, server and other parts of a basic web application are actually configured to make your web browsing experience possible.

对于本篇文章(共四部分，其中第二部分)，我们双击了解如何实际配置基本Web应用程序的客户端，服务器和其他部分，以使您的Web浏览体验成为可能。

客户端-服务器模型 (The Client-Server Model)

This idea of a client and server communicating over a network is called the “Client-Server” model. It’s what makes viewing websites (like this one) and interacting with web applications (like Gmail) possible.

客户端和服务器通过网络进行通信的想法称为“客户端-服务器”模型。这就是使查看网站(如本网站)以及与Web应用程序(如Gmail)进行交互的原因。

The Client-Server model is really just a way to describe the give-and-take relationship between the client and server in a web application — just like you might use “boyfriend” and “girlfriend” to describe your personal relationships. It’s the details of how information passes from one end to the other where the picture gets complicated.

客户端-服务器模型实际上只是描述Web应用程序中客户端和服务器之间的供求关系的一种方式-就像您可能使用“男朋友”和“女友”来描述您的个人关系一样。这是有关信息如何从一端传递到另一端的细节，这会使图像变得复杂。

基本的Web App配置 (A Basic Web App Configuration)

There are hundreds of ways to configure a web application. That said, most of them follow the same basic structure: a client, a server, and a database.

有数百种方法来配置Web应用程序。也就是说，它们大多数遵循相同的基本结构：客户端，服务器和数据库。

客户端 (The client)

The client is what the user interacts with. So “client-side” code is responsible for most of what a user actually sees. This includes:

客户是用户与之交互的对象。因此，“客户端”代码负责用户实际看到的大部分内容。这包括：

Defining the structure of the web page
定义网页的结构
Setting the look and feel of the web page
设置网页的外观
Implementing a mechanism for responding to user interactions (clicking buttons, entering text, etc.)
实施一种机制来响应用户交互 (单击按钮，输入文本等)

Structure: The layout and content of your webpage are defined by HTML (usually HTML 5 when it comes to web apps these days, but that’s another story.)

结构：网页的布局和内容由HTML定义(如今，当涉及到Web应用程序时，通常为HTML 5，但这是另一回事了。)

HTML stands for Hyper Text Markup Language. It allows you to describe the basic physical structure of a document using HTML tags. Each HTML tag describes a specific element on the document.

HTML代表超文本标记语言。它使您可以使用HTML标记描述文档的基本物理结构。每个HTML标记都描述了文档中的特定元素。

For example:

例如：

The content within the “<h1>” tag describes the heading.
“ <h1>”标签中的内容描述了标题。
The content within the “<p>” tag describes a paragraph.
“ <p>”标签中的内容描述了一个段落。
The content within the “<button>” tag describes a button.
“ <button>”标签中的内容描述了一个按钮。
And so on…
等等…

A web browser uses these HTML tags to determine how to display the document.

Web浏览器使用这些HTML标记来确定如何显示文档。

Look and Feel: To define the look and feel of a webpage, web developers use CSS, which stands for Cascading Style Sheets. CSS is a language that that lets you describe how the elements defined in your HTML should be styled, allowing changes in font, color, layout, simple animations, and other superficial elements.

外观：为了定义网页的外观，Web开发人员使用CSS(CSS代表层叠样式表)。 CSS是一种语言，可让您描述应如何设置HTML中定义的元素的样式，从而允许更改字体，颜色，布局，简单的动画以及其他表面元素。

You could set styles for the above HTML page like this:

您可以像这样为上述HTML页面设置样式：

User interactions: Lastly, JavaScript comes into the picture to handle user interactions.

用户交互：最后，图片中使用JavaScript来处理用户交互。

For example, if you want to do something when a user clicks your button, you might do something like this:

例如，如果您想在用户单击按钮时执行某些操作，则可以执行以下操作：

Some user interactions, like the one above, can be handled without ever having to reach out to your server — hence the term “client-side JavaScript.” Other interactions require that you send the requests to your server to handle.

可以像上面那样进行某些用户交互，而无需与服务器联系，因此称为“客户端JavaScript”。其他交互要求您将请求发送到服务器以进行处理。

For example, if a user posts a comment on a thread, you might want to store that comment in your database to keep all the riff-raff organized in one place. So, you’d send the request to the server with the new comment and user ID, and the server would listen for those requests and process them accordingly.

例如，如果用户在某个线程上发布评论，则您可能希望将该评论存储在数据库中，以将所有即兴演奏组保持在一个地方。因此，您将使用新的注释和用户ID将请求发送到服务器，服务器将侦听这些请求并进行相应处理。

We’ll go much more in depth into HTTP request-response in the next part of this series.

在本系列的下一部分中，我们将更深入地探讨HTTP请求-响应。

服务器 (The server)

The server in a web application is what listens to requests coming in from the client. When you set up an HTTP server, you set it up to listen to a port number. A port number is always associated with the IP address of a computer.

Web应用程序中的服务器是侦听来自客户端的请求的服务器。设置HTTP服务器时，将其设置为侦听端口号。端口号始终与计算机的IP地址相关联。

You can think of ports as separate channels on each computer that you can use to perform different tasks: one port could be surfing www.facebook.com while another fetches your email. This is possible because each of the applications (the web browser and the email client) use different port numbers.

您可以将端口视为每台计算机上可用于执行不同任务的单独通道：一个端口可能正在www.facebook.com上冲浪，而另一个端口正在获取您的电子邮件。这是可能的，因为每个应用程序(Web浏览器和电子邮件客户端)使用不同的端口号。

Once you’ve set up an HTTP server to listen to a specific port, the server waits for client requests coming to that specific port, performs any actions stated by the request, and sends any requested data via an HTTP response.

将HTTP服务器设置为侦听特定端口后，该服务器将等待客户端请求到达该特定端口，执行请求所声明的所有操作，并通过HTTP响应发送所有请求的数据。

数据库 (The database)

Databases are the basements of web architecture — most of us are scared to go down there, but they’re critical to a solid foundation. A database is a place to store information so that it can easily be accessed, managed, and updated.

数据库是Web体系结构的基础-我们大多数人都不怕到那里去，但是它们对于扎实的基础至关重要。数据库是一个存储信息的地方，以便可以轻松地对其进行访问，管理和更新。

If you’re building a social media site, for example, you might use a database to store information about your users, posts, and comments. When a visitor requests a page, the data inserted into the page comes from the site’s database, allowing for the real-time user interactions we take for granted on sites like Facebook or apps like Gmail.

例如，如果您要建立一个社交媒体网站，则可以使用数据库来存储有关用户，帖子和评论的信息。当访问者请求页面时，插入到页面中的数据来自网站的数据库，从而允许我们理所当然地在Facebook等网站或Gmail等应用程序上进行实时用户交互。

那是所有人！ (好吧，排序…) (That’s all folks! (Well, sorta…))

It’s as simple as that. We just walked through all the basic functionality of a web application.

就这么简单。我们仅介绍了Web应用程序的所有基本功能。

如何扩展简单的Web应用程序 (How to Scale a Simple Web Application)

The above configuration is great for simple applications. But as an application grows, a single server won’t have the power to handle thousands — if not millions — of concurrent requests from visitors.

上面的配置非常适合简单的应用程序。但是随着应用程序的增长，单个服务器将无权处理来自访客的数千个(甚至不是数百万个)并发请求。

In order to scale to meet these high volumes, one thing we can do is distribute the incoming traffic across a group of back-end servers.

为了扩展以满足这些高容量，我们可以做的一件事是在一组后端服务器之间分配传入流量。

This is where things gets interesting. You have multiple servers, each with its own IP address. So how does the Domain Name Server (DNS) know which instance of your application to send your traffic to?

这就是事情变得有趣的地方。您有多个服务器，每个服务器都有自己的IP地址。那么域名服务器(DNS)如何知道将您的流量发送到您的应用程序的哪个实例？

The simple answer is that it doesn’t. The way to manage all these separate instances of your application is through something called a load balancer.

简单的答案是，事实并非如此。管理应用程序的所有这些独立实例的方法是通过一种称为负载平衡器的方法。

The load balancer acts as a traffic cop that routes client requests across the servers in the fastest and most efficient manner possible.

负载平衡器充当流量警察，以最快，最有效的方式在服务器之间路由客户端请求。

Since you can’t broadcast the IP addresses of all your server instances, you create a Virtual IP address, which is the address you publicly broadcast to clients. This Virtual IP address points to your load balancer. So when there’s a DNS lookup for your site, it’ll point to the load balancer. Then the load balancer jumps in to distribute traffic to your various back-end servers in real-time.

由于无法广播所有服务器实例的IP地址，因此您将创建一个虚拟IP地址，这是您公开广播给客户端的地址。该虚拟IP地址指向您的负载均衡器。因此，当您的站点进行DNS查找时，它将指向负载平衡器。然后，负载均衡器会进入以将流量实时分发到您的各种后端服务器。

You might be wondering how the load balancer knows which server to send traffic to. The answer: algorithms.

您可能想知道负载均衡器如何知道将流量发送到哪个服务器。答案：算法。

One popular algorithm, Round Robin, involves evenly distributing incoming requests across the your server farm (all your available servers). You would typically choose this approach if all of your servers have similar processing speed and memory.

一种流行的算法，Round Robin，涉及在服务器场(所有可用服务器)之间平均分配传入请求。如果所有服务器的处理速度和内存都差不多，则通常会选择这种方法。

With another algorithm, Least Connections, the next request is sent to the server with the least number of active connections.

使用另一种算法“最少连接”，将下一个请求发送到活动连接数最少的服务器。

There are many more algorithms you can implement, depending on your needs.

根据需要，您可以实现更多算法。

So now the flow looks like this:

现在，流程如下所示：

服务 (Services)

Ok, so we solved our traffic problem by creating pools of servers and a load balancer to manage them. Works great, right?

好的，因此我们通过创建服务器池和负载均衡器来管理它们来解决流量问题。效果很好，对吧？

…But just replicating a bunch of servers could still lead to problems as your application grows. As you add more functionality to your application, you’d have to keep maintaining the same monolithic server while it continues to grow. To solve this, we need a way to decouple the functionality of the server.

…但是，随着应用程序的增长，仅复制一堆服务器仍可能导致问题。当您向应用程序添加更多功能时，您必须在保持相同的整体服务器持续增长的同时保持其状态。为了解决这个问题，我们需要一种解耦服务器功能的方法。

This is where the idea of a service comes in. A service is just another server, except that it only interacts with other servers, as opposed to a traditional web server which interacts with clients.

这就是服务的思想所在。服务只是另一台服务器，只不过它仅与其他服务器交互，而不是与客户端交互的传统Web服务器。

Each service has a self-contained unit of functionality, such as authorizing users or providing a search functionality. Services allow you to break up your single web server into multiple services that each performs a discrete functionality.

每个服务都有一个独立的功能单元，例如授权用户或提供搜索功能。服务使您可以将单个Web服务器分解为多个服务，每个服务执行独立的功能。

The main benefit of breaking up a single server into many services is that it allows you to scale the services completely independently.

将单个服务器拆分为许多服务的主要好处是，它使您可以完全独立地扩展服务。

The other advantage here is that it allows teams within a company to work independently on a particular service, rather than having 10s, 100s or even 1000s of engineers working on one monolithic server, which quickly becomes a project management nightmare.

这里的另一个优点是，它允许公司内的团队独立地处理特定的服务，而不是让10、100甚至1000的工程师在一个整体服务器上工作，这很快就成为项目管理的噩梦。

Quick note here: this concept of load balancers and pools of back-end servers and services gets very challenging as you scale to add more and more servers to your application. It’s gets especially tricky with things like session persistence — such as how to handle sending multiple requests from a client to the same server for the duration of a session — and how to deploy your load balancing solution. We’ll leave those advanced topics out for this post.

在此处快速说明：负载平衡器以及后端服务器和服务池的概念在您进行扩展以向应用程序中添加越来越多的服务器时变得非常具有挑战性。对于会话持久性之类的事情，尤其棘手(例如，在会话期间如何处理从客户端向同一服务器发送多个请求)以及如何部署负载平衡解决方案。在本文中，我们将那些高级主题排除在外。

内容交付网络 (Content Delivery Networks)

All of the above works great for scaling traffic, but your application is still centralized in one location. When your users start visiting your site from other sides of the country — or the other side of the world — they might encounter longer load times because of the increased distance between the client and server. After all, we’re talking about the “World Wide Web” — not the “local neighborhood web.” :)

上面所有这些都非常适合扩展流量，但是您的应用程序仍然集中在一个位置。当您的用户开始从该国的另一端或世界的另一端访问您的站点时，由于客户端和服务器之间的距离增加，他们可能会遇到更长的加载时间。毕竟，我们所说的是“万维网”，而不是“本地邻居网络”。 :)

A popular tactic to solve this is using a Content Delivery Network (CDN). A CDN is a large distributed system of “proxy” servers deployed across many data centers. A proxy server is just a server that acts as an intermediary between a client and a server.

解决此问题的一种流行策略是使用内容分发网络(CDN)。 CDN是跨多个数据中心部署的大型“代理”服务器分布式系统。代理服务器只是充当客户端和服务器之间的中介的服务器。

Companies with large amounts of distributed traffic can choose to pay CDN companies to deliver their content to their end-users using the CDN’s servers. An example of a CDN is Akamai. Akamai has thousands of servers located in strategic geographical locations around the world.

具有大量分布式流量的公司可以选择向CDN公司付款，以使用CDN的服务器将其内容交付给最终用户。 CDN的一个示例是Akamai。 Akamai在全球战略地理位置上拥有数千台服务器。

Let’s compare how a website works with and without a CDN.

让我们比较一下有无CDN的网站的工作方式。

As we talked about in Section 1, for a typical website, the domain name of a URL is translated to the IP address of the host’s server.

正如我们在第1节中讨论的，对于一个典型的网站，URL的域名被转换为主机服务器的IP地址。

However, if a customer uses Akamai, the domain name of the URL is translated to the IP address of an edge server owned by Akamai. Akamai then delivers the web content to the customer’s users, without it ever having to touch the customer’s servers.

但是，如果客户使用Akamai，则URL的域名将转换为Akamai拥有的边缘服务器的IP地址。然后，Akamai可以将Web内容交付给客户的用户，而无需接触客户的服务器。

Akamai is able to do this by storing copies of frequently used elements like HTML, CSS, software downloads, and media objects from customers’ servers.

Akamai可以通过存储来自客户服务器HTML，CSS，软件下载和媒体对象等常用元素的副本来做到这一点。

The main goal is to bring your website’s content closer to your user. If the content doesn’t have to travel as far to get to the user, it means lower latency, which in turn reduces the load time.

主要目标是使网站的内容更接近用户。如果内容不必走得很远就可以到达用户，则意味着等待时间更短，从而减少了加载时间。

Ta da! A faster website :)

da！更快的网站:)