WebSockets简介：如何创建响应式和低延迟应用程序

在此博客文章中，我们将讨论WebSockets以及如何将其用于创建高性能的多用户Web应用程序。 我们将介绍：

• 什么是WebSocket以及它们与HTTP连接的区别
• 为什么WebSockets对于要求苛刻的应用程序是必需的
• 如何创建WebSocket连接并将其用于发送信息
• 如何在井字游戏的多人游戏中实现WebSockets

我一直想知道即时消息和通知如何在手机上运行。 手机是否会不断对某些服务器执行ping操作，以询问是否有新消息？ 那可能行得通，但是对于服务器和我的手机来说似乎效率都较低。 尽管它肯定可以解释我手机的电池寿命...或者，我的手机是否一直在听某人发送数据？ 这引起了一些安全隐患； 任何人都可以将数据发送到我的手机吗？ 在2011年推出WebSockets之前，维护实时数据的主要方法是长时间轮询。

长轮询的基础

在进入WebSockets之前，我们需要了解有关长轮询的问题。 在WebSocket之前，Web应用程序是在服务器接收请求并发送相应响应的前提下构建的。 请注意，服务器没有任何位置可启动向客户端的数据发送。 服务器本应纯粹响应客户端发出的请求。 在这种客户机-服务器模型之后，长轮询被用作在客户机上维护最新数据的解决方案。长轮询是从客户机向服务器以及服务器发送HTTP请求的周期。在有一些新数据之前不发送响应。 当客户端从服务器收到该响应时，它将立即向服务器发送另一个请求。此无限循环用于维护实时数据，但还会给客户端/浏览器和服务器增加负担，因为每个HTTP请求和响应也会发送非请求代码。元数据，标头和cookie的数量可忽略不计。 对于需要在非常短的时间间隔内频繁发送更新数据的应用程序（例如在线游戏或金融报价器），HTTP请求的开销是不可接受的。 这就是WebSocket的用武之地。

什么是网页？

WebSocket API（通常更称为WebSockets）是一种通信协议，它提供了一种在客户端和服务器之间发送数据的机制，而不会产生HTTP请求和长时间轮询的开销。

与长轮询相比，WebSocket连接具有三个主要优点。

• 服务器现在可以初始化将数据发送到客户端，而无需等待请求。
• 标头，Cookie和其他元数据不需要与客户端和服务器之间的每次数据传输一起传输。
• 服务器可以打开到多个客户端的WebSocket连接。

那么，WebSockets如何将所有这些功能完全实现呢？ 它从客户端向服务器发送HTTP请求（称为WebSocket握手请求）开始。 握手请求包含用于将连接升级到WebSocket连接的标头。 当服务器接受握手时 ，将在客户端和服务器之间建立WebSocket连接。 新建立的WebSocket连接是双向的，因此客户端和服务器可以直接向彼此发送消息。 记住，对于HTTP请求，服务器必须等待传入的请求才能发送响应，现在任何一方都可以向另一方发送数据！

握手请求将打开双向WebSocket连接。

除了减少开销之外，WebSocket还允许服务器连接到多个客户端。 既然服务器可以发送消息而无需等待客户端的请求，那么我们可以使用服务器将信息中继到所有连接的客户端。 这为创建需要每个客户端接收实时数据的响应式多用户应用程序提供了可能性。 例如，聊天室，在线游戏，金融报价器以及（对于像我这样痴迷的人）实时体育比赛得分和统计数据。

WebSockets服务器在客户端之间中继消息

在多人游戏中实现网络

现在我们已经了解了如何建立WebSocket连接以及如何使用它们，让我们在一个小型应用程序中实现它们。 我们将执行以下步骤：

1. 使用HTML / CSS / JS制作井字游戏（尚无套接字！）
2. 创建一个服务于我们（前端）游戏的服务器
3. 向服务器添加WebSocket功能
4. 重构我们的前端以利用WebSocket连接
5. 玩我们的游戏！

设定

在开始编写代码之前，让我们设置项目的文件夹和文件结构。 我们将在服务器中使用几个Node.js包，因此在该项目的文件夹中运行以下终端命令：

npm init -y
npm install express ws

最终的文件结构如下所示：

project_folder/
    client/
        index.html
        index.js
        styles.css
    server/