SignalR showing the user is typing

Question

does SignalR has any functionality to handle user1 is typing alert to user2 that user1 is currently typing? the examples i have seen out there is all in ajax or jquery. this is for CHAT between users using SignalR

Answer 1

We do this on focus and on blur events of text field. We call a function on hub that broadcast a simple message about user to all clients like typing=true with id set to connection id from context. Then in client this highlights the user with underline or different colour to see user is busy typing something. In our app multiple users can type but you get the concept.

You need 3 things basically

1. Client side method to update server when someone starts typing. This is similar to send method in examples on wiki
2. Server then broadcast to all or selected clients with who is writing or has started typing. You can even send the keycode to mimimc same on other clients
3. Client side method to handle the broadcast about who is writing

We use it on focus and raise a flag so we dont send too many requests to server but you can optimise it in various ways.

Answer 2

This is not a built in functionality but can easily be done via SignalR. This is done in JabbR ( http://jabbr.net/ , https://github.com/davidfowl/JabbR ).

The idea is to handle the text onchange event via JavaScript and then to contact the server to notify another client that someone is typing.

Answer 3

Use My Code

In Hub

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the addNewMessageToPage method to update clients.
        Clients.All.addNewMessageToPage(name, message);
    }
    public void IsTyping(string html)
    {
        // do stuff with the html
        SayWhoIsTyping(html); //call the function to send the html to the other clients
    }

    public void SayWhoIsTyping(string html)
    {
        IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
        context.Clients.All.sayWhoIsTyping(html);
    }
}

and In cshtml

@{
    Layout = null;
}
<h2>Chat</h2>
<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 id="Status"></div>
</div>
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR-2.2.0.min.js")"></script>
<script src="~/signalr/hubs"></script>
<script>
    $(function () {
        var chat = $.connection.chatHub;
        chat.client.addNewMessageToPage = function (name, message) {
            $('#discussion').append('<li><strong>' + htmlEncode(name)
                + '</strong>: ' + htmlEncode(message) + '</li>');
        };
        chat.client.SayWhoIsTyping = function (html) {
            $('#Status').html('<li>' + htmlEncode(html) + '</li>');
            setInterval(function () { $('#Status').html(''); }, 3000);            
        };
        $('#displayname').val(prompt('Enter your name:', ''));
        $('#message').focus();
        $.connection.hub.start().done(function () {
            $('#message').keydown(function () {
                var encodedName = $('<div />').text($('#displayname').val() + " is Typing...").html();
                chat.server.isTyping(encodedName);
            }),
             $('#sendmessage').click(function () {
                 chat.server.send($('#displayname').val(), $('#message').val());
                 $('#message').val('').focus();
             });
        });
    });
    function htmlEncode(value) {
        var encodedValue = $('<div />').text(value).html();
        return encodedValue;
    }   
</script>