You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-signalr/signalr-howto-work-with-azure-front-door.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,14 +12,14 @@ ms.topic: how-to
12
12
13
13
Azure Front Door is a modern cloud-native application delivery network (ADN) that provides dynamic site acceleration, global load balancing, TLS termination, and application layer security. It operates at the HTTP/HTTPS layer (Layer 7) and acts as the entry point for web applications—routing and optimizing traffic based on attributes such as URL paths, latency, and health status of backends.
14
14
15
-
A key benefit of Azure Front Door is its native support for WebSocket and WebSocket Secure (WSS) connections. This enables real-time, bi-directional communication between clients and backend services without requiring any special configuration.
15
+
A key benefit of Azure Front Door is its native support for WebSocket and WebSocket Secure (WSS) connections. This support enables real-time, bi-directional communication between clients and backend services without requiring any special configuration.
16
16
17
17
In this guide, we demonstrate how to use Azure Front Door with Azure SignalR Service to front-end your real-time applications. By routing traffic through Front Door, you can:
18
-
-Leverage WebSocket support with global reach and edge acceleration,
18
+
-Apply WebSocket support with global reach and edge acceleration,
19
19
- Apply centralized security policies, such as WAF rules and rate limiting,
20
20
- Reduce public exposure of your backend services.
21
21
22
-
As shown in the diagram, you’ll configure Azure Front Door to route WebSocket traffic to your SignalR-powered application backend. This setup ensures that your real-time functionality benefits from low-latency, scalable, and secure traffic handling through Azure’s global edge network.
22
+
As shown in the diagram, you configure Azure Front Door to route WebSocket traffic to your SignalR-powered application backend. This setup ensures that your real-time functionality benefits from low-latency, scalable, and secure traffic handling through Azure’s global edge network.
23
23
24
24
## Set up and configure Azure Front Door
25
25
@@ -37,11 +37,11 @@ On the [Azure portal](https://portal.azure.com/), search for **Front Door** and
37
37
### Quick test
38
38
Conduct quick tests to verify that SignalR endpoint is healthy and Azure Front Door resource is correctly configured.
39
39
40
-
Send a request to `<your-SignalR-resource-endpoint>/client` and it should return _400_ with error message _'hub' query parameter is required._ This means that the request arrived at SignalR Service and the service performed validation as expected.
40
+
Send a request to `<your-SignalR-resource-endpoint>/client` and it should return _400_ with error message _'hub' query parameter is required._ This message means that the request arrived at SignalR Service and the service performed validation as expected.
41
41
```bash
42
42
curl -v <your-SignalR-resource-endpoint>/client
43
43
```
44
-
returns
44
+
Returns
45
45
```
46
46
< HTTP/1.1 400 Bad Request
47
47
< ...
@@ -55,7 +55,7 @@ Send a request to the same health endpoint of Azure SignalR through Azure Front
It should also return _400_ with error message _'hub' query parameter is required._ This confirms that the request successfully went through Azure Front Door to SignalR Service.
58
+
It should also return _400_ with error message _'hub' query parameter is required._ This message confirms that the request successfully went through Azure Front Door to SignalR Service.
59
59
60
60
```
61
61
< HTTP/1.1 400 Bad Request
@@ -66,7 +66,7 @@ Send a request to the same health endpoint of Azure SignalR through Azure Front
66
66
67
67
### Run a SignalR sample app through Azure Front Door
68
68
69
-
Now that we have verified that the traffic can reach SignalR Service through Azure Front Door. Next, we use a barebone sample app to demonstrate Azure Front Door's ability to route WebSocket traffic without configuration. We take a step-by-step approach so that you can follow along, if needed.
69
+
Now that we can verify that the traffic can reach SignalR Service through Azure Front Door. Next, we use a barebone sample app to demonstrate Azure Front Door's ability to route WebSocket traffic without configuration. We take a step-by-step approach so that you can follow along, if needed.
70
70
71
71
#### Create the project
72
72
```bash
@@ -92,7 +92,7 @@ Paste in the content to the `afd-demo.csproj` file. This project uses only the "
92
92
```
93
93
94
94
#### Configure app settings
95
-
Create an `appsettings.json` file and paste in the content below. The values will be referenced in the `Program.cs` file, which we create in the next step.
95
+
Create an `appsettings.json` file and paste in the content. The values will be referenced in the `Program.cs` file, which we create in the next step.
96
96
```bash
97
97
touch appsettings.json
98
98
```
@@ -117,7 +117,7 @@ touch appsettings.json
117
117
touch Program.cs
118
118
```
119
119
120
-
Paste in the code below to the `Program.cs` file. The web app defines a SignalR hub and serves `index.html` at the web root.
120
+
Paste in the code to the `Program.cs` file. The web app defines a SignalR hub and serves `index.html` at the web root.
121
121
```csharp
122
122
usingMicrosoft.Azure.SignalR;
123
123
varbuilder=WebApplication.CreateBuilder(args);
@@ -161,7 +161,7 @@ mkdir hubs && cd hubs
161
161
touch demohubs.cs
162
162
```
163
163
164
-
Paste in the code below to the `demohubs.cs` file. For simplicity, the hub exposes only `BroadcastMessage` method to SignalR client, which broadcasts the received message to all connected SignalR clients.
164
+
Paste in the code to the `demohubs.cs` file. For simplicity, the hub exposes only `BroadcastMessage` method to SignalR client, which broadcasts the received message to all connected SignalR clients.
165
165
```csharp
166
166
usingMicrosoft.AspNetCore.SignalR;
167
167
@@ -179,7 +179,7 @@ mkdir wwwroot && cd wwwroot
179
179
touch index.html
180
180
```
181
181
182
-
Paste in the code below to `index.html`. The user interface consists of a `<textarea>` to receive text input from user and a `<button>` to send the user input through a SignalR connection. Since we defined the SignalR server's behavior to broadcast received messages, you will see the same message logged to the browser console.
182
+
Paste in the code to `index.html`. The user interface consists of a `<textarea>` to receive text input from user and a `<button>` to send the user input through a SignalR connection. Since we defined the SignalR server's behavior to broadcast received messages, you see the same message logged to the browser console.
183
183
```html
184
184
<!DOCTYPE html>
185
185
<html>
@@ -231,7 +231,7 @@ Paste in the code below to `index.html`. The user interface consists of a `<text
231
231
```
232
232
233
233
#### Run the app and verify the flow of message through Azure Front Door
234
-
That's all the code to the sample. Let's run the app.
234
+
That is all the code to the sample. Let's run the app.
235
235
236
236
```bash
237
237
dotnet restore
@@ -242,7 +242,7 @@ Open http://localhost:5129 from the browser and use `F12` keyboard shortcut to
242
242
243
243
:::image type="content" source="./media/signalr-howto-work-with-azure-front-door/network-panel-afd.jpg" alt-text="Screenshot of the running app establishing a WebSocket connection with Azure Front Door.":::
244
244
245
-
Try to type something in the text box and hit the send button. You will see the message is logged to browser console as expected.
245
+
Try to type something in the text box and hit the send button. You see the message is logged to browser console as expected.
246
246
247
247
:::image type="content" source="./media/signalr-howto-work-with-azure-front-door/console-log.jpg" alt-text="Screenshot of the received message in browser's console log.":::
0 commit comments