Merge pull request #262862 from JialinXin/patch-5

[WebPubSub] Add Function Model v4 samples

Author: Jill Grant

articles/azure-web-pubsub/quickstart-serverless.md

@@ -5,7 +5,7 @@ author: JialinXin
 ms.author: jixin
 ms.service: azure-web-pubsub
 ms.topic: tutorial
-ms.date: 01/02/2024
+ms.date: 01/12/2024
 ---
 
 # Tutorial: Create a serverless real-time chat app with Azure Functions and Azure Web PubSub service
@@ -24,11 +24,22 @@ In this tutorial, you learn how to:
 
 ## Prerequisites
 
-# [JavaScript](#tab/javascript)
+# [JavaScript Model v4](#tab/javascript-v4)
 
 - A code editor, such as [Visual Studio Code](https://code.visualstudio.com/)
 
-- [Node.js](https://nodejs.org/en/download/), version 10.x.
+- [Node.js](https://nodejs.org/en/download/), version 18.x or above.
+  > [!NOTE]
+  > For more information about the supported versions of Node.js, see [Azure Functions runtime versions documentation](../azure-functions/functions-versions.md#languages).
+- [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing) (v4 or higher preferred) to run Azure Function apps locally and deploy to Azure.
+
+- The [Azure CLI](/cli/azure) to manage Azure resources.
+
+# [JavaScript Model v3](#tab/javascript-v3)
+
+- A code editor, such as [Visual Studio Code](https://code.visualstudio.com/)
+
+- [Node.js](https://nodejs.org/en/download/), version 18.x or above.
   > [!NOTE]
   > For more information about the supported versions of Node.js, see [Azure Functions runtime versions documentation](../azure-functions/functions-versions.md#languages).
 - [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing) (v4 or higher preferred) to run Azure Function apps locally and deploy to Azure.
@@ -61,10 +72,16 @@ In this tutorial, you learn how to:
 
 1. Make sure you have [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing) installed. And then create an empty directory for the project. Run command under this working directory.
 
-   # [JavaScript](#tab/javascript)
+   # [JavaScript Model v4](#tab/javascript-v4)
+
+   ```bash
+   func init --worker-runtime javascript --model V4
+   ```
+
+   # [JavaScript Model v3](#tab/javascript-v3)
 
    ```bash
-   func init --worker-runtime javascript
+   func init --worker-runtime javascript --model V3
    ```
 
    # [C# in-process](#tab/csharp-in-process)
@@ -81,13 +98,25 @@ In this tutorial, you learn how to:
 
 2. Install `Microsoft.Azure.WebJobs.Extensions.WebPubSub`.
 
-   # [JavaScript](#tab/javascript)
+   # [JavaScript Model v4](#tab/javascript-v4)
+
+   Confirm and update `host.json`'s extensionBundle to version _4.*_ or later to get Web PubSub support.
+
+   ```json
+   {
+     "extensionBundle": {
+       "id": "Microsoft.Azure.Functions.ExtensionBundle",
+       "version": "[4.*, 5.0.0)"
+     }
+   }
+   ```
+
+   # [JavaScript Model v3](#tab/javascript-v3)
 
-   Update `host.json`'s extensionBundle to version _3.3.0_ or later to get Web PubSub support.
+   Confirm and update `host.json`'s extensionBundle to version _3.3.0_ or later to get Web PubSub support.
 
    ```json
    {
-     "version": "2.0",
      "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
@@ -112,8 +141,36 @@ In this tutorial, you learn how to:
    ```bash
    func new -n index -t HttpTrigger
    ```
+   # [JavaScript Model v4](#tab/javascript-v4)
+
+   - Update `src/functions/index.js` and copy following codes.
+     ```js
+     const { app } = require('@azure/functions');
+     const { readFile } = require('fs/promises');
+     
+     app.http('index', {
+         methods: ['GET', 'POST'],
+         authLevel: 'anonymous',
+         handler: async (context) => {
+             const content = await readFile('index.html', 'utf8', (err, data) => {
+                 if (err) {
+                     context.err(err)
+                     return
+                 }
+             });
+     
+             return { 
+                 status: 200,
+                 headers: { 
+                     'Content-Type': 'text/html'
+                 }, 
+                 body: content, 
+             };
+         }
+     });
+     ```
 
-   # [JavaScript](#tab/javascript)
+   # [JavaScript Model v3](#tab/javascript-v3)
 
    - Update `index/function.json` and copy following json codes.
      ```json
@@ -205,7 +262,30 @@ In this tutorial, you learn how to:
    > [!NOTE]
    > In this sample, we use [Microsoft Entra ID](../app-service/configure-authentication-user-identities.md) user identity header `x-ms-client-principal-name` to retrieve `userId`. And this won't work in a local function. You can make it empty or change to other ways to get or generate `userId` when playing in local. For example, let client type a user name and pass it in query like `?user={$username}` when call `negotiate` function to get service connection url. And in the `negotiate` function, set `userId` with value `{query.user}`.
 
-   # [JavaScript](#tab/javascript)
+   # [JavaScript Model v4](#tab/javascript-v4)
+   - Update `src/functions/negotiate` and copy following codes.
+     ```js
+     const { app, input } = require('@azure/functions');
+     
+     const connection = input.generic({
+         type: 'webPubSubConnection',
+         name: 'connection',
+         userId: '{headers.x-ms-client-principal-name}',
+         hub: 'simplechat'
+     });
+     
+     app.http('negotiate', {
+         methods: ['GET', 'POST'],
+         authLevel: 'anonymous',
+         extraInputs: [connection],
+         handler: async (request, context) => {
+             return { body: JSON.stringify(context.extraInputs.get('connection')) };
+         },
+     });
+     ```
+
+
+   # [JavaScript Model v3](#tab/javascript-v3)
 
    - Update `negotiate/function.json` and copy following json codes.
      ```json
@@ -279,7 +359,45 @@ In this tutorial, you learn how to:
    func new -n message -t HttpTrigger
    ```
 
-   # [JavaScript](#tab/javascript)
+   # [JavaScript Model v4](#tab/javascript-v4)
+
+   - Update `src/functions/message.js` and copy following codes.
+     ```js
+     const { app, output, trigger } = require('@azure/functions');
+     
+     const wpsMsg = output.generic({
+         type: 'webPubSub',
+         name: 'actions',
+         hub: 'simplechat',
+     });
+     
+     const wpsTrigger = trigger.generic({
+         type: 'webPubSubTrigger',
+         name: 'request',
+         hub: 'simplechat',
+         eventName: 'message',
+         eventType: 'user'
+     });
+     
+     app.generic('message', {
+         trigger: wpsTrigger,
+         extraOutputs: [wpsMsg],
+         handler: async (request, context) => {
+             context.extraOutputs.set(wpsMsg, [{
+                 "actionName": "sendToAll",
+                 "data": `[${context.triggerMetadata.connectionContext.userId}] ${request.data}`,
+                 "dataType": request.dataType
+             }]);
+             
+             return {
+                 data: "[SYSTEM] ack.",
+                 dataType: "text",
+             };
+         }
+     });
+     ```
+
+   # [JavaScript Model v3](#tab/javascript-v3)
 
    - Update `message/function.json` and copy following json codes.
      ```json
@@ -414,7 +532,9 @@ In this tutorial, you learn how to:
    </html>
    ```
 
-   # [JavaScript](#tab/javascript)
+   # [JavaScript Model v4](#tab/javascript-v4)
+
+   # [JavaScript Model v3](#tab/javascript-v3)
 
    # [C# in-process](#tab/csharp-in-process)
 
@@ -470,10 +590,19 @@ Use the following commands to create these items.
 
 1. Create the function app in Azure:
 
-   # [JavaScript](#tab/javascript)
+   # [JavaScript Model v4](#tab/javascript-v4)
+
+   ```azurecli
+   az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>
+   ```
+
+   > [!NOTE]
+   > Check [Azure Functions runtime versions documentation](../azure-functions/functions-versions.md#languages) to set `--runtime-version` parameter to supported value.
+
+   # [JavaScript Model v3](#tab/javascript-v3)
 
    ```azurecli
-   az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 14 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>
+   az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>
    ```
 
    > [!NOTE]