使用 Socket.IO 建置即時程序碼串流應用程式，並將其裝載於 Azure

發行項
04/12/2024

在 Microsoft Word 建置共同建立功能這類即時體驗，可能頗為棘手。

Socket.IO 透過其易於使用的 API，已證明自己是用戶端與伺服器之間即時通訊的程式庫。不過，Socket.IO 使用者經常回報難以調整 Socket.IO 連線。有了 Web PubSub for Socket.IO，開發人員不用再為管理持續性連線煩心。

概觀

本文說明如何建置可讓程式撰寫員將程式碼撰寫活動串流給受眾的應用程式。您可以使用下列項目建置這個應用程式：

Monaco Editor，支援 Visual Studio Code 的程式碼編輯器。
Express，Node.js Web 架構。
Socket.IO 程式庫提供的 API，可進行即時通訊。
使用 Web PubSub for Socket.IO 的主機 Socket.IO 連線。

完成的應用程式

完成的應用程式可讓程式碼編輯器使用者分享 Web 連結，藉此讓他人觀看輸入的過程。

Screenshot of the finished code-streaming app.

為了讓程序集中，並且能在 15 分鐘左右理解完畢，本文會定義兩個使用者角色，以及他們在編輯器中可以執行的動作：

撰寫者，可在線上編輯器輸入，並且串流內容
檢視人員，接收撰寫者輸入的即時內容，但無法編輯內容

架構

項目	目的	福利
Socket.IO 程式庫	在後端應用程式和用戶端之間提供低延遲、雙向的資料交換機制	涵蓋大多數即時通訊案例的易用 API
Web PubSub for Socket.IO	使用 Socket.IO 用戶端裝載 WebSocket 或輪詢型持續性連線	支援 100,000 個同時連線；簡化的應用程式架構

Diagram that shows how the Web PubSub for Socket.IO service connects clients with a server.

必要條件

若要遵循本文的所有步驟，您需要：

Azure 帳戶。如果您沒有 Azure 訂閱，請在開始之前先建立 Azure 免費帳戶。
Azure CLI (2.29.0 版或更新版本) 或 Azure Cloud Shell 來管理 Azure 資源。
對 Socket.IO 的 API 有基本認識。

建立 Web PubSub for Socket.IO 資源

使用 Azure CLI 建立資源：

az webpubsub create -n <resource-name> \
                    -l <resource-location> \
                    -g <resource-group> \
                    --kind SocketIO \
                    --sku Free_F1

取得連接字串

連接字串可讓您與 Web PubSub for Socket.IO 連線。

執行下列命令。將傳回的連接字串保管好，因為在本文稍後執行應用程式時需要用到。

az webpubsub key show -n <resource-name> \ 
                      -g <resource-group> \ 
                      --query primaryKey \
                      -o tsv

撰寫應用程式的伺服器端程式碼

在伺服器端工作，開始撰寫應用程式的程式碼。

建置 HTTP 伺服器

建立 Node.js 專案：

mkdir codestream
cd codestream
npm init

安裝伺服器 SDK 和 Express：

npm install @azure/web-pubsub-socket.io
npm install express

匯入必要的套件，並建立 HTTP 伺服器來提供靜態檔案：

/*server.js*/

// Import required packages
const express = require('express');
const path = require('path');

// Create an HTTP server based on Express
const app = express();
const server = require('http').createServer(app);

app.use(express.static(path.join(__dirname, 'public')));

定義稱為 /negotiate 的端點。撰寫者用戶端會先叫用這個端點。這個端點會傳回 HTTP 回應。回應包含客戶端應該用來建立持續連線的端點。它也會傳回用戶端被指派的 room 值。

/*server.js*/
app.get('/negotiate', async (req, res) => {
    res.json({
        url: endpoint
        room_id: Math.random().toString(36).slice(2, 7),
    });
});

// Make the Socket.IO server listen on port 3000
io.httpServer.listen(3000, () => {
    console.log('Visit http://localhost:%d', 3000);
});

