连接前端和后端的方法包括Restful API和GraphQL

2 年 ago
科, 雅
2 minutes

在进行Web应用程序开发时，将前端和后端分开开发是很常见的情况。那么，前端和后端如何更好地合作呢？

这篇文章会介绍一些常见的案例。

RESTful API 可能的汉语表述：
– RESTful 接口
– REST 风格的应用程序编程接口
– RESTful 应用程序编程接口

REST代表“表征状态转移”（Representational State Transfer）的缩写。遵循REST原则进行开发的系统被称为RESTful，并将其API称为RESTful API。

在RESTful API中，通过URI和HTTP方法的组合，来指定处理哪个资源以及如何处理。HTTP方法的含义如下。

HTTPメソッド意味GETリソースの取得POSTリソースの作成PUT/PATCHリソースの更新DELETEリソースの削除

在URI中，我们指定要操作的资源。例如，可以如下所示。

/users
ユーザーに対する操作（作成または一覧取得）

/users/:userId
ユーザーID = :userId に対する操作（更新または削除）

/items
アイテムに対する操作（作成または一覧取得）

/items/:itemId
アイテムID = :itemId に対する操作（更新または削除）

/users/:userId/items
ユーザーID = :userId なユーザーが所有するアイテムに対する操作（作成または一覧取得）

/users/:userId/items/:itemId
ユーザーID = :userId なユーザーが所有するアイテム :itemId に対する操作（更新または削除）

然后，将HTTP方法和URI并排表示API。例如，写成以下形式。

    • POST /users

 

    • ユーザ作成

 

    • GET /users/:userId

 

    • ユーザID = :userId の取得

 

    • PATCH /users/:userId/items/:itemId

 

    ユーザID = :userId のユーザーが持つアイテム :itemId の更新

RESTful API的好处

通过查看 URI，您可以知道它针对哪个资源，并通过查看 HTTP 方法，您可以了解要执行的操作是什么。

RESTful API的缺点

如果不知道URI（端点），就无法进行API操作。此外，为了便于理解，有时可能会创建违反RESTful原则的URI。

请给我一杯咖啡。

    • アイテム検索 /items/search

ログイン /login

在客户端控制返回的数据（响应）的细节并不太现实。例如，需要通过查询参数指定，或者创建另一个API。随着响应变得越来越复杂，这种控制变得越来越困难。

    • クエリーパラメータで制御する例

 

    • GET /users/:userId?fields=name,email,profile

 

    • APIを分ける例

GET /users/:userId
GET /users/:userId/more_fields

GraphQL：一种用于构建 API 的查询语言。

GraphQL是为了解决RESTful API的问题而创建的，其中问题包括无法访问不知道端点位置，以及无法了解发送和接收数据的格式，除非查看文档。最初，Facebook在其自家API中使用的FQL（Facebook Query Language）被通用化为GraphQL。

image.png

GraphQL | 一个用于API的查询语言

GraphQL的优点

以下是GraphQL的优点。
以下是GraphQL的好处。
以下是GraphQL的优势。
以下是GraphQL的利益。

    1. 1. 只有一个终端点/HTTP方法可用

 

    1. 2. 提供了一个架构

 

    3. 客户端可以指定要获取的数据。

只有一个端点/HTTP方法

在GraphQL中，通常將端點設置為/graphql。所有資源的訪問都只能通過這一個端點進行。此外，所有訪問都將使用POST方法（包括查詢、更新和刪除）。這一點非常直觀易懂。

提供了一个模式

“Schema（模式）是定义请求和获取到的数据格式的文件。通过将此模式作为API之一公开，可以在各种编程语言中进行加载，并在Playground（测试执行环境）中受益于自动补全功能。”

image.png

Hexabase的Playground示例

客户能够指定获取的数据

最后，能够在客户端精确指定获取的数据是GraphQL的特点。例如，可以像下面这样描述。这个例子是获取用户数据，只需要姓名和电子邮件地址。

query users {
	name
	email
}

如果需要年龄的话，请按照以下方式进行描述。

query users {
	name
	email
	age
}

如果用户需要更多与其相关的商品信息，可以按照以下方式进行指定。

query users {
	name
	email
	age
	items {
		id
		name
		price
	}
}

通过在客户端指定GraphQL的内容，可以动态地更改响应。根据需要，可以更改请求内容以仅获取所需数据。

GraphQL的缺点。

相反的缺点是，从技术角度来说，它尚未广泛普及，而且缺乏积累的知识。即使遇到问题，可能无法立即在线上找到答案。

另外，一个困难之处是目前可用的库不多。例如，在JavaScript中，有一个著名的库叫作Apollo GraphQL。虽然在其他语言中也有GraphQL客户端，但主要困难是几乎必须编写原始的GraphQL代码。

