开始与 Azure Web PubSub 建立 WebSocket 连接

客户端使用标准 WebSocket 协议连接到 Azure Web PubSub 服务。 可以使用 WebSocket 客户端支持的语言为服务编写客户端。 在本文中,你将看到几个不同语言的 WebSocket 客户端示例。

授权

Web PubSub 使用 JSON Web 令牌 (JWT) 来验证和授权客户端。 客户端可将该令牌放在 access_token 查询参数中,或者在连接到服务时将该令牌放在 Authorization 头中。

通常,客户端先与其应用服务器通信,以获取服务和令牌的 URL。 然后,客户端使用收到的 URL 和令牌打开与服务的 WebSocket 连接。

该门户还提供了一个工具,用于以动态方式生成带令牌的客户端 URL。 此工具可用于快速测试。

Screenshot showing where to find the Client URL Generator.

注意

生成令牌时,请确保仅包括必要的角色。

为了简化示例工作流,在以下各部分,我们将使用门户中临时生成的此 URL 供客户端连接。 <Client_URL_From_Portal> 用于表示值。 生成的令牌默认会在 60 分钟后过期,因此请记得在令牌过期后重新生成令牌。

该服务支持两种类型的 WebSocket 客户端:一种是简单 WebSocket 客户端,另一种是 PubSub WebSocket 客户端。 下面介绍这两种客户端如何连接到该服务。 有关这些客户端的详细信息,请参阅适用于 Azure Web PubSub 的 WebSocket 客户端协议

依赖项

大多数新式浏览器原生就能支持 WebSocket API。

简单 WebSocket 客户端

在 HTML 页面的 script 块中:

<script>
    // Don't forget to replace this <Client_URL_From_Portal> with the value fetched from the portal
    let ws = new WebSocket("<Client_URL_From_Portal>");
    ws.onopen = () => {
        // Do things when the WebSocket connection is established
    };

    ws.onmessage = event => {
        // Do things when messages are received.
    };
</script>

PubSub WebSocket 客户端

在 HTML 页面的 script 块中:

<script>
    // Don't forget to replace this <Client_URL_From_Portal> with the value fetched from the portal
    let ws = new WebSocket("<Client_URL_From_Portal>", 'json.webpubsub.azure.v1');
    ws.onopen = () => {
        // Do things when the WebSocket connection is established
    };

    ws.onmessage = event => {
        // Do things when messages are received.
    };
</script>

后续步骤

本文介绍了如何使用门户中生成的 URL 连接到服务。 若要了解客户端如何与应用服务器通信以获取实际应用程序中的 URL,请参阅以下教程并查看示例。