Three user states (web development)

Reduce the number of calculations and extend the life of the mobile device. Let's say the user has a page on which the video is playing, music is playing, the application with 3d graphics is running, but at the moment it’snot looking at her uses another application, browses another tab in the browser, or is distracted by a telephone conversation, etc., the developer's duty is to improve the UX and / or extend the life of the user's mobile device.

---

We determine the state of the user

Solid, liquid, gaseous

• Online (online);
• Offline (offline);
• Away (away).

All three states can be used both to display the status of the user in a multiplayer application, chat, forum, etc., and to organize / optimize the internal (calculation, data exchange) and external (UI, graphics) application processes.
The code examples below are written in coffeescript and are designed to work within the framework of a Meteor application, but, nevertheless, it is still JavaScript and can be used in any other environment.

Consider events that report that the user is currently active:

#Клиент
#@ = window
@addEventListener "mousemove", _.throttle(goActive, 777), false
@addEventListener "mousedown", _.throttle(goActive, 777), false
@addEventListener "keypress", _.throttle(goActive, 777), false
@addEventListener "DOMMouseScroll", _.throttle(goActive, 777), false
@addEventListener "mouse wheel", _.throttle(goActive, 777), false
@addEventListener "touchmove", _.throttle(goActive, 777), false
@addEventListener "MSPointerMove", _.throttle(goActive, 777), false

P.S. the throttlefunction built into the underscore allows you to reduce the number of function calls goActive; the function will be called no more than once everyhappy777 milliseconds.

Determine if the web application tab is active:

#Клиент
setVisibilitychange = ->
    if document.hidden
        # Код для состояния "Отошел"
        goInactive()
    else
        # Код для состояния "В сети"
        goActive()
document.addEventListener "visibilitychange", setVisibilitychange, false

If the tab / window is open and active, while the user is logged in and not active - after a minute, change his status to inactive:

#Клиент
Meteor.setTimeout goInactive, 60000

I note that the function goInactivesets the user to the “Away” state.
To get the status “Offline”, the user needs to exit the application (logout) or close / disconnect the DDP connection.

---

The code below is for Meteor only.

We set the status "Offline" by breaking the DDP connection:

#Сервер
Meteor.onConnection (connection) ->
    connectionId = connection.id
    connection.onClose () ->
      Meteor.users.update 
        connection: connectionId
      ,
        ‘$set’:
          ‘profile.online’: false
          ‘profile.idle’: false

When a user logs in, it is necessary to save the one connectionIdused above:

#Сервер
Accounts.validateLoginAttempt (attempt) ->
    if !attempt.error and attempt.user
      Meteor.users.update
        _id: attempt.user._id
      ,
        ‘$set’:
          connection: attempt.connection.id
          ‘profile.online’: true
          ‘profile.idle’: false
          ‘profile.location.ip’: attempt.connection.clientAddress
          ‘profile.lastLogin’: new Date()
    return if !attempt.error and attempt.user then true else false

A more complete code with cross-browser support can be found here.

---

Useful for the user

Many web applications require immediate user attention. In the condition "Away" (away) I suggest:

• Disable CSS animation;
• Disable 3D animation;
• Reduce the frequency of access to the server (for realtime applications);
• Pause video / audio playback;
• Play notification sounds, or play them louder;
• Pause the game for single player mode.

Simply put, the developer should take care of the user and his personal device, improving UX (quality of use), reducing the number of calculations, extending the life of the device, especially when using battery power.