快速入門：將適用於 Socket.IO 的 Web PubSub 納入您的應用程式中

本快速入門示範如何建立適用於 Socket.IO 的 Web PubSub 資源，並快速將其納入 Socket.IO 應用程式中，以簡化開發、加速部署，並實現無複雜度的可擴縮性。

本快速入門中顯示的程式碼使用 CommonJS 格式。 若您想要使用 ECMAScript 模組，請參閱使用 Web PubSub 進行 Socket.IO 聊天示範。

重要

原始 連接字串 只針對示範目的出現在本文中。

連接字串包含應用程式存取 Azure Web PubSub 服務所需的授權資訊。 連接字串內的存取金鑰類似於服務的根密碼。 在生產環境中，請一律保護您的存取金鑰。 使用 Azure 金鑰保存庫，安全地管理和輪替密鑰，並使用保護連線WebPubSubServiceClient。

避免將存取金鑰散發給其他使用者、寫入程式碼，或將其以純文字儲存在他人可以存取的位置。 如果您認為金鑰可能已遭盜用，請輪替金鑰。

必要條件

• 具有有效訂用帳戶的 Azure 帳戶。 如果您沒有帳戶，您可以建立免費帳戶。
• 對 Socket.IO 程式庫有一定的了解。

建立適用於 Socket.IO 的 Web PubSub 資源

若要建立適用於 Socket.IO 的 Web PubSub，您可以使用下方的單鍵按鈕來建立，或遵循下列動作在 Azure 入口網站中搜尋。

• 使用下方的按鈕，在 Azure 中建立適用於 Socket.IO 的 Web PubSub 資源

  

• 從 Azure 入口網站的搜尋列搜尋

  1. 前往 Azure 入口網站。

  2. 在搜尋列中搜尋 socket.io，然後選取 [適用於 Socket.IO 的 Web PubSub]。

     

• 從 Marketplace 搜尋

  1. 前往 Azure 入口網站。

  2. 選取 Azure 入口網站左上角的 [建立資源] 按鈕。 在搜尋方塊中輸入 socket.io，然後按 Enter。 選取搜尋結果中的 [適用於 Socket.IO 的 Web PubSub]。

     

  3. 按一下快顯頁面中的 [建立]。

     

使用 Socket.IO 程式庫和適用於 Socket.IO 的 Web PubSub 傳送訊息

在下列步驟中，您會建立 Socket.IO 專案，並與適用於 Socket.IO 的 Web PubSub 整合。

將節點專案初始化並安裝必要套件

mkdir quickstart
cd quickstart
npm init
npm install @azure/web-pubsub-socket.io socket.io-client

撰寫伺服器程式碼

建立 server.js 檔案並新增下列程式碼以建立 Socket.IO 伺服器，並與適用於 Socket.IO 的 Web PubSub 整合。

原始 連接字串 只針對示範目的出現在本文中。 在生產環境中，請一律保護您的存取金鑰。 使用 Azure 金鑰保存庫，安全地管理和輪替密鑰，並使用保護連線WebPubSubServiceClient。

/*server.js*/
const { Server } = require("socket.io");
const { useAzureSocketIO } = require("@azure/web-pubsub-socket.io");

let io = new Server(3000);

// Use the following line to integrate with Web PubSub for Socket.IO
useAzureSocketIO(io, {
    hub: "Hub", // The hub name can be any valid string.
    connectionString: process.argv[2]
});

io.on("connection", (socket) => {
    // Sends a message to the client
    socket.emit("hello", "world");

    // Receives a message from the client
    socket.on("howdy", (arg) => {
        console.log(arg);   // Prints "stranger"
    })
});

撰寫客戶端程式碼

建立 client.js 檔案並新增下列程式碼，以將用戶端與適用於 Socket.IO 的 Web PubSub 連線。

/*client.js*/
const io = require("socket.io-client");

const socket = io("<web-pubsub-socketio-endpoint>", {
    path: "/clients/socketio/hubs/Hub",
});

// Receives a message from the server
socket.on("hello", (arg) => {
    console.log(arg);
});

// Sends a message to the server
socket.emit("howdy", "stranger")

當您使用適用於 Socket.IO 的 Web PubSub 時，客戶端需要 <web-pubsub-socketio-endpoint> 和 path 才能連線到服務。 您可以在 Azure 入口網站中找到 <web-pubsub-socketio-endpoint> 和 path。

1. 移至適用於 Socket.IO 的 Web PubSub 的 [金鑰] 窗格

2. 輸入您的中樞名稱，並複製 [用戶端端點] 和 [客戶端路徑]

   

執行應用程式

1. 執行伺服器應用程式：

   node server.js "<connection-string>"
   

   <connection-string> 是連接字串，它包含用來存取適用於 Socket.IO 的 Web PubSub 資源的端點和金鑰。 您也可以在 Azure 入口網站中尋找連接字串

   

2. 在另一個終端機中執行用戶端應用程式：

   node client.js