Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement 'Who is typing' feature via SignalR?

Basically I am implementing a SignalR chat in my website. I can already send messages to all connected users and now I hope to add the "who is typing" feature. I'm trying to add it in the $('#message').keypress function and it works but now I can't send messages to users.

What did I do wrong?

After remove $('#message').keypress can send message

Didn't remove $('#message').keypress cannot send message

enter image description here

My html {

<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" class="btn btn-default" />
<input type="hidden" id="displayname" />
<label id="isTyping" />
<ul id="discussion"></ul>

}

Below is the script:

<!--SignalR script to update the chat page and send messages.-->
<script type="text/javascript">
    $(function () {
        // Reference the auto-generated proxy for the hub.
        var chat = $.connection.chatHub;
        // Create a function that the hub can call back to display messages.

        chat.client.broadcastMessage = function (name, message) {
            $('#discussion').append('<li><strong>' + name
                + '</strong>:&nbsp;&nbsp;' + message + '</li>');
        };

        chat.client.sayWhoIsTyping = function (name) {
            $('#isTyping').html('<em>' + name + ' is typing...</em>');
            setTimeout(function () {
                $('#isTyping').html('&nbsp;');
            }, 5000);
        };

        // 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 () {
                var encodedName = $('<div />').text($('#displayname').val()).html();
                var encodedMsg = $('<div />').text($('#message').val()).html();
                chat.server.sendPublic(encodedName, encodedMsg);
                $('#message').val('').focus();
            });

            $('#message').keypress(function (e) {
                if (e.which == 13) {
                    var encodedName = $('<div />').text($('#displayname').val()).html();
                    var encodedMsg = $('<div />').text($('#message').val()).html();
                    chat.server.sendPublic(encodedName, encodedMsg);
                    $('#message').val('').focus();
                } else {
                    var encodedName = $('<div />').text($('#displayname').val()).html();
                    chat.server.isTyping(encodedName);
                }
            });
        });



    // This optional function html-encodes messages for display in the page.
    function htmlEncode(value) {
        var encodedValue = $('<div />').text(value).html();
        return encodedValue;
    }

Below is my Hub code:

    public void SendPublic(string name, string message)
    {
        // Call the addNewMessageToPage method to update clients
        Clients.All.broadcastMessage(name, message);
    }

    public void IsTyping(string name)
    {
        SayWhoIsTyping(name);
    }

    public void SayWhoIsTyping(string name)
    {
        IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
        context.Clients.All.sayWhoIsTyping(name);
    }
like image 530
Shinance Avatar asked Sep 10 '14 06:09

Shinance


People also ask

How do I send client specific messages using SignalR?

We change the BroadcastChartData() method to accept connectionId as an additional parameter. This way, we can find the client using the connectionId and send a message just to that client. Additionally, we add a new GetConnectionId() method, which returns the connectionId of the client.

Is SignalR two way communication?

Two-way communication means that both the server and client share an open channel in which they can initiate contact with each other. This channel is high-speed and works both directions between server and client. Many kinds of software can benefit from the real-time, two-way, communication system of SignalR.

What is hubName in SignalR?

SignalR Hubs are a way to logically group connections as documented. Take an example of a chat application. A group of users could be part of the same hub which allows for sending messages between users in the group. The hubName here can be any string which is used to scope messages being sent between clients.


1 Answers

in the hub class Server Side

public void UserTyping(groupName)
{
    var userName = "Get current user's name";
    //client method here
    Clients.OthersInGroup(groupName).OtherUserIsTyping(userName);
}

Client Side

<textbox id="message"></textbox>
<span id="userTyping"></span>

var keyPressCount = 0;

$("#message").on("keypress", function () {
    if (e.which == 13) {
       $('#sendmessage').trigger('click');
    } 
    else {
       // Don't want to call the server on every keypress
       if (keyPressCount++ % 10 == 0) {
        chatHub.server.userTyping("myChatGroup");
       }
    }
});

chatHub.client.OtherUserIsTyping = function (userName) {
    $("#userTyping").html(userName + " is typing...");
};
like image 116
Sudhir Panda Avatar answered Nov 10 '22 01:11

Sudhir Panda