用户正在键入通知

时间:2013-09-09 20:29:50

标签: javascript jquery asp.net-mvc asp.net-mvc-4

我正在mvc4上开发我的项目,我有一个问题,用户在项目的聊天模块上输入状态通知。这个j脚本的问题是它向正在输入的同一用户显示状态但是我希望其他用户看到我在我的文本框中输入

      var textarea = $('#textarea');
var typingStatus = $('#typing_on');
var lastTypedTime = new Date(0); // it's 01/01/1970
var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message

function refreshTypingStatus() {
    if (!textarea.is(':focus') || textarea.val() == '' || new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
        typingStatus.html('No one is typing -blank space.');
    } else {
        typingStatus.html('User is typing...');
    }
}
function updateLastTypedTime() {
    lastTypedTime = new Date();
}

setInterval(refreshTypingStatus, 100);
textarea.keypress(updateLastTypedTime);
textarea.blur(refreshTypingStatus);

<label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
<div id="typing_on"></div>

1 个答案:

答案 0 :(得分:2)

如果您希望用户看到不同的用户输入状态,您必须通过AJAX将当前用户状态发送到服务器,并从服务器检索以显示。

所以基本上,假设有两个人聊天,每个客户端(浏览器)必须:

  • 获取当前用户的输入状态并发送到服务器
  • 从服务器中检索其他用户输入状态并显示它。

如果你不确定如何使用AJAX,你应该查找jQuery的ajax documentation

您的客户端代码必须改变如下:

function refreshTypingStatus() {
    if (!textarea.is(':focus') || textarea.val() == '' || new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
        typingStatus.html('No one is typing -blank space.');
    } else {
        typingStatus.html('User is typing...');
    }
  //AJAX call to send typingStatus.html to server
  //AJAX call to retrieve other users typingStatus (could be combined into one call)
}

编写必要的代码超出了SO答案,因为它涉及服务器端和客户端代码,但start with this tutorial,如果您有更多问题,只需询问一个特定于您需要的新问题。