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-web-pubsub/howto-integrate-app-service.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -157,7 +157,7 @@ At any point in time, there maybe more than one client drawing. If the Web App w
157
157
The client, built with [Vue](https://vuejs.org/), makes an HTTP request for a Client Access Token to an endpoint `/negotiate`. The backend application is an [Express app](https://expressjs.com/) and hosted as a Web App using Azure App Service.
158
158
:::column-end:::
159
159
:::column:::
160
-
:::image type="content" source="./media/howto-integrate-app-service/dataflow-1.jpg" alt-text="Screenshot of step one of app data flow" lightbox="./media/howto-integrate-app-service/dataflow-1.jpg":::
160
+
:::image type="content" source="./media/howto-integrate-app-service/dataflow-1.jpg" alt-text="Screenshot of step one of app data flow." lightbox="./media/howto-integrate-app-service/dataflow-1.jpg":::
161
161
:::column-end:::
162
162
:::row-end:::
163
163
@@ -166,7 +166,7 @@ At any point in time, there maybe more than one client drawing. If the Web App w
166
166
When the backend application successfully [returns the Client Access Token](https://github.com/Azure/awps-webapp-sample/blob/main/whiteboard/server.js#L62) to the connecting client, the client uses it to establish a WebSocket connection with Azure Web PubSub.
167
167
:::column-end:::
168
168
:::column:::
169
-
:::image type="content" source="./media/howto-integrate-app-service/dataflow-2.jpg" alt-text="Screenshot of step two of app data flow" lightbox="./media/howto-integrate-app-service/dataflow-2.jpg":::
169
+
:::image type="content" source="./media/howto-integrate-app-service/dataflow-2.jpg" alt-text="Screenshot of step two of app data flow." lightbox="./media/howto-integrate-app-service/dataflow-2.jpg":::
170
170
:::column-end:::
171
171
:::row-end:::
172
172
@@ -175,7 +175,7 @@ At any point in time, there maybe more than one client drawing. If the Web App w
175
175
If the handshake with Azure Web PubSub is successful, the client is added to a group named `draw`, effectively subscribing to messages published to this group. Also, the client is given the permission to send messages to the [`draw` group](https://github.com/Azure/awps-webapp-sample/blob/main/whiteboard/server.js#L64).
176
176
:::column-end:::
177
177
:::column:::
178
-
:::image type="content" source="./media/howto-integrate-app-service/dataflow-3.jpg" alt-text="Screenshot of step three of app data flow" lightbox="./media/howto-integrate-app-service/dataflow-3.jpg":::
178
+
:::image type="content" source="./media/howto-integrate-app-service/dataflow-3.jpg" alt-text="Screenshot of step three of app data flow." lightbox="./media/howto-integrate-app-service/dataflow-3.jpg":::
179
179
:::column-end:::
180
180
:::row-end:::
181
181
> [!NOTE]
@@ -186,7 +186,7 @@ At any point in time, there maybe more than one client drawing. If the Web App w
186
186
Azure Web PubSub notifies the backend application that a client has connected. The backend application handles the `onConnected` event by calling the `sendToAll()`, with a payload of the latest number of connected clients.
187
187
:::column-end:::
188
188
:::column:::
189
-
:::image type="content" source="./media/howto-integrate-app-service/dataflow-4.jpg" alt-text="Screenshot of step four of app data flow" lightbox="./media/howto-integrate-app-service/dataflow-4.jpg":::
189
+
:::image type="content" source="./media/howto-integrate-app-service/dataflow-4.jpg" alt-text="Screenshot of step four of app data flow." lightbox="./media/howto-integrate-app-service/dataflow-4.jpg":::
190
190
:::column-end:::
191
191
:::row-end:::
192
192
> [!NOTE]
@@ -197,7 +197,7 @@ At any point in time, there maybe more than one client drawing. If the Web App w
197
197
As soon as a client establishes a persistent connection with Web PubSub, it makes an HTTP request to the backend application to fetch the latest shape and background data at [`/diagram`](https://github.com/Azure/awps-webapp-sample/blob/main/whiteboard/server.js#L70). An HTTP service hosted on App Service can be combined with Web PubSub. App Service takes care serving HTTP endpoints, while Web PubSub takes care of managing WebSocket connections.
198
198
:::column-end:::
199
199
:::column:::
200
-
:::image type="content" source="./media/howto-integrate-app-service/dataflow-5.jpg" alt-text="Screenshot of step five of app data flow" lightbox="./media/howto-integrate-app-service/dataflow-5.jpg":::
200
+
:::image type="content" source="./media/howto-integrate-app-service/dataflow-5.jpg" alt-text="Screenshot of step five of app data flow." lightbox="./media/howto-integrate-app-service/dataflow-5.jpg":::
201
201
:::column-end:::
202
202
:::row-end:::
203
203
@@ -206,7 +206,7 @@ At any point in time, there maybe more than one client drawing. If the Web App w
206
206
Now that the clients and backend application have two ways to exchange data. One is the conventional HTTP request-response cycle and the other is the persistent, bi-directional channel through Web PubSub. The drawing actions, which originate from one user and need to be broadcasted to all users as soon as it takes place, are delivered through Web PubSub. It doesn't require involvement of the backend application.
207
207
:::column-end:::
208
208
:::column:::
209
-
:::image type="content" source="./media/howto-integrate-app-service/dataflow-6.jpg" alt-text="Screenshot of step six of app data flow" lightbox="./media/howto-integrate-app-service/dataflow-6.jpg":::
209
+
:::image type="content" source="./media/howto-integrate-app-service/dataflow-6.jpg" alt-text="Screenshot of step six of app data flow." lightbox="./media/howto-integrate-app-service/dataflow-6.jpg":::
0 commit comments