locked
show facebook notification to specific user RRS feed

  • Question

  • User81789783 posted

    hello to every one .

    My chat app is working fine using signal R ,now i need to implement fb like notification  ,i wrote certain lines of code ,but problem is I that need to show notification only concerned user for example

    1. Firefox    (Client A)
    2. Chrome (Client B)
    3. Opera    (Client C)

    if B and C send message to A , it shows count notification 2 on Firefox    i,e  Client A ,IT SHOULD  NOT DISPLAY TO ALL CLEINTS ( B AND C);

    as far as messages are concerned its working OK . 

    if B and C send message to A ,it shows messages properly to A coming from B and C . where toUserId in below line is A ..

    Clients.Client(toUserId).sendPrivateMessage(fromUserId, fromusername, message, username, fromUserId);

    I need to work out on notification only Now,

    Sunday, June 9, 2019 10:26 AM

All replies

  • User81789783 posted

    some how i m following below ,but its shows to all window

    https://www.encodedna.com/jquery/create-a-facebook-like-notifications-using-jquery-css.htm

    Sunday, June 9, 2019 10:27 AM
  • User61956409 posted

    Hi erum,

    To implement Facebook like Notifications in ASP.NET SignalR application, you can refer to the following code snippet.

    HTML

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background-color: #e9ebee;
            }
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 10px;
                margin: 20px;
            }
    
            #topnav {
                /*width: 100%;*/
                height: 36px;
                background-color: #365899;
                margin: 20px;
            }
    
            #chatnotifications {
                width: 35px;
                height: 35px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yz/r/QjiHJy8j_PU.png");
                background-repeat: no-repeat;
                background- -586px;
                cursor: pointer;
                float:right;
                margin-right:50px;
            }
    
            #notificationsCountValue {
                ;
                background-color: #fa3e3e;
                border-radius: 2px;
                padding: 1px 3px;
                color: #fff;
                right:-25px;
                font-size:10px;
            }
    
            #notificationsContent {
                ;
                width: 300px;
                height: 70px;
                background-color: #fff;
                right: 270px;
                top: 23px;
            }
            #uparrow {
                width: 20px;
                height: 11px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yP/r/sgy1EK7Cr23.png");
                background-repeat: no-repeat;
                background-size:30px 1082px;
                background- -802px;
                float:right;
                top:-11px;
                ;
            }
        </style>
    </head>
    <body>
        <div id="topnav">
            <div id="chatnotifications" data-ispoen="false">
                <span id="notificationsCountValue">
                    0
                </span>
                <div id="notificationsContent">
                    <div id="uparrow"></div>
                </div>
            </div>
        </div>
        
        <br />
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
    </body>
    </html>

    JavaScript Code

    <script type="text/javascript">
        $(function () {
            $("#notificationsCountValue").hide();
            $("#notificationsContent").hide();
    
            $("#chatnotifications").click(function () {
                alert($(this).attr("data-ispoen"));
                var isopen = $(this).attr("data-ispoen");
                if (isopen=="false") {
                    $(this).attr("data-ispoen", "true");
                    $("#notificationsCountValue").show();
                    $("#notificationsContent").show();
                } else {
                    $(this).attr("data-ispoen", "false");
    
                    $("#notificationsCountValue").hide();
                    $("#notificationsContent").hide();
                }
            })
    
            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    
    
                //append to notification
                
                var count = parseInt($("#notificationsCountValue").text());
                count++;
                $("#notificationsCountValue").text(count);
                $("#notificationsCountValue").show();
    
                //you can append notification content dynamically based on your requirement
            };
    
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
    
                });
            });
        });
    </script>

    Test Result

    With Regards,

    Fei Han

    Monday, June 10, 2019 1:57 AM
  • User81789783 posted

    well ,fei , I add controller and then add view and paste below code where i add reference of jquery and signal R . but i m facing an issue

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background-color: #e9ebee;
            }
    
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 10px;
                margin: 20px;
            }
    
            #topnav {
                /*width: 100%;*/
                height: 36px;
                background-color: #365899;
                margin: 20px;
            }
    
            #chatnotifications {
                width: 35px;
                height: 35px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yz/r/QjiHJy8j_PU.png");
                background-repeat: no-repeat;
                background- -586px;
                cursor: pointer;
                float: right;
                margin-right: 50px;
            }
    
            #notificationsCountValue {
                ;
                background-color: #fa3e3e;
                border-radius: 2px;
                padding: 1px 3px;
                color: #fff;
                right: -25px;
                font-size: 10px;
            }
    
            #notificationsContent {
                ;
                width: 300px;
                height: 70px;
                background-color: #fff;
                right: 270px;
                top: 23px;
            }
    
            #uparrow {
                width: 20px;
                height: 11px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yP/r/sgy1EK7Cr23.png");
                background-repeat: no-repeat;
                background-size: 30px 1082px;
                background- -802px;
                float: right;
                top: -11px;
                ;
            }
        </style>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
        <script src="~/signalr/hubs"></script>
        <script type="text/javascript">
        $(function () {
            $("#notificationsCountValue").hide();
            $("#notificationsContent").hide();
    
            $("#chatnotifications").click(function () {
                alert($(this).attr("data-ispoen"));
                var isopen = $(this).attr("data-ispoen");
                if (isopen=="false") {
                    $(this).attr("data-ispoen", "true");
                    $("#notificationsCountValue").show();
                    $("#notificationsContent").show();
                } else {
                    $(this).attr("data-ispoen", "false");
    
                    $("#notificationsCountValue").hide();
                    $("#notificationsContent").hide();
                }
            })
    
            // Declare a proxy to reference the hub.
            var chat = $.connection.letsChatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    
    
                //append to notification
    
                var count = parseInt($("#notificationsCountValue").text());
                count++;
                $("#notificationsCountValue").text(count);
                $("#notificationsCountValue").show();
    
                //you can append notification content dynamically based on your requirement
            };
    
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
    
                });
            });
        });
        </script>
      
       
    </head>
    <body>
        <div id="topnav">
            <div id="chatnotifications" data-ispoen="false">
                <span id="notificationsCountValue">
                    0
                </span>
                <div id="notificationsContent">
                    <div id="uparrow"></div>
                </div>
            </div>
        </div>
    
        <br />
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
    </body>
    </html>

    $.connection is undefined.

    where LetsChatHub is hub class  ..

    Monday, June 10, 2019 3:29 AM
  • User81789783 posted

    i have changed code  like this ,camel representation of hub class and its  ok now .secondly can u share me hub class code in order to show as suggested by u in pictorial form of chat in ur reply .

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background-color: #e9ebee;
            }
    
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 10px;
                margin: 20px;
            }
    
            #topnav {
                /*width: 100%;*/
                height: 36px;
                background-color: #365899;
                margin: 20px;
            }
    
            #chatnotifications {
                width: 35px;
                height: 35px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yz/r/QjiHJy8j_PU.png");
                background-repeat: no-repeat;
                background- -586px;
                cursor: pointer;
                float: right;
                margin-right: 50px;
            }
    
            #notificationsCountValue {
                ;
                background-color: #fa3e3e;
                border-radius: 2px;
                padding: 1px 3px;
                color: #fff;
                right: -25px;
                font-size: 10px;
            }
    
            #notificationsContent {
                ;
                width: 300px;
                height: 70px;
                background-color: #fff;
                right: 270px;
                top: 23px;
            }
    
            #uparrow {
                width: 20px;
                height: 11px;
                background-image: url("https://www.facebook.com/rsrc.php/v3/yP/r/sgy1EK7Cr23.png");
                background-repeat: no-repeat;
                background-size: 30px 1082px;
                background- -802px;
                float: right;
                top: -11px;
                ;
            }
        </style>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
        <script src="~/signalr/hubs"></script>
    
        <script type="text/javascript">
            var chat;
            $(function () {
              
            $("#notificationsCountValue").hide();
            $("#notificationsContent").hide();
    
            $("#chatnotifications").click(function () {
                alert($(this).attr("data-ispoen"));
                var isopen = $(this).attr("data-ispoen");
                if (isopen=="false") {
                    $(this).attr("data-ispoen", "true");
                    $("#notificationsCountValue").show();
                    $("#notificationsContent").show();
                } else {
                    $(this).attr("data-ispoen", "false");
    
                    $("#notificationsCountValue").hide();
                    $("#notificationsContent").hide();
                }
            })
    
            // Declare a proxy to reference the hub.
            chat = $.connection.myhub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    
    
                //append to notification
    
                var count = parseInt($("#notificationsCountValue").text());
                count++;
                $("#notificationsCountValue").text(count);
                $("#notificationsCountValue").show();
    
                //you can append notification content dynamically based on your requirement
            };
    
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                alert ("start")
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
    
                });
            });
        });
        </script>
    </head>
    <body>
        <div id="topnav">
            <div id="chatnotifications" data-ispoen="false">
                <span id="notificationsCountValue">
                    0
                </span>
                <div id="notificationsContent">
                    <div id="uparrow"></div>
                </div>
            </div>
        </div>
    
        <br />
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
    </body>
    </html>

    Monday, June 10, 2019 4:43 AM
  • User61956409 posted

    Hi erum,

    Here is my hub method for pushing message to specific connected client.

    public void Send(string name, string message)
    {
        // code logic here.
    
        //send message to specified connected client
        Clients.Client($"connectionId_here").broadcastMessage(name, $"{message}");
    }

     background-image: url("https://www.facebook.com/rsrc.php/v3/yz/r/QjiHJy8j_PU.png");

    The above image url of facebook icons seems be broken now, you can check the CSS styles of facebook notification window and set the starting position of background image with following image.

    https://static.xx.fbcdn.net/rsrc.php/v3/y_/r/vrw6WW2TEKA.png 

    With Regards,

    Fei Han

    Monday, June 10, 2019 5:59 AM
  • User-1792593316 posted

    I guys! I have same problem, only with Chrome- It's working with Firefox! Any ideas?

    Thursday, June 13, 2019 2:52 PM
  • User81789783 posted

    you need to pass extra parameter in function and distinguish who is sending caller and not ..

    Thursday, June 13, 2019 4:06 PM
  • User81789783 posted

    if (typeof fromUserId !== 'undefined')
    //if(fromUserId!= 'undefined' )
    {

    alert($("#notificationsCountValue").text())
    var count = parseInt($("#notificationsCountValue").text());
    alert("count is " + count)
    count++;
    $("#notificationsCountValue").text(count);
    $("#notificationsCountValue").show();

    var count = $("#noti_Counter").text();

    alert(parseInt(count) + 1);
    $("#noti_Counter").text(parseInt(count) + 1)
    }

    Thursday, June 13, 2019 4:07 PM