I’m not sure how do they do it exactly, but it shouldn’t be that hard. This site is relying on javascript for a lot of the ‘special’ features (like composing members). Since the site assumes we all use javascript anyway, It could just use the ‘onUnload’ event that is triggered every time a user leaves the page. I’m betting it’s something way cooler and smarter than I can think of though!

ajax and jquery i would imagine.

Actually, after a quick glance at the javascript, it looks like the javascript on the page just keeps yapping with a listening server. Once the listening server stops hearing from you it can remove you from the ‘Observing members’ list.

I’ll shut up now to let Bendrim shed more light on the awesomeness that is under the hood of Fluther :)

About Ajax, well we all can see that the update of ovserving or composing members number is updaing without refreshing the page. The only big question for me is how this number is decreasing?

It’s easy to know when the number is rasing: While user is asking for question A, we may assume is now ovserving question A so the number is being update. When user ask for question A from the DB, the observing number add +1.

I am thinking about the other problem, when this number is decrease -1. I can move to another website or close my browser and the server will never know I did that and will not update the DB. Interesting!

You can’t see the browser refreshing the page, but that doesn’t mean there’s no network communication going on. Javascript is very capable of carrying on a conversation with the server while the user sees a static page just sitting there. @markyy pegged it.

Breaking my vow of silence, I’m sorry but I can’t leave it like this and I have a feeling Bendrim is/are not going to be handing out their code (which is understandable). Disclaimer: I have no clue exactly what technique Fluther uses. I have a few ideas, but I will not be going into detail.

Short answer: Stop thinking about databases, and start thinking about other techniques like webservices (socket communication), or even more mind boggling server-side technologies.

Long answer: I think you need to let go of the idea that the number of observers is stored in a database somewhere and just gets retrieved every time someone opens a question. I purposely used a vague description like ’listening server’, because in reality it can be many things. But when you think of each question as a little chat-room, it’s not that hard to imagine what could be going on behind the scenes (without the use of a database). Of course the actual question and answers will still be saved in a database, but it’s unnecessary to store data like the amount of observers.

A chat-room doesn’t use a database to store every message. Instead basic chat-rooms use a webservice that allows users to connect and use it to send a message to every other user that is connected. That is why the service knows who is viewing a question. Once the webservice hasn’t heard from you for a while, it will simply assume you have left the question and deduct the total amount of observers by 1.

—-

I would also like to add that you use ASP.NET in your tags, but Fluther is build on Django (python based web framework). Take a look at some Django chat-room tutorials, if you are interested to learn how a chat room could be set up with Django (which might not be the same way Fluther does it, but it will broaden your horizon).

Feel free to correct me if I’m wrong.

They must be using client-side scripting to initiate a server connection onFocus in the Answer this Question textarea input. If they simply waited till you click the “Answer” submit button, they wouldn’t know or be able to display who is answering. It is a pretty neat feature. Very clever. It gives a real sense of activity on questions that provoke lots of responses as you see one after another message telling you who is composing an answer.

What I wonder is why do those alerts sometimes pop off, then pop back on? Perhaps that happens if the user changes focus.

It is a nice touch. It’s also rather “expensive” of computing and network time… it loads the servers with a lot of maintenance requests. This will probably produce scalability problems if the userbase grows significantly, with bottlenecks as the site tries to add capacity and runs into a typical set of issues that all sites have as they try to grow bigger and end up outgrowing their original design.

But is Fluther the next Twitter? Probably not :)

@markyy, If I understand your answer, you think we are not in simple page but in a chat room that save the question and all the answers, and that is the only different.

@HasntBeen , Javascript is a client side, how is it talking with the server side? After I got the page with the question and the answers the connection with the server ended, no more DB issues. Am I wrong?

@HasntBeen: ’Is Fluther the next Twitter? Probably not’. Are you sure? Why don’t you a look at Fluther’s profile at Techcrunch :)

I wouldn’t underestimate the people behind this site though, they seem to be very capable at what they do. You’d be surprised how few sites (of Fluther’s caliber) are able to successfully spread the workload over only three people.

@Ranimi23 I’m not just saying it, they say so themself. Taken from Fluther’s profile on Techcrunch: It also features real-time interaction, so you can receive answers and follow-up live; each question feels like its own chat room.

What I’m saying is in order to achieve the feel of a chat room, the technology behind it has to be more advanced than just writing and reading content in/out a database. Without going into the specifics.

@Ranimi23 : Javascript is actually a very sophisticated and capable programming language, and the browser provides extensive facilities for it. Pages can launch their own background processes, create active ‘agent’ objects which do their own communication with the server, etc. In this case, I haven’t studied the code, but I presume it is setting a timer in Javascript, and when that timer fires, some of the Fluther code is executed. This code checks to see what the user is doing (i.e. whether the edit box is still open, etc.) and sends that information to Fluther via an HTTP POST request. The result of that POST comes back to the Javascript object—the browser’s page never changes and the user would have no knowledge of this transaction. Then the code goes to sleep until the timer fires again.

The user can find out about this, it’s not top-secret: there are debugging tools and other methods of checking out what is going on behind the scenes. But unless you’re a programmer with knowledge of Javascript, you’re not likely to go looking for these details anyway :)

Here’s an image of the AJAX requests.
http://cld.ly/e2yj3
They’re about every 6 seconds.

Hi @Breefield , can you explain the request?
What software you use to see it?

@Ranimi23 :: He is using FireBug. It is a Firefox extension.

I believe they use YUI, and not jQuery.

Ok, so every 6 seconds Javascript requests a page (Just like you do when you load fluther.com), this page returns…simple data, i.e. no styles, no…layout; nothing that makes a webpage a webpage. It is just data, and in the case of above it’s formatted as JSON.
This JSON is then parsed, and Fluther uses Javascript to add the little icons to the page.