Skip to content

Commit d80b038

Browse files
committed
edits
1 parent 782fbb8 commit d80b038

File tree

1 file changed

+41
-30
lines changed

1 file changed

+41
-30
lines changed

articles/azure-signalr/signalr-quickstart-azure-functions-javascript.md

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Azure SignalR Service serverless quickstart - Javascript
2+
title: Azure SignalR Service serverless quickstart - JavaScript
33
description: A quickstart for using Azure SignalR Service and Azure Functions to create an App showing GitHub star count using JavaScript.
44
author: vicancy
55
ms.author: lianwei
@@ -9,9 +9,9 @@ ms.service: signalr
99
ms.devlang: javascript
1010
ms.custom: devx-track-js, mode-api
1111
---
12-
# Quickstart: Create a serverless app with Azure Functions and SignalR Service using Javascript
12+
# Quickstart: Create a serverless app with Azure Functions and SignalR Service using JavaScript
1313

14-
In this article, you'll use Azure SignalR Service, Azure Functions, and JavaScript to build a serverless application to broadcast messages to clients.
14+
In this article, you use Azure SignalR Service, Azure Functions, and JavaScript to build a serverless application to broadcast messages to clients.
1515

1616
## Prerequisites
1717

@@ -20,11 +20,11 @@ This quickstart can be run on macOS, Windows, or Linux.
2020
| Prerequisite | Description |
2121
| --- | --- |
2222
| An Azure subscription |If you don't have a subscription, create an [Azure free account](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)|
23-
| A code editor | You'll need a code editor such as [Visual Studio Code](https://code.visualstudio.com/). |
23+
| A code editor | You need a code editor such as [Visual Studio Code](https://code.visualstudio.com/). |
2424
| [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing)| Requires version 4.0.5611 or higher to run Node.js v4 programming model.|
2525
|[Node.js LTS](https://nodejs.org/en/download/)| See supported node.js versions in the [Azure Functions JavaScript developer guide](../azure-functions/functions-reference-node.md#node-version).|
26-
| [Azurite](../storage/common/storage-use-azurite.md)| SignalR binding needs Azure Storage. You can use a local storage emulator when a function is running locally. |
27-
| [Azure CLI](/cli/azure/install-azure-cli)| Optionally, you can use the Azure CLI to create an Azure SignalR Service instance. |
26+
| [Azurite](../storage/common/storage-use-azurite.md)| SignalR binding needs Azure Storage. You can use a local storage emulator when a function is running locally. |
27+
| [Azure CLI](/cli/azure/install-azure-cli)| Optionally, you can use the Azure CLI to create an Azure SignalR Service instance.
2828

2929
## Create an Azure SignalR Service instance
3030

@@ -39,7 +39,6 @@ Make sure you have Azure Functions Core Tools installed.
3939
1. Run the Azure Functions `func init` command to initialize a new project.
4040

4141
```bash
42-
# Initialize a function project
4342
func init --worker-runtime javascript --language javascript --model V4
4443
```
4544

@@ -51,7 +50,7 @@ After you initialize a project, you need to create functions. This project requi
5150
- `negotiate`: Allows a client to get an access token.
5251
- `broadcast`: Uses a time trigger to periodically broadcast messages to all clients.
5352

54-
When you run the `func new` command from the root directory of the project, the Azure Functions Core Tools creates the function source files storing them in a folder with the function name. You'll edit the files as necessary replacing the default code with the app code.
53+
When you run the `func new` command from the root directory of the project, the Azure Functions Core Tools creates the function source files storing them in a folder with the function name. You edit the files as necessary replacing the default code with the app code.
5554

5655
### Create the index function
5756

@@ -63,7 +62,7 @@ When you run the `func new` command from the root directory of the project, the
6362

6463
1. Edit *src/functions/httpTrigger.js* and replace the contents with the following json code:
6564

66-
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/index.js":::
65+
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/index.js":::
6766

6867

6968
### Create the negotiate function
@@ -76,7 +75,7 @@ When you run the `func new` command from the root directory of the project, the
7675

7776
1. Edit *src/functions/negotiate.js* and replace the contents with the following json code:
7877

79-
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/negotiate.js":::
78+
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/negotiate.js":::
8079

8180
### Create a broadcast function.
8281

@@ -88,7 +87,7 @@ When you run the `func new` command from the root directory of the project, the
8887

8988
1. Edit *src/functions/broadcast.js* and replace the contents with the following code:
9089

91-
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/broadcast.js":::
90+
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/broadcast.js":::
9291

9392
### Create the index.html file
9493

@@ -100,13 +99,32 @@ The client interface for this app is a web page. The `index` function reads HTML
10099

101100
:::code language="html" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/content/index.html":::
102101

103-
### Add the SignalR Service connection string to the function app settings
102+
### Setup Azure Storage
104103

105-
Azure Functions requires a storage account to work. You can install and run the [Azure Storage Emulator](../storage/common/storage-use-azurite.md). **Or** you can update the setting to use your real storage account with the following command:
104+
Azure Functions requires a storage account to work. Choose either of the two following options:
106105

107-
```bash
108-
func settings add AzureWebJobsStorage "<storage-connection-string>"
109-
```
106+
* Run the free [Azure Storage Emulator](../storage/common/storage-use-azurite.md).
107+
* Use the Azure Storage service. This may incur costs if you continue to use it.
108+
109+
#### [Local emulation](#tab/storage-azurite)
110+
111+
1. Start the Azurite storage emulator:
112+
113+
```bash
114+
azurite -l azurite -d azurite\debug.log
115+
```
116+
117+
1. Make sure the `AzureWebJobsStorage` in *local.settings.json* set to `UseDevelopmentStorage=true`.
118+
119+
#### [Azure Blob Storage](#tab/azure-blob-storage)
120+
121+
Update the project to use the Azure Blob Storage connection string.
122+
123+
```bash
124+
func settings add AzureWebJobsStorage "<storage-connection-string>"
125+
```
126+
127+
### Add the SignalR Service connection string to the function app settings
110128

111129
You're almost done now. The last step is to set the SignalR Service connection string in Azure Function app settings.
112130
@@ -117,36 +135,29 @@ You're almost done now. The last step is to set the SignalR Service connection s
117135
118136
1. Copy the primary connection string, and execute the command:
119137
120-
```bash
121-
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
122-
```
138+
```bash
139+
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
140+
```
123141
124142
### Run the Azure Function app locally
125143
126-
Start the Azurite storage emulator:
127-
128-
```bash
129-
azurite -l azurite -d azurite\debug.log
130-
```
131-
132144
Run the Azure Function app in the local environment:
133145
134146
```bash
135147
func start
136148
```
137149
138-
> [!NOTE]
139-
> If you see an errors showing read errors on the blob storage, ensure the 'AzureWebJobsStorage' setting in the *local.settings.json* file is set to `UseDevelopmentStorage=true`.
140-
141150
After the Azure Function is running locally, go to `http://localhost:7071/api/index`. The page displays the current star count for the GitHub Azure/azure-signalr repository. When you star or unstar the repository in GitHub, you'll see the refreshed count every few seconds.
142151

143-
Having issues? Try the [troubleshooting guide](signalr-howto-troubleshoot-guide.md) or [let us know](https://aka.ms/asrs/qscsharp)
152+
Having issues? Try the [troubleshooting guide](signalr-howto-troubleshoot-guide.md) or [let us know.](https://aka.ms/asrs/qscsharp)
144153

145154
[!INCLUDE [Cleanup](includes/signalr-quickstart-cleanup.md)]
146155

147156
## Sample code
148157

149-
You can get all code used in the article from [GitHub](https://github.com/aspnet/AzureSignalR-samples/tree/main/samples/QuickStartServerless/javascript/v4-programming-model).
158+
You can get all code used in the article from GitHub repository:
159+
160+
* [aspnet/AzureSignalR-samples](https://github.com/aspnet/AzureSignalR-samples/tree/main/samples/QuickStartServerless/javascript/v4-programming-model).
150161

151162
## Next steps
152163

0 commit comments

Comments
 (0)