共用方式為


啟動與 Azure Web PubSub 的 WebSocket 連線

用戶端使用標準 WebSocket 通訊協定來連線到 Azure Web PubSub 服務。 您可以使用具有 WebSocket 用戶端支援的語言來撰寫用戶端與服務連線。 在本文中,您將會看到不同語言的數個 WebSocket 用戶端範例。

授權

Web PubSub 使用 JSON Web 權杖 (JWT) 來驗證和授權用戶端。 用戶端可以在 access_token 查詢參數中加入權杖,或在連接到服務時將權杖放在 Authorization 標頭中。

一般而言,用戶端會先與其應用程式伺服器通訊,以取得服務的 URL 和權杖。 然後,用戶端會使用收到的 URL 和權杖,開啟與服務的 WebSocket 連線。

入口網站也提供工具,以動態方式產生具有權杖的用戶端 URL。 此工具有助於進行快速測試。

螢幕擷取畫面顯示如何找到用戶端 URL 產生器的位置。

注意

當您產生權杖時,請務必只納入必要的角色。

在下列各節中,為了簡化範例工作流程,我們會使用這個暫時產生的 URL,讓用戶端從入口網站建立連線。 我們使用 <Client_URL_From_Portal> 來代表值。 根據預設,產生的權杖會在 60 分鐘後到期,因此別忘了在權杖到期時重新產生權杖。

服務支援兩種類型的 WebSocket 用戶端:一種是簡單的 WebSocket 用戶端,另一種是 PubSub WebSocket 用戶端。 在這裡,我們會示範這兩種用戶端如何連線到服務。 如需這些用戶端的詳細資訊,請參閱適用於 Azure Web PubSub 的 WebSocket 用戶端通訊協定

Dependency

大部分的新式瀏覽器提供 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,請閱讀這些教學課程並查看範例。