Как реализовать функцию "Кто печатает" через SignalR?

В основном я использую чат SignalR на своем веб-сайте. Я уже могу отправлять сообщения всем подключенным пользователям, и теперь я надеюсь добавить функцию "Кто печатает". Я пытаюсь добавить его в функцию $('#message').keypress, и он работает, но теперь я не могу отправлять сообщения пользователям.

Что я сделал не так?

После удаления $('# message'). keypress может отправить сообщение

Не удалял $('# message'). keypress не может отправить сообщение

Мой 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>

}

Ниже 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;
    }

Ниже приведен код моего концентратора:

    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);
    }

Ответ 1

На вашем сервере у вас должно быть два метана в ChatHub с именем:

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);
}

Как работает этот процесс?

Вы поймаете событие, которое печатает один из ваших клиентов, то есть с функцией нажатия клавиши javascript. Затем вы вызываете функцию с сервера с нужным html, содержащим имя и другую информацию. Сервер получает информацию, обрабатывает ее, а затем вызывает функцию от клиента, которая выполняет трюк, отображающий, кто печатает.

В вашем случае ваш метод IsTyping с сервера будет обрабатывать информацию, поступающую от клиента, а метод SayWhoIsTyping с сервера будет вызывать клиент для обработки требуемой информации.

Изменить комментарий:

Я бы посоветовал изменить функцию из javascript следующим образом:

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

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

и удалить $(document).keypress.

Ответ 2

в классе концентратора Серверная сторона

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

Клиентская сторона

<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...");
};