Skip to content

Commit 782fbb8

Browse files
diberrydiberry
committed
Signalr Node + Functions quickstart
1 parent d107379 commit 782fbb8

File tree

1 file changed

+22
-184
lines changed

1 file changed

+22
-184
lines changed

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

Lines changed: 22 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ 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
6-
ms.date: 12/15/2022
6+
ms.date: 04/19/2023
77
ms.topic: quickstart
88
ms.service: signalr
99
ms.devlang: javascript
@@ -13,9 +13,6 @@ ms.custom: devx-track-js, mode-api
1313

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

16-
> [!NOTE]
17-
> You can get all code used in the article from [GitHub](https://github.com/aspnet/AzureSignalR-samples/tree/main/samples/QuickStartServerless/javascript).
18-
1916
## Prerequisites
2017

2118
This quickstart can be run on macOS, Windows, or Linux.
@@ -24,8 +21,8 @@ This quickstart can be run on macOS, Windows, or Linux.
2421
| --- | --- |
2522
| An Azure subscription |If you don't have a subscription, create an [Azure free account](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)|
2623
| A code editor | You'll need a code editor such as [Visual Studio Code](https://code.visualstudio.com/). |
27-
| [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing)| Requires version 2.7.1505 or higher to run Python Azure Function apps locally.|
28-
|[Node.js](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).|
24+
| [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.|
25+
|[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).|
2926
| [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. |
3027
| [Azure CLI](/cli/azure/install-azure-cli)| Optionally, you can use the Azure CLI to create an Azure SignalR Service instance. |
3128

@@ -38,12 +35,12 @@ This quickstart can be run on macOS, Windows, or Linux.
3835
Make sure you have Azure Functions Core Tools installed.
3936

4037
1. Open a command line.
41-
1. Create project directory and then change to it.
38+
1. Create project directory and then change into it.
4239
1. Run the Azure Functions `func init` command to initialize a new project.
4340

4441
```bash
4542
# Initialize a function project
46-
func init --worker-runtime javascript
43+
func init --worker-runtime javascript --language javascript --model V4
4744
```
4845

4946
## Create the project functions
@@ -64,52 +61,10 @@ When you run the `func new` command from the root directory of the project, the
6461
func new -n index -t HttpTrigger
6562
```
6663

67-
1. Edit *index/function.json* and replace the contents with the following json code:
68-
69-
```json
70-
{
71-
"bindings": [
72-
{
73-
"authLevel": "anonymous",
74-
"type": "httpTrigger",
75-
"direction": "in",
76-
"name": "req",
77-
"methods": [
78-
"get",
79-
"post"
80-
]
81-
},
82-
{
83-
"type": "http",
84-
"direction": "out",
85-
"name": "res"
86-
}
87-
]
88-
}
89-
```
64+
1. Edit *src/functions/httpTrigger.js* and replace the contents with the following json code:
65+
66+
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/index.js":::
9067

91-
1. Edit *index/index.js* and replace the contents with the following code:
92-
93-
```javascript
94-
var fs = require('fs').promises
95-
96-
module.exports = async function (context, req) {
97-
const path = context.executionContext.functionDirectory + '/../content/index.html'
98-
try {
99-
var data = await fs.readFile(path);
100-
context.res = {
101-
headers: {
102-
'Content-Type': 'text/html'
103-
},
104-
body: data
105-
}
106-
context.done()
107-
} catch (err) {
108-
context.log.error(err);
109-
context.done(err);
110-
}
111-
}
112-
```
11368

11469
### Create the negotiate function
11570

@@ -119,42 +74,10 @@ When you run the `func new` command from the root directory of the project, the
11974
func new -n negotiate -t HttpTrigger
12075
```
12176

122-
1. Edit *negotiate/function.json* and replace the contents with the following json code:
123-
```json
124-
{
125-
"disabled": false,
126-
"bindings": [
127-
{
128-
"authLevel": "anonymous",
129-
"type": "httpTrigger",
130-
"direction": "in",
131-
"methods": [
132-
"post"
133-
],
134-
"name": "req",
135-
"route": "negotiate"
136-
},
137-
{
138-
"type": "http",
139-
"direction": "out",
140-
"name": "res"
141-
},
142-
{
143-
"type": "signalRConnectionInfo",
144-
"name": "connectionInfo",
145-
"hubName": "serverless",
146-
"connectionStringSetting": "AzureSignalRConnectionString",
147-
"direction": "in"
148-
}
149-
]
150-
}
151-
```
152-
1. Edit *negotiate/index.js* and replace the content with the following JavaScript code:
153-
```js
154-
module.exports = async function (context, req, connectionInfo) {
155-
context.res.body = connectionInfo;
156-
};
157-
```
77+
1. Edit *src/functions/negotiate.js* and replace the contents with the following json code:
78+
79+
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/negotiate.js":::
80+
15881
### Create a broadcast function.
15982

16083
1. Run the following command to create the `broadcast` function.
@@ -163,73 +86,9 @@ When you run the `func new` command from the root directory of the project, the
16386
func new -n broadcast -t TimerTrigger
16487
```
16588

166-
1. Edit *broadcast/function.json* and replace the contents with the following code:
167-
168-
```json
169-
{
170-
"bindings": [
171-
{
172-
"name": "myTimer",
173-
"type": "timerTrigger",
174-
"direction": "in",
175-
"schedule": "*/5 * * * * *"
176-
},
177-
{
178-
"type": "signalR",
179-
"name": "signalRMessages",
180-
"hubName": "serverless",
181-
"connectionStringSetting": "AzureSignalRConnectionString",
182-
"direction": "out"
183-
}
184-
]
185-
}
186-
```
187-
188-
1. Edit *broadcast/index.js* and replace the contents with the following code:
189-
190-
```javascript
191-
var https = require('https');
192-
193-
var etag = '';
194-
var star = 0;
195-
196-
module.exports = function (context) {
197-
var req = https.request("https://api.github.com/repos/azure/azure-signalr", {
198-
method: 'GET',
199-
headers: {'User-Agent': 'serverless', 'If-None-Match': etag}
200-
}, res => {
201-
if (res.headers['etag']) {
202-
etag = res.headers['etag']
203-
}
204-
205-
var body = "";
206-
207-
res.on('data', data => {
208-
body += data;
209-
});
210-
res.on("end", () => {
211-
if (res.statusCode === 200) {
212-
var jbody = JSON.parse(body);
213-
star = jbody['stargazers_count'];
214-
}
215-
216-
context.bindings.signalRMessages = [{
217-
"target": "newMessage",
218-
"arguments": [ `Current star count of https://github.com/Azure/azure-signalr is: ${star}` ]
219-
}]
220-
context.done();
221-
});
222-
}).on("error", (error) => {
223-
context.log(error);
224-
context.res = {
225-
status: 500,
226-
body: error
227-
};
228-
context.done();
229-
});
230-
req.end();
231-
}
232-
```
89+
1. Edit *src/functions/broadcast.js* and replace the contents with the following code:
90+
91+
:::code language="javascript" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/functions/broadcast.js":::
23392

23493
### Create the index.html file
23594

@@ -239,37 +98,12 @@ The client interface for this app is a web page. The `index` function reads HTML
23998
1. Create the file *content/index.html*.
24099
1. Copy the following content to the *content/index.html* file and save it:
241100

242-
243-
```html
244-
<html>
245-
246-
<body>
247-
<h1>Azure SignalR Serverless Sample</h1>
248-
<div id="messages"></div>
249-
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>
250-
<script>
251-
let messages = document.querySelector('#messages');
252-
const apiBaseUrl = window.location.origin;
253-
const connection = new signalR.HubConnectionBuilder()
254-
.withUrl(apiBaseUrl + '/api')
255-
.configureLogging(signalR.LogLevel.Information)
256-
.build();
257-
connection.on('newMessage', (message) => {
258-
document.getElementById("messages").innerHTML = message;
259-
});
260-
261-
connection.start()
262-
.catch(console.error);
263-
</script>
264-
</body>
265-
266-
</html>
267-
```
268-
101+
:::code language="html" source="~/azuresignalr-samples/samples/QuickStartServerless/javascript/v4-programming-model/src/content/index.html":::
269102

270103
### Add the SignalR Service connection string to the function app settings
271104

272105
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:
106+
273107
```bash
274108
func settings add AzureWebJobsStorage "<storage-connection-string>"
275109
```
@@ -292,7 +126,7 @@ You're almost done now. The last step is to set the SignalR Service connection s
292126
Start the Azurite storage emulator:
293127
294128
```bash
295-
azurite
129+
azurite -l azurite -d azurite\debug.log
296130
```
297131
298132
Run the Azure Function app in the local environment:
@@ -310,6 +144,10 @@ Having issues? Try the [troubleshooting guide](signalr-howto-troubleshoot-guide.
310144

311145
[!INCLUDE [Cleanup](includes/signalr-quickstart-cleanup.md)]
312146

147+
## Sample code
148+
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).
150+
313151
## Next steps
314152

315153
In this quickstart, you built and ran a real-time serverless application in localhost. Next, learn more about how to bi-directional communicating between clients and Azure Function with SignalR Service.

0 commit comments

Comments
 (0)