Add tracking of delay to streaming API

app/assets/javascripts/components/features/ui/containers/modal_container.jsx

@@ -123,7 +123,7 @@ const Modal = React.createClass({
     window.addEventListener('keyup', this._listener);
   },
 
-  componentDidUnmount () {
+  componentWillUnmount () {
     window.removeEventListener('keyup', this._listener);
   },
 

app/lib/feed_manager.rb

@@ -30,6 +30,7 @@ class FeedManager
   end
 
   def broadcast(timeline_id, options = {})
+    options[:queued_at] = (Time.now.to_f * 1000.0).to_i
     ActionCable.server.broadcast("timeline:#{timeline_id}", options)
   end
 

streaming/index.js

@@ -101,7 +101,15 @@ const streamFrom = (redisClient, id, req, output, needsFiltering = false) => {
   log.verbose(`Starting stream from ${id} for ${req.accountId}`)
 
   redisClient.on('message', (channel, message) => {
-    const { event, payload } = JSON.parse(message)
+    const { event, payload, queued_at } = JSON.parse(message)
+
+    const transmit = () => {
+      const now   = new Date().getTime()
+      const delta = now - queued_at;
+
+      log.silly(`Transmitting for ${req.accountId}: ${event} ${payload} Delay: ${delta}ms`)
+      output(event, payload)
+    }
 
     // Only messages that may require filtering are statuses, since notifications
     // are already personalized and deletes do not matter
@@ -127,13 +135,11 @@ const streamFrom = (redisClient, id, req, output, needsFiltering = false) => {
             return
           }
 
-          log.silly(`Transmitting for ${req.accountId}: ${event} ${payload}`)
+          transmit()
-          output(event, payload)
         })
       })
     } else {
-      log.silly(`Transmitting for ${req.accountId}: ${event} ${payload}`)
+      transmit()
-      output(event, payload)
     }
   })