Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

How do facebook and Google Chat work

Featured Replies

I was on facebook recently chatting and I wandered how on earth it worked. I mean HTTP is stateless and the TCP connection terminates when the page is loaded, so how are messages passed from the browser to the server? I do have an assumption and I'd like to get other people's thoughts on it. I might try Wireshark to see if my assumption is correct. My assumption is below...

 

JavaScript is used in the background to continuously send XMLHTTPRequests (over TCP) to the server. These requests are essentially polling the server to see who is online etc. The server responds with people who are currently online etc. Then there is a database behind this handling all the chat sessions....

 

Bill sends message to Bob --> Message is sent to server and stored in database --> Bob's browser polls the server --> The server interrogates the database for messages intended for Bob --> Server finds Bill's message in the database and sends it back across the request --> Bob's browser displays Bill's message --> Bill's message in database deleted to save space

 

Does the chat use web workers? They would probably make things easier. Does it NEED web workers? I just don't know. The company I work for are looking to implement some chatting system and I'll probably get one off the shelf but I'd like to know how they work so I can customise it. Can anyone recommend any browser based chat providers? Paid or free. I'd like to know your thoughts.

 

Thanks.

AJAX :)

 

http://en.wikipedia....x_(programming)

 

You can send any kind of data you wish between the browser and the server without interfering with the display and behavior of the current page.

 

Using a framework such as jQuery to handle ajax requests http://net.tutsplus....ls-with-jquery/

 

Using JS http://net.tutsplus....raw-javascript/

 

So your assumption is pretty much correct, with things like chat, it's always a good idea to create logs and records.

 

This tutorial here: http://css-tricks.com/jquery-php-chat/ Will give you a little bit of an overview of how it works.

 

I have no experience with off the shelf solutions in this area, sorry.

 

Hope that's of some help to you :)

  • Author

Yeah I thought Ajax (essentially what I said in a round about way!). I'll have a look at the links you sent me, I'm sure they'll be extremely helpful. I'm new to Ajax but keen learn as well as HTML5.

 

You didn't comment on the server side stuff. Would the interaction be with the database like I said or would the server manage interactions/chat using temporary text files stored on the server? I'm not sure which would be easier to be honest.

 

I didn't expect a response so quickly, I'm impressed with this forum :clapping:

I think your pretty much right, not sure of the chat is deleted off the database immediately. Because you can get chat history sometimes. I dont think that the server is polled every few seconds, instead I think a comet implementation is used, where the http request doesn't time out and is held until there is a change on the server

  • Author

Ok thats interesting. How would you hold the HTTP session open? Surely after the server has sent the page the browser drops the connection.

AJAX :)

 

http://en.wikipedia....x_(programming)

 

You can send any kind of data you wish between the browser and the server without interfering with the display and behavior of the current page.

 

Using a framework such as jQuery to handle ajax requests http://net.tutsplus....ls-with-jquery/

 

Using JS http://net.tutsplus....raw-javascript/

 

So your assumption is pretty much correct, with things like chat, it's always a good idea to create logs and records.

 

This tutorial here: http://css-tricks.com/jquery-php-chat/ Will give you a little bit of an overview of how it works.

 

I have no experience with off the shelf solutions in this area, sorry.

 

Hope that's of some help to you :)

 

Very Useful +1 :)

Ok thats interesting. How would you hold the HTTP session open? Surely after the server has sent the page the browser drops the connection.

 

Technically, I have no idea, I can vaguely guess that the connection doesn't time out, like a normal request. Only reason I came across it was for instant notifications for a web app I am developing. I read that gmail uses it so that emails appear instantly without a refresh

Technically, I have no idea, I can vaguely guess that the connection doesn't time out, like a normal request. Only reason I came across it was for instant notifications for a web app I am developing. I read that gmail uses it so that emails appear instantly without a refresh

 

This might be of some interest, http://ajaxpatterns.org/HTTP_Streaming

 

I've always been under the impression that comet didn't really scale very well in php, i've been told python and ruby are better languanges to implement the approach.

 

That's what i've been told (whether it's true is another matter...)

What you're really talking about is push technologies and the combination of ajax (to make requests without refreshing the browser page) along with push techniques such as server push or http long polling which are commonly termed as Comet, comet is not really a technology in itself. Generally the chat solutions these days are ajax combined with long polling, and requires an upstream and downstream connection, rather than a bi-directional connection or true streaming.

 

Here the low down on HTTP push -> http://en.wikipedia....Push_technology

 

HTML5 brings websockets, which provide a truly full duplex communications rather than a hack, take a look at a few of these links which explain websockts:

 

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.