{"id":2645,"date":"2018-11-13T20:47:40","date_gmt":"2018-11-13T19:47:40","guid":{"rendered":"https:\/\/www.itidea.nl\/?p=2645"},"modified":"2018-11-13T16:47:04","modified_gmt":"2018-11-13T15:47:04","slug":"notification-azure-signalr-sentiment-of-comments-given-on-a-sharepoint-page-part-3","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/notification-azure-signalr-sentiment-of-comments-given-on-a-sharepoint-page-part-3\/","title":{"rendered":"Notification – Azure SignalR – Sentiment of comments given on a SharePoint page – Part 3"},"content":{"rendered":"

\"\"<\/a><\/p>\n

The previous two posts (part 1<\/a>, part 2<\/a>) explained the analysis of the sentiment of a comment given on a page and a webhook that was triggered when this sentiment score was written to the list. The last posts ended showing the value of the RawSentiment field of the item that was changed or added.<\/p>\n

This post will show a notification to specific persons in eg a Marketing group when the sentiment score is ‘extreme’. When a very low or high score is returned from the Cognitive Service there is probably something going on about the messages on that specific page that maybe requires clarification (very low score) or something else.<\/p>\n

To be notified on ‘extreme’ scores Azure SignalR Service is used in combination with Azure Functions 2.0 (https:\/\/azure.microsoft.com\/en-us\/blog\/introducing-azure-functions-2-0\/<\/a>). Be aware that Azure Functions 2.0 runtime uses .NET Core 2.0, while version 1.x used the .NET framework 4.x.<\/p>\n

Create a new Azure SignalR Service instance<\/h3>\n

After logging in to the Azure Portal<\/a>\u00a0create a new SignalR Service instance.
\n\"\"<\/a><\/p>\n

After the instance is created get the connection string from the Keys tab. The connection string is going to be used in the Azure Function which will be created next.
\n\"\"<\/a><\/p>\n

SignalR input binding<\/h3>\n

A client must retrieve the service endpoint URL to be able to connect to Azure SignalR Service created in the previous step.
\nTherefor a new HttpTriggered function is created where the AzureSignalRConnectionInfo object is injected using the SignalRConnectionInfo attribute. In the attribute the name of the hub (choose your own) needs to be specified. SignalR uses hubs to communicate between clients and servers.
\nThe connection string of the Azure SignalR Service instance has to be stored in local.settings.json in the default settings name AzureSignalRConnectionString.<\/p>\n

Azure SignalR Service is generally available. However, SignalR Service bindings for Azure Functions are currently in preview.<\/p><\/blockquote>\n

To get the required Azure Function bindings for the SignalR Service add a reference to the
\nMicrosoft.Azure.WebJobs.Extensions.SignalRService package, version 1.0.0-preview1-10002. This is the only version available at the time of writing this post.<\/p>\n

\r\n\r\n[FunctionName("negotiate")]\r\npublic static IActionResult GetSignalRInfo(\r\n  [HttpTrigger(AuthorizationLevel.Anonymous, "post", "options")]HttpRequest req,\r\n  [SignalRConnectionInfo(HubName = "broadcast")]SignalRConnectionInfo info)\r\n{\r\n  \/\/ Azure function doesn't support CORS well, workaround it by explicitly return CORS headers\r\n  req.HttpContext.Response.Headers.Add("Access-Control-Allow-Credentials", "true");\r\n  if (req.Headers["Origin"].Count > 0) req.HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", req.Headers["Origin"][0]);\r\n  if (req.Headers["Access-Control-Request-Headers"].Count > 0) req.HttpContext.Response.Headers.Add("Access-Control-Allow-Headers", req.Headers["access-control-request-headers"][0]);\r\n\r\n  return info != null\r\n    ? (ActionResult)new OkObjectResult(info)\r\n    : new NotFoundObjectResult("Failed to get SignalR connection information");\r\n}\r\n<\/pre>\n
ProcessMessage function<\/h3>\n
In part 2<\/a> of this series a function named ProcessMessage was created to be notified of all changes that happened on the list that’s been watched by subscribing to a webhook endpoint.
\nThis function is going to put a message on a Service Bus Queue when an ‘extreme’ sentiment value is registered, say below 0.2 or above 0.8.<\/p>\n
\r\n...\r\n\r\n\/\/ put message on Service Bus Queue to trigger SignalR service\r\nvar content = $"Extreme score detected: {rawSentiment}";\r\nvar logMessage = string.Empty;\r\nvar connectionString = ConfigurationManager.AppSettings["ServiceBusConnection"];\r\nvar queueName = ConfigurationManager.AppSettings["QueueNameBroadcast"];\r\n\r\nif (string.IsNullOrEmpty(connectionString) || string.IsNullOrEmpty(queueName))\r\n{\r\nlogMessage = "AppSettings not found.";\r\nlog.Error(logMessage);\r\nthrow new ArgumentNullException(logMessage);\r\n}\r\n\r\nvar client = QueueClient.CreateFromConnectionString(connectionString, queueName);\r\nBrokeredMessage msg = new BrokeredMessage(content);\r\nawait client.SendAsync(msg);\r\n\r\nlog.Info("Message added to queue");\r\n\r\n...\r\n<\/pre>\n
SignalR output binding<\/h3>\n
To send messages to all connected clients using Azure SignalR Service the output binding is used. To do so a new ServiceBusTriggered function is created which listens to the queue where the ProcessMessage function is putting messages to.
\nAn IAsyncCollector object is injected in the function using the SignalR attribute. In the attribute the name of the hub needs to be specified again.
\nTo actually broadcast a message the AddAsync method needs to be called on IAsyncCollector signalRMessages with a new SignalRMessage as parameter.
\nThe Target is the name of the method to be invoked on each client. The arguments property is an array of zero or more objects to be passed to the client method.<\/p>\n
\r\n[FunctionName("BroadcastMessages")]\r\npublic static void Run(\r\n[ServiceBusTrigger("%QueueName%", Connection = "ServiceBusConnection")]string\u00a0 \u00a0 \u00a0myQueueItem,\r\n[SignalR(HubName = "broadcast")]IAsyncCollector<SignalRMessage> signalRMessages)\r\n{\r\n\/\/actually send a new message\r\nsignalRMessages.AddAsync(new SignalRMessage()\r\n{\r\nTarget = "notify",\r\nArguments = new object[] { myQueueItem }\r\n});\r\n}\r\n<\/pre>\n
Client<\/h3>\n
At last we need a client (or more) to subscribe to the messages broadcasted by the Azure SignalR Service. Therefor an SPFx application customizer can be used.
\nInstall the JavaScript and TypeScript clients for SignalR for ASP.NET Core using
\nnpm install @aspnet\/signalr<\/strong><\/p>\n
To connect to a hub a HubConnectionBuilder object has to be created to configure a HubConnection instance.
\nOnce the connection is in place the client can subscribe to broadcast messages of the service by calling the ‘on’ function of the HubConnectionBuilder with the method name ‘notify’ as the first parameter. This is the method name specified in the Target of the AddAsync method.
\nAt last the connection has to be started.<\/p>\n
\r\n\r\nthis.hubConnection = new signalR.HubConnectionBuilder()\r\n  .withUrl(hubUrl)\r\n  .configureLogging(signalR.LogLevel.Information)\r\n  .build();\r\n\r\nthis.hubConnection.on('notify', (data: any) => {\r\n  console.log(data);\r\n});\r\n\r\nthis.hubConnection.start().catch(err => console.error(err.toString()));\r\n\r\n<\/pre>\n
As a best practice, call the\u00a0start\u00a0method on the\u00a0HubConnection\u00a0after\u00a0‘on’. Doing so ensures your handlers are registered before any messages are received.<\/p><\/blockquote>\n
Once the connection has been established the following message can be seen in the console of the browser:
\n\"\"<\/a><\/p>\n
And when a message is broadcasted it appears in the console.
\n\"\"<\/a><\/p>\n
At this moment the broadcasted message is written to the console, but this can be improved a lot of course!
\nThis could be shown as an informative notification at the top of the page for example using the placeholders of the page.<\/p>\n
Summary<\/h3>\n
There was a lot to do in this series of posts.
\nPart 1<\/a> collected comments of a page and determined using Cognitive Services the sentiment of them. The results were stored in a list.
\nPart 2<\/a> added a webhook to this list to be able to be notified of changes to this list. These changes were put on a ServiceBus Queue. Another function listened to this queue and processed the message to be able to determine (‘extreme’) sentiment scores.
\nPart 3, this post, created an Azure SignalR Service en Azure Functions to be able to get connection info and to broadcast messages to clients, it this case ‘extreme’ sentiment scores collected. At last clients were notified of the ‘extreme’ scores.<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
The previous two posts (part 1, part 2) explained the analysis of the sentiment of a comment given on a page and a webhook that was triggered when this sentiment score was written to the list. The last posts ended … Read More »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,39,41],"tags":[50,20,37,46,48],"class_list":["post-2645","post","type-post","status-publish","format-standard","hentry","category-azure","category-office-365","category-sharepoint","tag-azure","tag-c","tag-office365","tag-sharepoint","tag-spfx"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=2645"}],"version-history":[{"count":19,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2645\/revisions"}],"predecessor-version":[{"id":2675,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2645\/revisions\/2675"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=2645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=2645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=2645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}