I've come across a live chat on a website and i was wondering how it would work?
The reason being is i thought it would be the normal AJAX based chat where it updates the messages by sending an AJAX request x amount of seconds or by using PHP sleep() to keep the connection open until new messages were sent.
However upon inspecting it using firebug, i couldn't see any AJAX requests being sent, when i was sending a message and when new messages were being retrieved. How does this work?
It's most likely using the Websockets protocol: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API. However, it's also possible it's using Flash.
Related
I've implemented realtime chat in Websockets and it works just like a charm. I did it side by side with AJAX polling (which existed before), as I didn't want to remove AJAX polling support for older browsers, so although Websockets will be preferred, I am keeping polling as an option.
The way I have the websocket code set up is to:
Use Websockets to send the messages to the appropriate connections
Log the message in the database
The way the AJAX send works is:
Log the message in the database
The way the AJAX poll works is:
Check when user last retrieved messages for a room, and retrieve all messages since then
I have more of a conceptual question about how to get the two to work with each other. Assume I have User A and User B. If User A and User B are either both using AJAX polling or both using websockets, there are no issues whatsoever. It works as you would expect. But take the case when User A is using websockets and User B is using AJAX polling.
A → B
User A sends message via websocket
Chat message gets sent to all relevant connections. In this case, it just echoes back to User A, since User B is not using websockets.
Chat messages gets logged into database
User B requests new messages, and User A's message is sent back to him
B → A
User B sends message via AJAX
Message gets saved in database
?
This is what I'm hung up on. Websocket -> AJAX user messages work because the message ends up in the database where it can be polled by an AJAX user. But websocket users don't poll the database at all, so messages from AJAX users have no way of getting into the pipeline. Currently, websocket users don't see any messages from AJAX users. They only see them if they do a full page reload, at which point all messages get retrieved directly from the database.
What would be the appropriate method to allow some way for messages from AJAX users to get sent out via websocket to relevant websocket users? Basically, how can I communicate in the other direction?
The only thing I've been able to find on this subject is this slideshow - however, I'm not using longpolling, and I'm not entirely sure what it means by "providing that" to the websocket app. Does that mean put the onus on the websocket server to check for new AJAX messages? Is there no way to "push" from the AJAX script to the websocket server?
Thanks to ADyson for some ideas on how to approach this. This is what I ended up doing:
I have my JS clients ping the server every few seconds. For AJAX users, it's more frequent because they need to poll for messages. For Websocket users, they don't need to poll for websocket messages, so they poll every 15s to "check in". This has the benefit of functioning as an infinite loop essentially for each client, which is exactly what the idea requires.
What I did was essentially add a column to the messages table that keeps track of the message source: 0 for AJAX and 1 for WebSocket. Then, I modified the function that retrieves messages to take in an $ajaxOnly parameter. When I call this on an AJAX poll, it's false. For websocket polls, I call it with true instead. The result is for all rooms a user is in, it polls the DB and checks if there are any new AJAX messages. If there are, it sends them back to the client.
There are 2 caveats:
Messages will appear out of order. Websocket messages are relayed in realtime, so an AJAX message sent before a Websocket message could appear earlier to another AJAX user but later to other Websocket users.
This is not realtime. It's as slow as your poll interval, which in my case is 15 seconds for websockets since polls are very DB-intensive. AJAX polls are more frequent because they need to be to get any messages at all.
This isn't a perfect solution, but it does meet the goal of allowing AJAX messages to show up for websocket users in near-realtime. For me, I wanted to fully support AJAX and WebSocket, but AJAX is more for compatability and ideally most people will use WebSockets, so the fact that this isn't a great solution doesn't concern me too much, since it does get the job done.
If you were hoping for a realtime solution (like I was), you're going to be disappointed by this, but this is at least a workable solution so I've adopted it until something better comes up. You can make it near-realtime by increasing the frequency with which clients ping your server.
Simple solution:
When you save the message into the Datebase, push it to the Websocket Clients as well.
We are making a app with php in which we want to push data to client browser same in the way in which facebook notificaiton sent by facebook. i know about commet and also have used ajax in past but ajax is not efficeint while commet programing is out of my mind.
Sample can seen at ESPNCRICINFO.COM live scorecard which is automatically pushed
by server to brwoser and than append to document without refreshing. Same app we
have to made.
Simply i need to build some code that send data to all the browser which have our webpage opened. No restrictions. Just need to send to all. So there is no need to check to whom data will be push.
I really need it urgently.
can you use JavaScript setTimeout(function name, seconds) ?
In JavaScript function you can generate .post request for some PHP script which can load messages, when the message will load, you can show it via you JavaScript. the timer will call this function for all people.
I need to configure TWILIO SMS account to forward the received SMS to some PHP URL. So,
now if I have that PHP URL already opened in my web browser, and if some message is being forwarded to this URL from TWILIO with GET request, how can I show the received data in that already opened PHP Web URL?
Ex : If I give this URL http://www.somephp.com/index.php in TWILIO dashboard to forward the incoming SMS with GET request.
And I open that in my web browser already to see if there is any SMS from TWILIO. How can I constantly check if any new SMS forwarded from TWILIO?
Can I use any TIMER to check GET requests ? Or Am I totally in wrong way? I cannot find any solution around when I google. Please forgive me if it seems to be a silly question. I would be very grateful if you could guide me in this issue. Thanks a lot for your time!
For easy you can use the jQuery library, then poll regularly for new data using a backend php script.
You'd have to use some JavaScript (jQuery might be easier) to run a setInterval function every X seconds. Anther option is you could use a meta-refresh that would simply reload the page every X seconds.
I dont think that way its possible to achieve what you want.
What you can do is -
set http://www.somephp.com/index.php as sms reply in you dashboard.
In index.php save any new request into a database with sender details and message content and time it was received.
Now write a new script say http://www.somephp.com/updateMessages.php
In this page use jquery or javascript to make AJAX request to a script which will connect to database and check if there are any new messages. If there is, display that message and start checking for a message received after this message.
This way if you will open http://www.somephp.com/updateMessages.php you will get all new messages here.
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.
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.