Push Notification In Web Application Using Web API And PushContentStream

Introduction

Push Notification is the technology that allows the users to engage with the particular site or application. It can be any kind of chat, discussion or anything. It engages the users to the particular content or activity.

Push notification is the combination of two words. The term push is kind of information that is supplied by the server and notification is the action that is performed by the web through a script that is the information available to the user.

This article will demonstrate how you can subscribe to a data stream and receive data pushed at the same time on the server-side using Web API. In this demo, you as a client will subscribe to a service allowed by Web API and send the kind of chat message, that will be notified to the all the clients subscribed and you will see the messages of chat having numbers of client subscribed.

Let us have a brief introduction to the technology we used here to achieve the notification.

ConcurrentBag

It is nothing but the collection of values. It allows us to safely add and retrieve the result from a collection of values. This collection is useful when multiple threads access it.

StreamWriter

It is a class required to writes text data and files. It enables easy and efficient text output to the stream.

EventSource

It’s a web content’s interface to server-sent events. It opens a persistent connection to the HTTP server which sends events in text/event-stream format. Connection opens until we call EventSource.close() method.

Prerequisite

1. Programming of C#.
2. Knowledge of JavaScript and Jquery.

Implementation

1. Open Visual Studio.
2. Create a new project.
3. Enter the project name and select location.
   
   
   
   
4. Select Web API from the template.
   
   
   
   
5. Add ChatMessage Class inside Models directory.
   

   namespace PushNotification1.Models
   {
       public class ChatMessage
       {
           public string username { get; set; }
           public string text { get; set; }
           public string dt { get; set; }
       }
   }

6. Add web API Controller name – ChatController.
   
   
   
   
   

7. Write the below content inside ChatController.cs.
   

   using System;
   using System.Collections.Concurrent;
   using System.Diagnostics;
   using System.IO;
   using System.Linq;
   using System.Management;
   using System.Net;
   using System.Net.Http;
   using System.Threading.Tasks;
   using System.Timers;
   using System.Web.Http;
   using Newtonsoft.Json;
   using PushNotification1.Models;
   
   namespace PushNotification1.Controllers
   {
       public class ChatController : ApiController
       {
   
           private static ConcurrentBag<StreamWriter> clients;
           static ChatController()
           {
               clients = new ConcurrentBag<StreamWriter>();
           }
   
           public async Task PostAsync(ChatMessage m)
           {
               m.dt = DateTime.Now.ToString("MM/dd/yyyy HH:mm:ss");
               await ChatCallbackMsg(m);
           }
           private async Task ChatCallbackMsg(ChatMessage m)
           {
               foreach (var client in clients)
               {
                   try
                   {
                       var data = string.Format("data:{0}|{1}|{2}\n\n", m.username, m.text, m.dt);
                       await client.WriteAsync(data);
                       await client.FlushAsync();
                       client.Dispose();
                   }
                   catch (Exception)
                   {
                       StreamWriter ignore;
                       clients.TryTake(out ignore);
                   }
               }
           }
   
           [HttpGet]
           public HttpResponseMessage Subscribe(HttpRequestMessage request)
           {
               var response = request.CreateResponse();
               response.Content = new PushStreamContent((a, b, c) =>
               { OnStreamAvailable(a, b, c); }, "text/event-stream");
               return response;
           }
   
           private void OnStreamAvailable(Stream stream, HttpContent content,
               TransportContext context)
           {
               var client = new StreamWriter(stream);
               clients.Add(client);
           }
       }
   }

8. Create a JavaScript file named ChatScript.js under Scripts directory and write the below contents.
   

   $(document).ready(function () {
       $('#chatControl').hide();
   });
   var message = { username: '', text: '', dt: '' };
   function setUser() {
       var username = document.getElementById("username").value;
       if (username == "" || username == undefined) {
           alert('please enter username');
           return;
       }
       else {
           message.username = username;
           $('#chatControl').show();
           $('#chatTemplate').empty();
           $('#start').hide();
           $('#message').text("Welcome to Just chat :" + message.username).css("font-weight", "Bold");
       }
   }
   function Send() {
   
       message.text = document.getElementById("push").value;
       $.ajax({
           url: "http://localhost:50536/api/Chat/",
           data: JSON.stringify(message),
           cache: false,
           type: 'POST',
           dataType: "json",
           contentType: 'application/json; charset=utf-8'
       });
       $("#push").val('');
   }
   
   var source = new EventSource('http://localhost:50536/api/Chat/');
   
   source.onmessage = function (e) {
       var data = e.data.split('|');
       var username = $("<strong></strong>").text(data[0] + " : ");
       var text = $("<i></i>").text(data[1]);
       var dt = $("<div></div>").text(data[2]);
       var chatTemp = document.createElement("p");
       chatTemp.append(dt[0], username[0], text[0], document.createElement("br"));
       $('#chatTemplate').append(chatTemp);
   };

9. Modify the content of Index.cs under Views\Home directory.
   

   <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/ChatScript.js")" type="text/javascript"></script>
   <h2>Just Chat</h2>
   <body style="background-color: chartreuse">
   <div id="body">
       <section>
           <div id="chatTemplate">
           </div>
           <div id="start">
               <label for="username">Enter username to start chatting</label>
               <input type="text" id="username" />
               <input type="button" value="set user" onclick="setUser()" />
           </div>
           <div id="message"></div>
           <div id="chatControl">
               <textarea type="text" id="push"></textarea>
               <button id="pushbtn" onclick="Send()">Send</button>
           </div>
       </section>
   </div>
   </body>

Let us run the application and see what we have achieved.

Note

1. For testing purpose, open the same URL in three tabs.
2. Enter three different names and click on "set user" for each tab.
3. Send a message from any user. It will be broadcast to all the users in open tabbed that are subscribed for notification.
4. You can see the below images for its working.
   
   
   
   Enter a Username and click on "set user".
   
   
   
   
   
   The same is set for other two users.