摘要：如今，大多数 API 都使用 RESTful 主体来实现轻量级通信。REST 代表 REpresentational State Transfer。这旨在通过利用 JSON 对象格式来满足 Web 请求和 HTTP 标头进行身份验证和授权，从而克服无状态 HT

如今，大多数 API 都使用 RESTful 主体来实现轻量级通信。REST 代表 REpresentational State Transfer。这旨在通过利用 JSON 对象格式来满足 Web 请求和 HTTP 标头进行身份验证和授权，从而克服无状态 HTTP 请求的烧毁问题。每个请求都携带整个状态，因此使通信可能具有状态。此外，与 SOAP（简单对象访问协议）相比，REST 使用 JSON 来使通信的重量更轻，结构更轻，从而提供更大的灵活性。

在传统的 HTTP 中，发送请求时会有连接建立的延迟，这在 WebSockets 中完全消除了。此外，WebSockets 消除了等待请求成功的需要，这提供了 asyc 功能。这意味着一旦消息发送没有错误，就可以保证服务器已经收到该消息，并且不需要为 Status： 200 而烦恼。

对于这个特定的实现，我使用了 TypeScript，这是 JavaScript 中的一种类型安全脚本模式，它使代码对于大规模 API 实现更加清晰和直观。package.json 将如下所示。

tsconfig.json 将如下所示

API 实现将如下所示。在进入细节之前，请先查看代码。

在端口 8080 上初始化套接字服务器，这可以是任何端口，通常是端口 80 以外的端口。这是因为端口 80 主要用于呈现 HTTP 内容，这通常在应用程序中的某个时候是必不可少的。

const wsServer = new WebSocket.Server（{ port： 8080 }）;

const callbacks： any= {} 用于存储每个请求的回调。与 Web 请求不同，套接字消息通常没有路由和查询参数，即 path/username？page=5，就像请求一样。因此，他们只有一个 body，即 message。

function dispatch（event： string， data： any）

一旦消息到达 WebSocket 服务器，就会调用上述函数。这将修补存储在 callbacks： any = {} 对象的回调函数。为了将函数与消息类型绑定，使用以下函数。

function bind（event： string， callback： 函数）

这提供了将函数绑定到用户定义的事件的灵活性。为此，请注意 Web 套接字上的每条消息都经过 JSON 解析，并且 event 是从对象的 type 参数中获取的。与事件相关的数据存储在 JSON 对象的正文中。以下对象演示了来自客户端的示例登录消息。

const sampleLogin：任意 =
{ “type”： “login”， “body”： { “username”： “anuradha”， “password”： “1234” } };

记下消息的 type 和 data 部分。这与 sampleChatMessage 相同。我们可以调用 bind 函数来绑定事件。参见 login message 类型的 binding。通常，这些是从另一个类或 typescript 文件中调用的，这使得编程更容易，代码更直观。在更高级的场景中，我们可以为每种操作类型维护一个回调数组。必须非常小心地执行此操作，以免导致内存泄漏。

您应该已经注意到，尚未向用户发送任何响应。这就是 WebSocket 通信的 asyn 性质的情况。这意味着客户端永远不会等待响应。在某些协作编辑应用程序中，您会注意到，一旦完成更改，UI 就会立即更新，并且在一小段时间内，顶部更改上的文本会从未保存的更改更新为已保存，就像 Medium 本身一样。

WebSockets 不是所有问题的解决方案，但却是交互式 Web 中大多数问题的良好解决方案。因此必须小心使用。这非常适合与带有 Redux 架构的 ReactJS 一起使用，其中 UI 由单个全局状态表示，该状态可以使用响应 WebSocket 消息进行更新，从而为用户提供出色的用户体验。

JavaScript

Websocket

Typescript

62

1

来源：自由坦荡的湖泊AI