diff --git a/samples/react-real-time/Deploy-Solution.ps1 b/samples/react-real-time/Deploy-Solution.ps1 index a06c51682..6d69a92d7 100644 --- a/samples/react-real-time/Deploy-Solution.ps1 +++ b/samples/react-real-time/Deploy-Solution.ps1 @@ -40,6 +40,7 @@ Login-AzureRmAccount $GitPublishingUserName = "tempdeployuser" + [Guid]::NewGuid(); $GitPublishingUserPassword = "socketio123!" +$LogicAppName = "LogicApp" + [Guid]::NewGuid(); $AzureSBNamespace = "ServiceBus" + [Guid]::NewGuid(); $AzureWebAppName = "WebApp" + [Guid]::NewGuid() $AppServicePlanName = "ServicePlan" + [Guid]::NewGuid() @@ -66,6 +67,7 @@ Try { # More information here: https://azure.microsoft.com/en-us/documentation/articles/resource-group-authoring-templates/#resources $TemplateParameters = @{ + "LogicAppName" = $LogicAppName "ServiceBusNameSpace"=$AzureSBNamespace; "AppServicePlanName"= $AppServicePlanName; "SiteName"=$AzureWebAppName; diff --git a/samples/react-real-time/README.md b/samples/react-real-time/README.md index e9c95f06c..e3b863c94 100644 --- a/samples/react-real-time/README.md +++ b/samples/react-real-time/README.md @@ -1,8 +1,8 @@ -# Real Time News Feed using Microsoft Flow, Azure and socket.io # +# Real Time News Feed using Azure Logic Apps, Node.js and socket.io # ## Summary -This sample shows you how to implement real time web parts using the SPFx, Microsoft Flow and [socket.io](http://socket.io/). +This sample shows you how to implement real time web parts using the SPFx, Azure Logic Apps, Node.js and [socket.io](http://socket.io/).

@@ -17,11 +17,11 @@ Here is the solution overview:

1. The SPFx Web Part first connects to the Azure web application via socket.io and subscribes to events (the web application have to be in https and allow cross domain calls (CORS)). -2. Microsoft Flow is used to catch new item creation events in the SharPoint list. +2. An Azure logic app is used to catch new item creation events in the SharPoint list. 3. When an item is added, the flow sends its id to an Azure service bus queue using JSON format. -4. A Node JS Azure web application listens to the queue and check for new messages every 5 ms. +4. A Node.js Azure web application listens to the queue and check for new messages every 5 ms. 5. When a new message is available, the web application emits the data to all subscribers via socket.io. -6. The SPFx Web Part notifies user there are new items available. Items are effectively retrieved via REST according to received ids when the user clicks on the notification. +6. The SPFx Web Part notifies user there are new items available. Items are effectively retrieved using REST according to received ids when the user clicks on the notification. ## Applies to @@ -52,6 +52,7 @@ react-real-time | Franck Cornu (MVP, [@franckcornu](https://twitter.com/FranckCo Version|Date|Comments -------|----|-------- 1.0|October 25, 2016 | Initial commit +1.1|November 4, 2016 | Replaced Microsoft Flow by Azure Logic Apps ## Disclaimer **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** @@ -95,6 +96,7 @@ Version|Date|Comments $GitPublishingUserName = "tempdeployuser" + [Guid]::NewGuid(); $GitPublishingUserPassword = "socketio123!" + $LogicAppName = "LogicApp" + [Guid]::NewGuid(); $AzureSBNamespace = "ServiceBus" + [Guid]::NewGuid(); $AzureWebAppName = "WebApp" + [Guid]::NewGuid() $AppServicePlanName = "ServicePlan" + [Guid]::NewGuid() @@ -115,10 +117,10 @@ Version|Date|Comments You can let the `gulp serve` cmd running. -6. Because there is no automated mechanism to provision new template in the Microsoft Flow application, you have to manually create the flow on the SharePoint list in your developer site. - Go the 'NewsList' and create a new flow from scratch and add the following steps: +6. Because you have to configure your SharePoint connection with your own credentials, you need to create the worflow manually in the Azure logic app. + Go to your Azure portal, select the "*SPFxSocketIODemo*" resource group, and open the Logic App designer. From a blank template, add the following action. -- **[Condition]** *"SharePoint - When a new item is created"* +- **[Condition]** *"SharePoint - When a new item is created"*. Select 3 seconds interval. - **[Action]** *"Service Bus - Send Message"*

@@ -162,4 +164,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew - Using PnP JS library (1.0.5) to get items from a list. - Using Office UI Fabric React components to build a beautiful design in minutes. - \ No newline at end of file + diff --git a/samples/react-real-time/assets/flow.png b/samples/react-real-time/assets/flow.png index 51dcef221..d9b45f80e 100644 Binary files a/samples/react-real-time/assets/flow.png and b/samples/react-real-time/assets/flow.png differ diff --git a/samples/react-real-time/assets/solution_overview.png b/samples/react-real-time/assets/solution_overview.png index 7b4cf5e7e..ce2e8cd44 100644 Binary files a/samples/react-real-time/assets/solution_overview.png and b/samples/react-real-time/assets/solution_overview.png differ diff --git a/samples/react-real-time/azure-deploy.json b/samples/react-real-time/azure-deploy.json index 06091cde2..c29116f59 100644 --- a/samples/react-real-time/azure-deploy.json +++ b/samples/react-real-time/azure-deploy.json @@ -2,6 +2,10 @@ "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#", "contentVersion": "1.0.0.0", "parameters": { + "LogicAppName": { + "defaultValue": "", + "type": "string" + }, "ServiceBusNameSpace": { "defaultValue": "", "type": "string" @@ -147,6 +151,23 @@ "dependsOn": [ "[resourceId('Microsoft.ServiceBus/namespaces', parameters('ServiceBusNameSpace'))]" ] - } + }, + { + "type": "Microsoft.Logic/workflows", + "apiVersion": "2016-06-01", + "name": "[parameters('LogicAppName')]", + "location": "[parameters('Location')]", + "properties": { + "definition": { + "$schema": "https://schema.management.azure.com/providers/Microsoft.Logic/schemas/2016-06-01/workflowdefinition.json#", + "contentVersion": "1.0.0.0", + "parameters": {}, + "triggers": {}, + "actions": {}, + "outputs": {} + }, + "parameters": {} + } + } ] } \ No newline at end of file diff --git a/samples/react-real-time/client/config/config.json b/samples/react-real-time/client/config/config.json index fc0b6bc47..9eae5bdce 100644 --- a/samples/react-real-time/client/config/config.json +++ b/samples/react-real-time/client/config/config.json @@ -14,7 +14,7 @@ "react": "node_modules/react/dist/react.min.js", "react-dom": "node_modules/react-dom/dist/react-dom.min.js", "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js", - "socket.io-client": "https://SPFxSocketIOWebAppdde17113-805a-4806-b5e6-43dbb5f61b9f.azurewebsites.net/socket.io/socket.io.js" + "socket.io-client": "https://WebAppac61f1b1-ecd7-4bc0-ad7d-619b0df1f757.azurewebsites.net/socket.io/socket.io.js" }, "localizedResources": { "realTimeNewsFeedStrings": "webparts/realTimeNewsFeed/loc/{locale}.js" diff --git a/samples/react-real-time/client/src/webparts/realTimeNewsFeed/components/RealTimeNewsFeed.tsx b/samples/react-real-time/client/src/webparts/realTimeNewsFeed/components/RealTimeNewsFeed.tsx index 6e8c148d8..524b584fc 100644 --- a/samples/react-real-time/client/src/webparts/realTimeNewsFeed/components/RealTimeNewsFeed.tsx +++ b/samples/react-real-time/client/src/webparts/realTimeNewsFeed/components/RealTimeNewsFeed.tsx @@ -59,7 +59,7 @@ export default class RealTimeNewsFeed extends React.Component {