CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-4
Neeraj Mehta
Neeraj Mehta

Reputation: 1705

User is Typing Notification

I am developing my project on mvc4 , i have an issue with user is typing status notification on my chat module of the project.The problem with this j script is that it is showing the status to same user who is typing but i want that other user to see that i am typing in my text box

      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>

Upvotes: 3

Views: 3186

Answers (1)

Andrew Grothe
Andrew Grothe

Reputation: 2374

If you want users to see a different users typing status, you have to send the current users status to the server via AJAX and retrieve it from the server to display.

So basically, assuming two people are chatting, each client (browser) must:

  • Get the current users typing status and send to the server
  • Retrieve the other users typing status from the server and display it.

If you are unsure of how to use AJAX, you should look up jQuery's ajax documentation

Your client side code would have to change like so:

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

Writing the code necessary is beyond an SO answer as it involves both server side and client side code, but start with this tutorial, and if you have more questions, just ask a new question specific to what you need.

Upvotes: 3

Related Questions