Tutorial: Publish data to Socket.IO clients in Serverless Mode in Azure Function with Python (Preview)

Article
10/10/2024

This tutorial guides you through how to publish data to Socket.IO clients in Serverless Mode in Python by creating a real-time NASDAQ index application integrated with Azure Function.

Find full code samples that are used in this tutorial:

Socket.IO Serverless Python Sample

Important

Default Mode needs a persistent server, you cannot integration Web PubSub for Socket.IO in default mode with Azure Function.

Prerequisites

An Azure account with an active subscription. If you don't have one, you can create a free account.
Azure Function core tool
Some familiarity with the Socket.IO library.

Create a Web PubSub for Socket.IO resource in Serverless Mode

To create a Web PubSub for Socket.IO, you can use the following Azure CLI command:

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

Create an Azure Function project locally

You should follow the steps to initiate a local Azure Function project.

Follow to step to install the latest Azure Function core tool
In the terminal window or from a command prompt, run the following command to create a project in the SocketIOProject folder:
```
func init SocketIOProject --worker-runtime python
```
This command creates a Python-based Function project. And enter the folder SocketIOProject to run the following commands.
Currently, the Function Bundle doesn't include Socket.IO Function Binding, so you need to manually add the package.
1. To eliminate the function bundle reference, edit the host.json file and remove the following lines.
```
"extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[4.*, 5.0.0)"
}
```
2. Run the command:
```
func extensions install -p Microsoft.Azure.WebJobs.Extensions.WebPubSubForSocketIO -v 1.0.0-beta.4
```

Replace the content in function_app.py with the 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')

Here's the explanation of these functions:

publish_data: This function updates the NASDAQ index every second with a random change and broadcasts it to connected clients with Socket.IO Output Binding.
negotiate: This function response a negotiation result to the client.
index: This function returns a static HTML page.

Then add a index.html file

Create the index.html file with the content:

<!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>

The key part in the 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);
    });
}

It first negotiates with the Function App to get the Uri and the path to the service. And register a callback to update index.

How to run the App locally

After code is prepared, following the instructions to run the sample.

Set up Azure Storage for Azure Function

Azure Functions requires a storage account to work even running in local. Choose either of the two following options:

Run the free Azurite emulator.
Use the Azure Storage service. This may incur costs if you continue to use it.

Local emulation
Azure Blob Storage

Install the Azurite
```
npm install -g azurite
```

Start the Azurite storage emulator:

azurite -l azurite -d azurite\debug.log

Make sure the AzureWebJobsStorage in local.settings.json set to UseDevelopmentStorage=true.

Update the project to use the Azure Blob Storage connection string.

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

Set up configuration of Web PubSub for Socket.IO

Add connection string to the Function APP:

func settings add WebPubSubForSocketIOConnectionString "<connection string>"

Run Sample App

After tunnel tool is running, you can run the Function App locally:

func start

And visit the webpage at http://localhost:7071/api/index.

Screenshot of the app.

Next steps

Next, you can try to use Bicep to deploy the app online with identity-based authentication:

Quickstart: Build chat app with Azure Function in Socket.IO Serverless Mode

Share via