I have a textArea in which the conversation from all users will be displayed.
When a user types a message and clicks send button, I want it to be displayed in textArea of all logged in users without use of database/file. I want it to be done using AJAX and PHP only.
function send1()
{
req.open("GET", "process.php?q="+document.getElementById("msg").value, true);
req.send();
}
It would be simpler to use WebSockets, but if you use AJAX, save your sent messages in the DB or a file and organize the client side to read this content every 30 seconds for example, also you should maintain in your db / file only the last 50 messages, if a new message is added, erase the first one. Try to understant how the server and the client side works, then think the model of your application, on paper.
You'll want to use sockets to subscribe to a channel of messages. Ryan Bates has a great gem for Ruby on Rails that takes care of launching the channel server and the security issues that PhpMyCoder brought up.
Check out the private-pub screencast for a setup guide.
If you're not worried about storing anything in a database, you can use node.js. Here's some sample node.js code
Related
I successfully send data from Android to PHP and store in MYSQL database.
What I want is to display the data in my PHP page automatically without refreshing the page when data has been sent from and Android device.
Is this possible, possibly using jQuery with AJAX?
Please explain how it can be done or point me to a resource where I can find such information.
So you essentially want to update the page when data changes on the server.
Two main options come to mind:
1. Ajax poll
Use setTimeout in conjunction with an ajax call to periodically call the server and see if anything changed. You already mention jQuery, that's certainly a good place to start. Get familiar with http://api.jquery.com/jQuery.ajax/. This is probably going to be your best bet.
2. PubSub
I use http://www.pubnub.com/ on one of my sites for this very purpose. The browser subscribes to a pubnub channel, and the server publishes on that channel anytime something changes on the server. This is obviously more work to get setup up front, and more applicable for rich client-side applications (mine is a single-page app).
There are plenty of other implementations of PubSub as well.
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.
I want to learn how to make one of these systems from scratch and I'm find a lot of junk links on Google. I really just want a simple tutorial for the most basic PHP and MySQL chat so I can understand the concept before I start messing with jQuery/AJAX.
PHP/MySQL chat 101:
1) user opens a browser
2) user enters address in brower
3) browser sends HTTP request
4) server recieves HTTP request
5) server tells PHP interpreter to run PHP script
6) PHP script connects to MySQL database
7) PHP script retrieves list of messages
8) PHP generates HTTP response made of HTML code with messages and form
9) Server sends HTTP response to browser
10) Browser draws HTML from HTTP response
11) User types new message and submits the form
12) Browser send HTTP POST request
13) ...
A very simple starting point
Have a database table for a Message
id | user | timestamp | message
And have a PHP page that sends an AJAX request to read any new messages.
This will involve checking the database to see if there are any messages since the time the request was received. If no messages, then loop, wait and try again in 100ms (or whatever you think is acceptable lag).
When the Ajax request returns a message (a JSON response would be best), output the user, time and message to the page using JQuery.
The live part of your chat is the tricky part, if you are just beginning i would skip that.
Start by building a simple guestbook, and then add more features.
There are many tutorials available on how to build a guestbook, and even some free scripts where you can learn from.
After you got your guestbook working, you could add features like auto-loading new messages to make it appear as live, using AJAX polling. What you basically do make an AJAX call to the server at a regular interval to get all the messages and display it on your page.
Found very interesting tutorial here
http://tutorialzine.com/2010/10/ajax-web-chat-php-mysql/
If you must use php and mySQL for chat, atleast have a seperate table for unread messages. If you poll you will most likely need to check the database for new messages every 100ms or so. If your total message table is 1000 rows checking every 100ms will kill your server (especially if many users are connected). I would structure my mySQL database with a table for only unread messages and move them to a bigger table for old messages once read. That way your not checking a big table all the time.
Even better is to use a cache database for unread messages like redis (facebook used memcacheD).
Even even better is to just not use php all together and use an event driven language with callbacks like node.js