18

How does Stack Overflow show the answer added/edited message without a page reload?

enter image description here

Yes, I know it will happen with Ajax. So I opened Firebug in a browser to check it, to see whether any requests are coming in a particular interval of time. But I don't see any request coming in Firebug.

Can we perform a request without it showing in Firebug? Are there any other ideas behind this or is my concept totally wrong?

Xavi López
  • 27,550
  • 11
  • 97
  • 161
Justin John
  • 9,223
  • 14
  • 70
  • 129
  • 4
    This looks like a question for Meta rather than SO itself. – Fluffeh Sep 14 '12 at 13:14
  • 6
    AFAIK, they use WebSockets to do that. Not AJAX. – JB Nizet Sep 14 '12 at 13:15
  • 1
    It is showing in firebug `ws://sockets.ny.stackexchange.com/` – Tchoupi Sep 14 '12 at 13:16
  • @JBNizet (just adding) And with websockets, it takes an initial AJAX request to initiate and that's it (that you see in the console). I'm sure if you disabled websockets, you would see multiple AJAX requests either at given periods of time or only when something has updated. – Ian Sep 14 '12 at 13:16
  • 6
    @Fluffeh I don't think so, the example happens to be stackexchange but the question is about how this is accomplished. – Asciiom Sep 14 '12 at 13:19
  • I am not familar with WebSockets. Basically I am PHP developer. Is there any good tutorials for Websockets that how it is accomplished the request. – Justin John Sep 14 '12 at 13:23
  • 7
    Does not belong on Meta, this is a typical "how does do " question, it is just a coincidence in this case that the site in question is SO. – lanzz Sep 14 '12 at 13:28
  • In addition, the biggest advantage of WebSockets is PUSH ! It's easy to do that API. However not all browsers support HTML5 features. Maybe SO is using SignalR : a really powerfull framework to manage communication with new and old browsers. – Cybermaxs Sep 14 '12 at 14:16

2 Answers2

12

It appears to be using HTML 5 Web Sockets. They basically keep an open connection between the server and the client and, among many other things, allow the client to define event handlers to treat new data when received from the server.

Here you'll find some basic examples and concepts about WebSockets: Introducing WebSockets: Bringing sockets to the web.

The WebSocket specification defines an API establishing "socket" connections between a web browser and a server. In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time.

There is also a live demo with server & client source code available.

You might also find the following question useful: How do real time updates work?

Community
  • 1
  • 1
Xavi López
  • 27,550
  • 11
  • 97
  • 161
3

To add to Xavi's answer, if you want to get started with web sockets without having to understand all the internals, you might try out Pusher, a library for multiple platforms (including PHP) that makes push notifications on the web very straightforward.

I do not work for Pusher; it's just a product I've found very useful in the past. I've always used the free version for small personal projects, though I would probably pay if I ever used it on a larger application.

Community
  • 1
  • 1
Dan Tao
  • 125,917
  • 54
  • 300
  • 447