谷歌远程过程调用（gRPC）

image.png

gRPC网站

RPC是远程过程调用的缩写。而gRPC是由Google开发和发布的RPC。简单来说，RPC是一种技术，通过客户端指定服务器端的方法来执行。在gRPC出现之前，有XML-RPC和JSON-RPC，它们都专门处理文本数据。例如，在WordPress中可以使用XML-RPC，但图像更新是通过将二进制文件转换为文本（Base64编码）进行的。

XML-RPC wp 是 WordPress Codex 中的一种功能。

gRPC解决了这些问题，变成了可以处理二进制数据的RPC。

gRPC的特点

与XML-PRC和JSON-RPC不同，gRPC不使用HTTP/HTTPS协议。它使用HTTP/2，并以Protocol Buffers作为数据格式的基础。然而，根据规范，似乎可以自由选择这些选项。

协议缓冲区（Protocol Buffers）提供了协议定义文件。这个文件用于定义在客户端和服务器之间进行交互的数据。使用这个协议定义文件，可以生成适用于各种编程语言的类文件。通过使用这些类文件，客户端开发将变得非常轻松。

同样，在服务器端的服务方面，也需要创建服务定义文件。通过这样做，客户端可以了解服务器端可调用的功能以及如何调用它们。使用这个服务定义文件，可以生成服务器端和客户端的代码。

在网页上使用

如果要在Web应用程序中使用gRPC，可以使用grpc/grpc-web: gRPC for Web Clients。但是，请注意，与纯粹的gRPC相比，它似乎有一些限制（我没有使用过）。

我认为一般而言，使用gRPC在服务器之间进行通信非常方便。

Websocket（网络套接字）

要进行浏览器和服务器之间的同步通信时，WebSocket非常方便。不仅可以从浏览器向服务器发送消息，还可以从服务器向浏览器发送消息。需要注意的是，WebSocket只能发送和接收文本消息。如果要使用JSON，需要先将其转换为字符串，然后在接收后进行解析。

在WebSocket中，使用URI来指定要订阅的频道。服务器端通过向这些订阅的客户端发送消息来进行限定发送，例如在聊天室中限制消息的传送。

在JavaScript中，我们使用WebSocket对象。

const ws = new WebSocket('wss://localhost:4000/websocket');

当连接完成后，将执行 onopen 事件。

ws.onopen = function() {
	// 接続された際のイベント
}

在下次发送消息时，请使用send进行操作。

ws.send(JSON.stringify({message: "新しいメッセージ"}));

在接收消息时，将处理代码编写在`onmessage`事件中。

ws.onmessage = function(message) {
	// ここに処理を書きます
}

当连接关闭时，将调用onclose事件。

ws.onclose = function() {

}

请尝试在服务器向浏览器发送消息时执行以下操作。

网络推送API

如果允许来自服务器的消息是异步的，您也可以使用Web Push API。到2023年，它将在macOS/iOS/Android/Windows/Linux等多种操作系统和Web浏览器上得到支持。截至2022年7月，iOS目前不能使用（Safari对macOS也不可用）。

image.png

推送API | 我可以使用… HTML5、CSS3等支持表格吗？

在Web Push API中，需要用户的许可。一旦获得了发送推送通知的许可，您将获得一个唯一的URI。这个URI对于每个浏览器供应商是不同的，例如在Chrome中，它会是一个包含设备令牌（浏览器的特定ID）的Firebase域名。

在服务器端，将保存该特定的URI。当发送推送通知时，将与要发送的消息一起向该URI发送请求。

当浏览器接收到消息时，将触发Service Worker的推送事件。

self.addEventListener('push', function(event) {
	// このイベントが呼ばれます
});

在这个过程中，我们将创建通知对象并进行显示。同时，我们还会设置当用户点击通知时的事件，并且实现跳转到特定的URL链接。

data = event.data.json();
const title =  data.title;
const body = data.message;
const icon = data.icon;
const tag = 'タグ';
const notification = new Notification(title, {
	body, icon, tag,
});

notification.addEventListener('click', function() {
	if (clients.openWindow) {
		clients.openWindow('https://example.com/click.html');
	}
});

总结

当从客户端调用服务器端处理时，以及从服务器端调用客户端时，可用的技术会有所不同。请务必选择最适合的技术。虽然我个人没有尝试过，但GraphQL似乎提供了Subscription，并且有通知功能可以在数据更新时通知。这取决于具体的实现方式。

在我们提供的Hexabase平台中，我们准备了RESTful API、WebSocket和GraphQL（目前为Alpha版本）。请根据应用的特性和开发要求进行选择。

bannerAds