如何在WebSocket上实现Ajax

Posted 2021-04-15 21CTO

21CTO导读：开发者将WebSockets与Ajax结合，也是一种好选项。

我们的社区中有过很多次关于Ajax和WebSockets的讨论，我认为将两者结合起来会很酷，可能也有一些偏见，我倾向于使用WebSockets作为首选的通信机制。由于Ajax根植于许多Web开发人员，我认为在WebSockets之上实现Ajax会很有趣。

Ajax和REST是HTTP出现以来最好的接口技术，使用Websockets技术构建整个Ajax协议，让Websockets成为Ajax的超集，让它作为主要的通信链接将是有意义的。

通过WebSockets运行 Ajax 有以下几个优点：

1.开销更少，因此更快（比HTTP/2更少的开销）

2.更容易实现有状态服务

3.Ajax和异步WebSocket数据都可以通过同一连接进行多路复用

4.Ajax是对单个请求返回单个响应。但是Ajax可为异步请求，Web前端可以发送任意数量的Ajax请求，无需等待每个响应。

另一方面，WebSockets可以处理浏览器和服务器之间的多个双向消息，在任一方向上发送的消息之间没有相关性，由应用来解释和管理这些消息。

在WebSocket连接上实现Ajax在理论上非常简单：

1.编码为JSON

2.JSON数据通过WebSocket连接发送到服务器

3.服务器从JSON字符串中重建数据

4.服务器找到Ajax服务调用该服务

5.来自Ajax服务的响应数据被编码为JSON

6.服务器通过WebSocket连接将JSON响应数据发送到浏览器

7.Ajax响应在浏览器中进行管理。

如上所述，Ajax在客户端是异步的，因此许多请求可以同时在运行。每个Ajax请求都与一个javascript回调相关联，该回调在服务器发送响应时被调用。我们需要找到一种方法来唯一地识别每个运行中的请求，以便让每个Ajax响应触发正确的回调函数。下图描绘了三个异步和正在进行的Ajax请求：

图1：三个异步运行的Ajax请求

即使响应消息的顺序不同，每个异步响应A'，B'和C'也必须为请求A，B和C触发正确的响应回调函数。

实现客户端Ajax回调处理的最简单方法是将每个回调存储在一个对象中，并为每个回调提供唯一的ID。ID（例如可以是数字）作为消息的一部分发送到服务器。然后，服务器端将此ID与响应数据捆绑在一起。

当客户端收到Ajax响应时，客户端使用从服务器收到的ID找到回调函数。每个请求/响应对的回调ID都必须是唯一的。查找唯一ID的一种非常简单的方法是使用随机数并查找冲突。

var callbacks={} // saved Ajax callbacks: key=id, val=function

 

function saveCallback(callback) {

    var rpcID; // Find a unique ID

    do {

        rpcID=Math.floor(Math.random() * 100000);

    } while(callbacks[rpcID]); // while collisions

    callbacks[rpcID]=callback; // Save callback, where rpcID is the key.

    return rpcID; // The ID sent to the server, where it is echoed.

}

假设我们有一个数学计算的Ajax服务，可以在其中添加两个数字：

function math.add(a, b) => return a+b

要从客户端调用它，我们必须提供两个参数a和b，回调函数和数学REST URI。

我们为基于WebSocket客户端JavaScript库的Ajax设计的API要求提供两个参数'callback'和'REST URI'作为两个第一个参数。例如，必须从客户端调用math.add（a，b）函数，如下所示：

ajax(callback, "math/add", a, b)

Ajax响应回调接收两个参数，响应数据和可能的错误消息。如果提供了错误参数，则响应数据'rsp'为空。

function myCallback(rsp,err)

对于JavaScript Ninjas：

如果您是JavaScript开发人员，您可能想知道为什么我们使用过时的异步回调设计模式而不是新的JavaScript Promise对象。新的JavaScript开发人员可能比新的Promise对象更容易理解回调API，但是我们使用新的Promise API包含了一个额外的库和示例。以下是有关如何使用此API的示例：

var ajax=createAjax('service.lsp', .....);

ajax("math/add", a, b).

    then(function(rsp) { console.log("Result: " + rsp); }).

    catch(function(err) { console.log("Error: " + err); });

下载

WebSocket客户端库上的Ajax只需22行代码即可实现。要获得此代码和完整的示例（包括服务器代码），该实例完整的描述了WebSocket 下的完整Ajax。

https://makoserver.net/download/examples/AjaxOverWebSockets.zip