Site Post » Realtime Notifications · 3:17pm Aug 1st, 2013
So I think the realtime notifications have been deployed successfully. Think being the operative word there. These things are a little tricky because they have a custom backend (written by Xaquseg) and multiple client code paths due to different browse features. Anyway...
So what the hell are "realtime notifications"?
Previously the notification system was based on polling. After 30 seconds, your browser sends a request to our servers to see if there's any new notifications. All we get back is a number, so at best all I could do was show "You have __ new notifations", which you'd see at the bottom right of the page. Now we use some fancy new html5 tech to connect permanently to the server and pipe down individual notifications from the server itself. This has 3 benefits:
1. Performance (maybe). This could be a performance hit or boost. No polling means we have less requests which could lower both cpu usage and bandwidth, but maintaining the connections could be a drain.
2. You get the actual notification information without having to check the notification page
3. You get them the instant they get sent, which is super cool!
What is the "s" button for on the notifications?
As well as changing how we download notifications, we also changed how they display. You can now choose to use html5 desktop notifications, which act like a desktop app, meaning that they will show over other windows and stack. Handy! If you click the "s" button it'll go to your Local Settings which lets you request browser permission for them.
Clicking a notification doesn't go to the page
This is unfortunately a bit of a quirk with using desktop notifications. Because they're detached from the window/tab, I have to bind the click event on their creation which means if you close that tab they're hooked to, the link will sadly no longer work. I will endeavour to try and fix this but no promises.
As usual, tell me if you have issues.
The technical side of things
I feel like some people might like to know how this all works, so this is the rough flow:
Server side
1. When notification is created, we make a request to a node.js server written by Xaquseg
2. This server maintains a list of connected users, and my request has a list of users to send to (some notifications like blogs go to multiple people)
3. The node.js server sends out server sent events to the connected clients
Client side
When we open a fimfiction page, we have two code paths to use:
Path one
1. If the browser supports shared web workers, we open a shared worker which is essentially a javascript thread for a domain. Ie, no matter how many fimfic tabs you have open, you only have 1 shared worker running.
2. This shared worker opens up an EventSource to our node.js server, and listens for notification messages. These are piped back to all open fimfiction tabs which are ordered by when the tab was last used
3. We check a timestamp to see when the last notification was shown and see if it's older than an "event id" variable (which is just a timestamp from the shared worker).
4. If it's older, we show the notification and updated the stored timestamp. This design means the notification will only be triggered by the newest tab.
5. Here we bind a click event so clicking the notification opens in this tab. This is the best way we can determine what tab to use.
Path two
1. Sadly shared workers are not supported by Firefox. For firefox we have to use the EventSource directly in the tab itself. This is BAD because it means we have to open up an EventSource PER TAB.
2. Thankfully I cam up with a solution to this. I run an event every couple of seconds in each Firefox tab, and we check LocalStorage (because local storage is persistent across tabs) to see if a timestamp variable has been updated. If it has been, there is an EventSource active in at least 1 fimfiction tab. Thus we don't need to create an EventSource! If, however, the timestamp is older, then no EventSource exists and we need to create one. There is potential for concurrency issues here but it's the best we can do with the current tech.
Regardless of path, we then show a notification. The notification shown depends on whether you've enabled desktop notifications or not, and whether your browser supports them.
Not bad. I like them so far.
Seems to not update the icons, though.
~Skeeter The Lurker
Tis rather nifty.
This is new.
I am scared of new things.
But I shall give it a try
EDIT: oh lawd im using firefox
I wondered why when I clicked on the notification it didn't bring me here
. Thanks for the update, Knighty
! This looks like a really awesome feature
.
Yes! Awesome stuff indeed, I hope it helps site performance too. Thanks for the upgrade, and for the transparency about how it works.
Change! Everybody scream.
It sounds both confusing and nice a the same time. I'll ride it out and figure it out eventually. Sounds more efficient.
webmemes.org(wtf)
You can change your background?! Whaaaaaaaa- it's time for change!
Also, this was very informative thank you.
They worked for me the first time on Firefox, but now I'm just getting the usual notifications again.
Edit: Working again, but when I click on them, I get directed to knighty's user page for some reason...
Knighty, it would be better if we could open a new tab for the notifications via right-click, like usual with the top-bar.
Knighty, you beast!
Marry me!
Once again my favorite browser proves to be a pain in the rear when it comes to keeping up with the improvements of the internet. Get it together, Firefox. Damn.
1255018 I have Firefox and it works.
That's pretty cool, my only question is, do the notifications only appear in a browser?
Also: it doesn't seem to update the notification thing, in case that hasn't already been said.
This sounds awesome.
...Now my good old IE and I will go curl up in a corner.
I can't find said button, is that only on the notifications you receive or something?
Edit: Missed the three lines about going to Local Settings was the same thing.
Edit2: As long as the (X) that showed up when you had FimFic open in a different tab this is fine for me. It was the best way to keep track for me.
1255033 Time to change browsers
Hmm, any chance of an option so that when I click on a notification, it opens in a new tab?
Hmm, also these notifications seem to be cloning themselves, and they don't disappear by themselves after a short amount of time, so I have to manually cross away all these replicas.
Those work well for me with Chrome. Knighty, I think you should become PM. Just in case. I really adore the effort you devote to the site, but this notifications thingy - it's simply ingenious. Finally, I won't divert my attention to checking notifications: they just show up at the bottom of the screen! I would give you a thousand hugs.
1255041 Quote from the news post:
Perhaps due to a lack of coffee, but I do not see a way to disable the desktop notifications once they have been enabled.
1255057
True, there is no way on the page itself, but if you right click a notification you should be able to disable it in your browser (you can use the test button on the notification page to bring one up)
1255052
The notifications are linked to a page, and when I click on them, the page this it is linked to opens the link to the notification.
However, it's quite a bother when I'm getting five notifications, and each one is linked to one of my tabs, thus clicking on one will open it in a seemingly random tab.
It's quite a pain, actually.
1255062 When I click one of these notifications it leads me to knighty's user page instead...
1255067
Really?
I'm using Google Chrome, perhaps that's why?
I clicked to see this comment using the desktop notification...
1255069 Yes, really. Using Firefox.
1255079
Should be fixed. Accidentally using attr rather than data in jquery. Durr.
So if I get a notification for, say, a blog, the entire thing automatically shows up in the lower right? I'm sorry if I'm misunderstanding, you used so much nerd lingo that I desperately want to give you a swirly, and as such I really don't understand what's actually going on.
1255040 Never!
It didn't do anything!
Not seeing the change in Chrome for android on my tablet, though I don't really know if it has support for desktop notifications. I wouldn't be that surprised if it doesn't.
Pretty Schwanky. Next up, the feature box, right?
And yet you still haven't installed a Clop tag (because let's be honest here, a lot of the clopfics on this site aren't actual romances).
Knighty, what the hell are you doing?
Knighty, STAHP!
Time to switch to Chrome I guess ...
1255080 Um, sorry, but it kind of seems like it still redirects to your userpage...
I want to know if the Fimfiction server can list all the connections and how long they have been connected. And I want to know what is my best combo!
Knighty! We need a stats page for how long we have been online total! 
Just tested this by favouring and unfavouring one of my stories, and it does appear to work for me (Chrome on Ubuntu Linux). It was pretty instantaneous too. I guess the old notifications system is still running because a short while later I got a regular notification too.
1255148 More stats seem like a good idea.
Is there really no way to bring back the "Estimated Words Read" counter?
When I go to my user settings... nothing happens when I click on "Click here to allow", and nothing happens when I click "Permitted (click to test)".
Browser is Opera 12.16
(Favoriting and unfavoriting one of my own stories, as PoweredByTea did, also does not result in any notifications.)
1255161 "Estimated time wasted per day" Would be a great stat.
1255174 Haha.
Wow, love it. Great job again, Knighty.
I just received a notification of a new story being posted by an author I used to follow but no longer do. The notification is not reflected in my Feed. It appears there may be redundant listings for formerly favorited stories (as is apparent in the "Top Favorites Gallery" drop down lists) and formerly watched (as is apparent in the notifications).
HTML5 is getting mildly terrifying for me. "Now, HTML5 can send desktop notifications! Soon, HTML5 will be able to check your blood type! We're planning for HTML5 to be self-aware by 2016, and for humanity to crumble underneath its metal heel by 2018!"
Seriously, though, it seems pretty awesome.
This seems like an excellent addition to the site.
We always believe in you.
Gotta agree with Cola, though.
Wait, so now the icons don't automatically update and I can't open the notification link in a new tab?
What's even the point of this?
Just curious, how would one go about disabling this feature once it is enabled?
Just in case, how do you disable them?: