I have a chat script on a webpage.
Now, when someone adds a message I want to notify other people who have the page/tab open but not active, to receive a notification of a new message.
For instance, I would like to change the page title from 'Chat' to 'New message - Chat'.
I think this is what 'Facebook Chat' does too.
But when I use:
document.title = "New Message";
It only changes in the browser of the user that submitted the message. Not on the other browsers.
How can I achieve this?
You can give your title an id:
document.getElementById("title").innerHTML ="new Title";
or simply
document.getElementsByTagName('title')[0].innerHTML = "New Title";
either way it will work
UPDATE:
after rereading i made a mistake i see.
when your script check for a new message, if there is a new message you should change the title also, or perform additional test to see if there the user is active or not before changing the title
To do what Facebook Chat does, which is notify each user of updates in close to real time, you need to use "push" technology or something that emulates it. Possible techniques are polling (just having each client regularly hit the server to check for updates), Comet (long polling or streaming connections to the server), or newer and more authentically "push" (but less supported) methods like server-sent events or the WebSocket API.
Polling is not the most efficient technique but will be the simplest to implement. You could start by writing a server-side handler that accepts a timestamp, and returns a count of updates since that timestamp. Client Javascript calls that handler at an interval, passing the timestamp of the last check, and handling the response (updating the title bar if there were recent updates found).
Listen document.title = "New Message"; is an absolutely perfect code but you've put this in such an area that when a person types a message, it is executed on his page which is wrong. You should add this piece of code when the user waiting for a reply (the other user, you're chatting with) when the AJAX (or any other method you use to check) receives a response from the person who has typed the message.
Basically what I'm saying is that this code piece has been placed in the wrong place. You must place this code piece when a person received the chat message and not when it is dispatched to another person.
And then later on body, you can make event when onmousemove change the title back to the original one! So this is how Facebook Chat works.
Your mistake is the place, you've place your code piece, nothing else!
Hope this helps, Cheers!
Related
Basically I have a chat, using AJAX, PHP.
I let guests login by filling their name and clicking login.
It fills the session $_SESSION['guest'].
Now, when they close their browsers, or something, once the session ends, I want it to say in the chat
"The username has left the chat".
But I am not sure on how would I do this.
Any ways to do it? Maybe I could fill an array of users that were active in the past 5 minutes, if not, remove from the array and it will kick them off the chat.
Any ideas?
You could have an array of users in the backend with the timestamp of the last ping.
Then, the clients end can update the backend using ajax by sending a new timestamp every so many seconds.
Whilst your backend is being updated by one of the users, your backend can do a check on all users checking the last timestamp sent to the current time, if its over 2 minutes or something you can tell they have left the chat and output the message.
Without a direct connection to the browser, you won't be able to actively tell if they're connected. I'd suggest a ping-like solution, requiring the browser to ping the server every n seconds to keep the chat "alive".
If the browser doesn't "check in" with the server, the server assumes they've disconnected and reports back to the other participant.
That said, if you're able to dive a little deeper, Google "javascript real-time chat" and you'll have several paths to success.
Add a jQuery .unload() event to your chat client. When they navigate away from the chat it will be fired and you can use it to send the last bit of data to display that message.
Here is the documentation: Link.
Example:
$(window).unload(function() {
//send message to server informing it of client leaving
});
I've created a small jquery and php chatroom with some .get and .post functions and php docs that read and write data to a sql server. It works fine, but the small problem is when someone posts something, it takes about half a second for it to appear (because of the lag).
I fear there's something wrong with my coding.
im using
setinterval (listen, 300)
as my continuous jquery function for reading new db entries, listen is a function with a .get inside. How does stackoverflow or facebook do it so that the user types something in and immediately it pops out?
Maybe try displaying the inputted chat message immediately to the user who posted it, prior to posting it to the database.
Like this:
User enters message, submits
Update users chat window so they see it immediately
POST message to database
GET from db and update all chat windows
This can be implemented using various techniques, which have many names: Long-polling, Server Sent Events, Comet, WebSockets, and others.
Basic idea is this:
Alice opens facebook. Her browser makes a request for updates ($.get, for example), but the server does not respond if there are no new updates and the request remains in 'waiting' state.
Bob opens facebook. He decides to comment on Alice's wall. His browser posts his comment to the server ($.post).
The server accepts this post, handles it properly (saves onto Alice's wall, etc)
But ALSO server checks if there is a waiting update request from Alice. If there is, server renders info about this update into response stream and closes the connection.
Alice's browser finally gets a response to this long hanging request and happily draws a red "1" in the notification area. It also immediately opens another update request (to not miss any).
Alice sees comment from Bob, which was delivered instantly.
The technique described is called "long polling" and it was first introduced by Google in Gmail.
You can use HTML5 sockets, however these are very much in their infancy and not widely supported (i.e. by IE).
Lots of systems use Flash as a middle-man as that can hold a connection open.
With either of these you can use your PHP code that stores the comment to the database to also push this out to every "listener". This will be the quickest way possible. If your system is super clever it'll incorporate all three - HTML5 sockets where it can, Flash where it can't, and your regular polling were there's no Flash either.
http://pusher.com/ might be a good starting point for further learning.
Most sites that have fast chat use a technique called comet. You can read more about it here: http://ajaxian.com/archives/comet-a-new-approach-to-ajax-applications
It essentially is a piece of modified server software that waits to return a response to the user until either a message is sent or it is about to timeout.
For my next application i would like to implement something that has a feature like the facebook wall but let me explain a bit. For those of you who used facebook you know that when somebody posts a message on your wall, and you are logged in to your account, you will get a notification immediately somewhere in the lower left corner. Lately they even pushed this a little bit further and if somebody comments on it the comments are updated as you visualize the page, it's like an instant chat.
My application will be developed in PHP, I will use Zend Framework to do it. I'm interested in the basic principle that makes the facebook wall behave like that (updates in real time). I know there is ajax involved but I can't really tell how is the javascript triggered when the user is doing something. Or even more, how to push back to a user some info that was added after he viewed the page. For example, let's say that a somebody adds me as a friend. I would like to see a notification saying "X has added you as a friend" if i am logged in. I hope you understand what I'm trying to do.
If you can tell me some basic ideas, maybe provide some links that have this information I would be very grateful.
Thank you for your time in reading this.
you need to look at comet , reverse ajax , ajax polling
If some event is triggered, then store the event on database (with ajax or without ajax).
You will be needing a script in server to check if some event has been triggered or not. This script should be able to check events that are stored in database.
You need to execute script in step 2 periodically. This can be acheived with with ajax (javascript or jquery) and a function settimeout (on javascript) to send ajax request to server periodically.
Changes are sent from server. So parse the response and update in page using javascipt and jquery.
So, it can be summarized as
Register an event (for one user)
Check the event (for other user)
Parse the response and update the page
There are several elegant ways to do this as answered by others.
The best would be the start the project and ask for help where ever stuck.
It is only partially possible to keep an HTTP connection open, so the best option is probably to poll for changes. You can send a request each second to see if anything is changed since time 'x'. On each response you send along the server time. With the new request you send the time of the old request and the server can return any events that happened inbetween.
Also you can read something about AMQP. You can send a message to recepients inboxes (after some actions in your system) and then read inboxes after start or with some time interval.
How a notification can be shown after we are receiving a new message like FACEBOOK is displaying without refreshing a page. ( facebook is showing RED color notification after receiving a new message).
Thank You
There are two ways out there, you poll, or Comet.
Polling means you ask this question to your server periodically: "is there a new message?" with Ajax. If there is a new message, server returns it or the number of new messages.
Or you can implement some kind of Comet. Comet is a technology which contains open connections between client and server. Since there is an open connection, your server can send new information to clients.
After the number of new messages arrived to you, you can edit your DOM via javascript to show a red notification whereever you want.
You need to use setInterval to periodically check for any new updates and then, if they are found, use ajax to pull in the message.
Easiest way is to use jquery to update the content of a div at a sepecific interval...
#idofdivtoupdate
as it says.. the id of the div you want to auto update...
setinterval is in miliseconds.. (so 5000 checks every 5 seconds)
function updatecontent(){
$('#idofdivtoupdate').load('yourserverscript.php');
}
setInterval("updatecontent()", 5000 );
If ive understood you correctly you need to look up a technology called AJAX, its a combination of JavaScript and XML which allows the sending and receiving of data behind the scenes ie without needed to refresh the page. Theres plenty of tutorials/information out there about it and its not difficult to get the hang of, hope this helps.
In SO, when your question got answer. or you got new badge, event is triggered. Or when you got new PM in forum, it also lets you know by alerting message.
You see message that something happened with your account when you enter site for first time after this event.
How is this implemented? How do scripts know, that they have something new to show you?
The programming technique you are looking for is called Comet. The link to wikipedia describes some implementations of that, but the easiest way is to make an XMLHttpRequest with a long timeout and only return data on change.
As an answer to your last comment
There are several tecniques to mark events as a 'new'. It can be another field in the database table, of boolean type: telling if event was shown to user or not. Or - easiest one - just a time of last user's visit being recorded in the session, and then al upcoming event's time being compared with it.
The event happens when another person does something like vote on your answer or question. This is recorded on the server side.
When you log on to the site the fact that some events occured while you were away can be determined from looking up the database for these records.
While you are on the site it is possible for the page to periodically poll the server for changes. So its not really the server that the event is triggered on.