建立 Web PubSub for Socket.IO 伺服器

匯入 Web PubSub for Socket.IO SDK 並定義選項：

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

const wpsOptions = {
    hub: "codestream",
    connectionString: process.argv[2]
}

建立 Web PubSub for Socket.IO 伺服器：

/*server.js*/

const io = require("socket.io")();
useAzureSocketIO(io, wpsOptions);

這兩個步驟與建立 Socket.IO 伺服器常見的方式稍有不同，如本 Socket.IO 文件所述。透過這兩個步驟，伺服器端程式碼可以卸載管理 Azure 服務的持續連線。在 Azure 服務的協助之下，應用程式伺服器僅擔任輕量型 HTTP 伺服器的角色。

實作商務邏輯

既然您已建立由 Web PubSub 裝載的 Socket.IO 伺服器，現在您可以定義客戶端和伺服器如何使用 Socket.IO 的 API 通訊。這個流程稱為實作商務邏輯。

用戶端連線之後，應用程式伺服器會傳送名為 login 的自訂事件，通知用戶端它已登入。
```
/*server.js*/
io.on('connection', socket => {
    socket.emit("login");
});
```
每個用戶端都會發出伺服器可回應的兩個事件：joinRoom 和 sendToRoom。伺服器取得用戶端想要加入的 room_id 值之後，您可以使用 Socket.IO API 的 socket.join，將目標用戶端加入指定的空間。
```
/*server.js*/
socket.on('joinRoom', async (message) => {
    const room_id = message["room_id"];
    await socket.join(room_id);
});
```

加入用戶端之後，伺服器會傳送 message 事件，通知用戶端成功的結果。用戶端收到具有 ackJoinRoom 類型的 message事件時，用戶端可以要求伺服器傳送最新的編輯器狀態。

/*server.js*/
socket.on('joinRoom', async (message) => {
    // ...
    socket.emit("message", {
        type: "ackJoinRoom", 
        success: true 
    })
});

/*client.js*/
socket.on("message", (message) => {
    let data = message;
    if (data.type === 'ackJoinRoom' && data.success) {
        sendToRoom(socket, `${room_id}-control`, { data: 'sync'});
    }
    // ... 
});

用戶端將 sendToRoom 事件傳送至伺服器時，伺服器會將程式碼編輯器狀態變更廣播至指定的空間。現在空間中所有用戶端皆可接收最新的更新。

socket.on('sendToRoom', (message) => {
    const room_id = message["room_id"]
    const data = message["data"]

    socket.broadcast.to(room_id).emit("message", {
        type: "editorMessage",
        data: data
    });
});

撰寫應用程式的用戶端端程式碼

既然伺服器端程序已完成，現在您便可在用戶端工作。

初始設定

您必須建立 Socket.IO 用戶端才能與伺服器通訊。問題是用戶端應該與哪部伺服器建立持續連線。因為您使用的是 Web PubSub for Socket.IO，所以伺服器是 Azure 服務。回想一下，您已定義 /negotiate 路由，為用戶端提供 Web PubSub for Socket.IO 端點。

/*client.js*/

async function initialize(url) {
    let data = await fetch(url).json()

    updateStreamId(data.room_id);

    let editor = createEditor(...); // Create an editor component

    var socket = io(data.url, {
        path: "/clients/socketio/hubs/codestream",
    });

    return [socket, editor, data.room_id];
}

initialize(url) 函數會將一些設定作業整合在一起：

從 HTTP 伺服器將端點擷取至 Azure 服務
建立 Monaco Editor 執行個體
建立與 Web PubSub for Socket.IO 的持續連線

撰寫者用戶端

如先前所述，您在用戶端有兩個使用者角色：撰寫者和檢視人員。凡是撰寫者輸入的內容，都會串流至檢視人員的畫面。

取得 Web PubSub for Socket.IO 的端點和 room_id 值：

/*client.js*/

let [socket, editor, room_id] = await initialize('/negotiate');

