Zelfstudie: Gegevens publiceren naar Socket.IO-clients in de serverloze modus in Azure Function met Python (preview)

In deze zelfstudie wordt u begeleid bij het publiceren van gegevens naar Socket.IO clients in de serverloze modus in Python door een realtime NASDAQ-indextoepassing te maken die is geïntegreerd met Azure Function.

Zoek volledige codevoorbeelden die in deze zelfstudie worden gebruikt:

Socket.IO Serverloze Python-voorbeeld

Belangrijk

De standaardmodus heeft een permanente server nodig. U kunt Web PubSub niet integreren voor Socket.IO in de standaardmodus met Azure Function.

Vereiste voorwaarden

Een Azure-account met een actief abonnement. Als u nog geen account hebt, kunt u een gratis account aanmaken.
Kernhulpprogramma van Azure Function
Enige bekendheid met de Socket.IO-bibliotheek.

Een Web PubSub maken voor Socket.IO resource in de serverloze modus

Als u een Web PubSub voor Socket.IO wilt maken, kunt u de volgende Azure CLI-opdracht gebruiken:

az webpubsub create -g <resource-group> -n <resource-name>---kind socketio --service-mode serverless --sku Premium_P1

Een Azure Function-project lokaal maken

Volg de stappen om een lokaal Azure Function-project te initiëren.

Volg de stap voor het installeren van het meest recente Azure Function Core-hulpprogramma
Voer in het terminalvenster of vanaf een opdrachtprompt de volgende opdracht uit om een project in de SocketIOProject map te maken:
```
func init SocketIOProject --worker-runtime python
```
Met deze opdracht maakt u een op Python gebaseerd functieproject. Voer de map SocketIOProject in om de volgende opdrachten uit te voeren.
Op dit moment bevat de functiebundel geen Socket.IO functiebinding, dus u moet het pakket handmatig toevoegen.
1. Als u de verwijzing naar de functiebundel wilt elimineren, bewerkt u het bestand host.json en verwijdert u de volgende regels.
```
"extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[4.*, 5.0.0)"
}
```
2. Voer de opdracht uit:
```
func extensions install -p Microsoft.Azure.WebJobs.Extensions.WebPubSubForSocketIO -v 1.0.0-beta.4
```

Vervang de inhoud in function_app.py door de codes:

import random
import azure.functions as func
from azure.functions.decorators.core import DataType
from azure.functions import Context
import json

app = func.FunctionApp()
current_index= 14000

@app.timer_trigger(schedule="* * * * * *", arg_name="myTimer", run_on_startup=False,
            use_monitor=False)
@app.generic_output_binding("sio", type="socketio", data_type=DataType.STRING, hub="hub")
def publish_data(myTimer: func.TimerRequest,
                sio: func.Out[str]) -> None:
    change = round(random.uniform(-10, 10), 2)
    global current_index
    current_index = current_index + change
    sio.set(json.dumps({
        'actionName': 'sendToNamespace',
        'namespace': '/',
        'eventName': 'update',
        'parameters': [
            current_index
        ]
    }))

@app.function_name(name="negotiate")
@app.route(auth_level=func.AuthLevel.ANONYMOUS)
@app.generic_input_binding("negotiationResult", type="socketionegotiation", hub="hub")
def negotiate(req: func.HttpRequest, negotiationResult) -> func.HttpResponse:
    return func.HttpResponse(negotiationResult)

@app.function_name(name="index")
@app.route(auth_level=func.AuthLevel.ANONYMOUS)
def index(req: func.HttpRequest) -> func.HttpResponse:
    path = './index.html'
    with open(path, 'rb') as f:
        return func.HttpResponse(f.read(), mimetype='text/html')

Hier volgt de uitleg van deze functies:

publish_data: Met deze functie wordt elke seconde de NASDAQ-index bijgewerkt met een willekeurige wijziging en wordt deze uitgezonden naar verbonden clients met Socket.IO Output Binding.
negotiate: Deze functie reageert op een onderhandelingsresultaat voor de client.
index: Deze functie retourneert een statische HTML-pagina.

Voeg vervolgens een index.html bestand toe

