Send a broadcast POP-UP Message to All the Connected Clients

Question

I am building(still learning) a web application in ASP.NET WebForms with C#.We have a Centralized Database and all Clients are connected to the Database through a same static IP.Each of the Clients have their own Unique Office ID.We have 16 Offices each having their own office ID.Every Day we update new features with new build.Instead of sending chat message to individual client about the new changes/updates/features, can we make it send as a broadcast message like from all the offices i have mentioned there is a corporate office with OfficeId=14.So the moment the User from other office Logs in, he/she should see a pop-up notification message about the changes.Is it possible to make say a form to enter the details about the changes and the moment the user from the corporte office saves it, it shows in the index page of all the clients?

I did a lot of research on this, but couldnt get a solid explanation.This might be a duplicate or lame question for all the experts out here,please bear with me.

Answer 1

Check this link ASP.Net SignalR: Building a Simple Real-Time Chat Application

from the ChatHub class and Use following Code.

 public class ChatHub : Hub
{
    static ConcurrentDictionary<string, string> dic = new ConcurrentDictionary<string, string>();

    public void Send(string name, string message)
    {
        Clients.All.broadcastMessage(name, message);
    }



    public void Notify(string name, string id)
    {
        if (dic.ContainsKey(name))
        {
            Clients.Caller.differentName();
        }
        else
        {
            dic.TryAdd(name, id);
            foreach (KeyValuePair<String, String> entry in dic)
            {
                Clients.Caller.online(entry.Key);
            }
            Clients.Others.enters(name);
        }
    }

    public override Task OnDisconnected()
    {
        var name = dic.FirstOrDefault(x => x.Value == Context.ConnectionId.ToString());
        string s;
        dic.TryRemove(name.Key, out s);
        return Clients.All.disconnected(name.Key);
    }

}

And in HTML + javascript

   <script type="text/javascript">

          $(function () {
              showModalUserNickName();
          });

          function showModalUserNickName() {
              $("#dialog").dialog({
                  modal: true,
                  buttons: {
                      Ok: function () {
                          $(this).dialog("close");
                          startChartHub();
                      }
                  }
              });
          }

          function startChartHub() {
              var chat = $.connection.chatHub;

              // Get the user name.
              $('#nickname').val($('#nick').val());
              chat.client.differentName = function (name) {
                  showModalUserNickName();
                  return false;
                  // Prompts for different user name
                  $('#nickname').val($('#nick').val());
                  chat.server.notify($('#nickname').val(), $.connection.hub.id);
              };

              chat.client.online = function (name) {
                  // Update list of users
                  if (name == $('#nickname').val())
                      $('#onlineusers').append('<div class="border" style="color:green">You: ' + name + '</div>');
                  else {
                      $('#onlineusers').append('<div class="border">' + name + '</div>');
                  }
              };

              chat.client.enters = function (name) {
                  $('#chatlog').append('<div style="font-style:italic;"><i>' + name + ' joins the conversation</i></div>');
                  $('#onlineusers').append('<div class="border">' + name + '</div>');
              };
              // Create a function that the hub can call to broadcast chat messages.
              chat.client.broadcastMessage = function (name, message) {
                  //Interpret smileys
                  message = message.replace(":)", "<img src=\"/images/smile.gif\" class=\"smileys\" />");
                  message = message.replace("lol", "<img src=\"/images/laugh.gif\" class=\"smileys\" />");
                  message = message.replace(":o", "<img src=\"/images/cool.gif\" class=\"smileys\" />");

                  //display the message
                  $('#chatlog').append('<div class="border"><span style="color:red">' + name + '</span>: ' + message + '</div>');
              };

              chat.client.disconnected = function (name) {
                  //Calls when someone leaves the page
                  $('#chatlog').append('<div style="font-style:italic;"><i>' + name + ' leaves the conversation</i></div>');
                  $('#onlineusers div').remove(":contains('" + name + "')");
              }

              // Start the connection.
              $.connection.hub.start().done(function () {
                  //Calls the notify method of the server
                  chat.server.notify($('#nickname').val(), $.connection.hub.id);

                  $('#btnsend').click(function () {

                          // Call the Send method on the hub. 
                          chat.server.send($('#nickname').val(), $('#message').val());

                      // Clear text box and reset focus for next comment. 
                      $('#message').val('').focus();
                  });

              });
          }

        </script>
<div id="container">
<input type="hidden" id="nickname" />
<div id="chatlog"></div>
<div id="onlineusers">
    <b>Online Users</b>
</div>
<div id="chatarea">
    <div class="messagelog">
        <textarea spellcheck="true" id="message" class="messagebox"></textarea>
    </div>
    <div class="actionpane">
        <input type="button" id="btnsend" value="Send" />
    </div>
    <div class="actionpane">

    </div>
</div>
<div id="dialog" title="Enter your name to start a chat.">
    <input type="text" id="nick" />
</div>