撰寫者用戶端與伺服器連線時，伺服器會將 login 事件傳送給撰寫者。撰寫者可要求伺服器將自己加入指定的空間給予回應。每隔 200 毫秒，撰寫者用戶端便會將最新的編輯器狀態傳送至該空間。名為 flush 的函數會整理傳送邏輯。
```
/*client.js*/

socket.on("login", () => {
    updateStatus('Connected');
    joinRoom(socket, `${room_id}`);
    setInterval(() => flush(), 200);
    // Update editor content
    // ...
});
```

如果撰寫者未進行任何編輯，flush() 不會執行任何動作，會直接返回。否則，編輯器狀態的變更會傳送至空間。

/*client.js*/

function flush() {
    // No changes from editor need to be flushed
    if (changes.length === 0) return;

    // Broadcast the changes made to editor content
    sendToRoom(socket, room_id, {
        type: 'delta',
        changes: changes
        version: version++,
    });

    changes = [];
    content = editor.getValue();
}

新檢視人員用戶端連線時，檢視人員必須取得編輯器最新的完整狀態。若要達成此目的，包含 sync 資料的訊息會傳送至撰寫者用戶端。訊息會要求撰寫者用戶端傳送完整的編輯器狀態。

/*client.js*/

socket.on("message", (message) => {
    let data = message.data;
    if (data.data === 'sync') {
        // Broadcast the full content of the editor to the room
        sendToRoom(socket, room_id, {
            type: 'full',
            content: content
            version: version,
        });
    }
});

檢視人員用戶端

如同撰寫者用戶端，檢視人員用戶端會透過 initialize() 建立其 Socket.IO 用戶端。檢視人員用戶端連線並收到伺服器 login 事件時，它會要求伺服器將自己加入指定的空間。查詢 room_id 會指定空間。
```
/*client.js*/

let [socket, editor] = await initialize(`/register?room_id=${room_id}`)
socket.on("login", () => {
    updateStatus('Connected');
    joinRoom(socket, `${room_id}`);
});
```

檢視人員用戶端從伺服器收到 message 事件，且資料類型為 ackJoinRoom 時，檢視人員用戶端會要求空間中的撰寫者用戶端傳送完整的編輯器狀態。

/*client.js*/

socket.on("message", (message) => {
    let data = message;
    // Ensures the viewer client is connected
    if (data.type === 'ackJoinRoom' && data.success) { 
        sendToRoom(socket, `${id}`, { data: 'sync'});
    } 
    else //...
});

如果資料類型是 editorMessage，檢視人員用戶端會根據其實際內容更新編輯器。

/*client.js*/

socket.on("message", (message) => {
    ...
    else 
        if (data.type === 'editorMessage') {
        switch (data.data.type) {
            case 'delta':
                // ... Let editor component update its status
                break;
            case 'full':
                // ... Let editor component update its status
                break;
        }
    }
});

使用 Socket.IO 的 API 實作 joinRoom() 和 sendToRoom()：

/*client.js*/

function joinRoom(socket, room_id) {
    socket.emit("joinRoom", {
        room_id: room_id,
    });
}

function sendToRoom(socket, room_id, data) {
    socket.emit("sendToRoom", {
        room_id: room_id,
        data: data
    });
}

執行應用程式

找到存放庫

上述各節涵蓋在檢視人員和撰寫者之間同步處理編輯器狀態的相關核心邏輯。您可以在存放庫範例找到完整的程式碼。

複製存放庫

您可以複製存放庫並執行 npm install 安裝專案相依性。

啟動伺服器

node server.js <web-pubsub-connection-string>

這是您在先前步驟收到的連接字串。

使用即時程式碼編輯器播放

在瀏覽器索引標籤開啟 http://localhost:3000。用顯示於第一個網頁上的 URL 開啟另一個索引標籤。

如果您在第一個索引標籤撰寫程式碼，應該會看到輸入的內容即時反映在另一個索引標籤。Web PubSub for Socket.IO 可協助訊息在雲端傳遞。 express 伺服器只會提供靜態 index.html 檔案和 /negotiate 端點。

Share via