Maak het index.html-bestand met de inhoud:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nasdaq Index</title>
    <style>
        /* Reset some default styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background-color: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 300px;
            width: 100%;
        }

        .nasdaq-title {
            font-size: 2em;
            color: #003087;
            margin-bottom: 20px;
        }

        .index-value {
            font-size: 3em;
            color: #16a34a;
            margin-bottom: 30px;
            transition: color 0.3s ease;
        }

        .update-button {
            padding: 10px 20px;
            font-size: 1em;
            color: white;
            background-color: #003087;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .update-button:hover {
            background-color: #002070;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nasdaq-title">STOCK INDEX</div>
        <div id="nasdaqIndex" class="index-value">14,000.00</div>
    </div>

    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
    <script>
        function updateIndexCore(newIndex) {
            newIndex = parseFloat(newIndex);
            currentIndex = parseFloat(document.getElementById('nasdaqIndex').innerText.replace(/,/g, ''))
            change = newIndex - currentIndex;
            // Update the index value in the DOM
            document.getElementById('nasdaqIndex').innerText = newIndex.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});

            // Optionally, change the color based on increase or decrease
            const indexElement = document.getElementById('nasdaqIndex');
            if (change > 0) {
                indexElement.style.color = '#16a34a'; // Green for increase
            } else if (change < 0) {
                indexElement.style.color = '#dc2626'; // Red for decrease
            } else {
                indexElement.style.color = '#16a34a'; // Neutral color
            }
        }

        async function init() {
            const negotiateResponse = await fetch(`/api/negotiate`);
            if (!negotiateResponse.ok) {
                console.log("Failed to negotiate, status code =", negotiateResponse.status);
                return;
            }
            const negotiateJson = await negotiateResponse.json();
            socket = io(negotiateJson.endpoint, {
                path: negotiateJson.path,
                query: { access_token: negotiateJson.token}
            });

            socket.on('update', (index) => {
                updateIndexCore(index);
            });
        }

        init();
    </script>
</body>
</html>

Het belangrijkste onderdeel in het index.html:

async function init() {
    const negotiateResponse = await fetch(`/api/negotiate`);
    if (!negotiateResponse.ok) {
        console.log("Failed to negotiate, status code =", negotiateResponse.status);
        return;
    }
    const negotiateJson = await negotiateResponse.json();
    socket = io(negotiateJson.endpoint, {
        path: negotiateJson.path,
        query: { access_token: negotiateJson.token}
    });

    socket.on('update', (index) => {
        updateIndexCore(index);
    });
}

Er wordt eerst onderhandeld met de Functie-app om de URI en het pad naar de service op te halen. En registreer een callback om de index bij te werken.

De app lokaal uitvoeren

Nadat de code is voorbereid, volgt u de instructies om het voorbeeld uit te voeren.

Azure Storage instellen voor Azure Function

Voor Azure Functions is een opslagaccount vereist om zelfs lokaal te kunnen worden uitgevoerd. Kies een van de twee volgende opties:

Voer de gratis Azurite emulator uit.
Gebruik de Azure Storage-service. Dit kan kosten met zich meebrengen als u deze blijft gebruiken.

Lokale emulatie
Azure Blob-opslagruimte

De Azurite installeren
```
npm install -g azurite
```

Start de Emulator van de Azurite-opslag:

azurite -l azurite -d azurite\debug.log

Zorg ervoor dat de AzureWebJobsStorage in local.settings.json is ingesteld op UseDevelopmentStorage=true.

Werk het project bij om de Azure Blob Storage-verbindingsreeks te gebruiken.

func settings add AzureWebJobsStorage "<storage-connection-string>"

Configuratie van Web PubSub instellen voor Socket.IO

Voeg een verbindingsreeks toe aan de Function APP:

func settings add WebPubSubForSocketIOConnectionString "<connection string>"

Voorbeeld-app uitvoeren

Nadat het tunnelhulpprogramma is uitgevoerd, kunt u de functieapplicatie lokaal uitvoeren:

func start

En bezoek de webpagina op http://localhost:7071/api/index.

Schermopname van de app.

Volgende stappen

Vervolgens kunt u Bicep gebruiken om de app online te implementeren met verificatie op basis van identiteit:

Quickstart: Een chat-app bouwen met Azure Function in Socket.IO serverloze modus

Feedback

Is deze pagina nuttig?

Last updated on 2025-10-08