I'll try and explain this as best I can. But basically on a website when you have some dynamic content such as messages, notifications, etc... You would want this information to be presented to the user as soon as the message arrived. Example a user is sent a new message show show a bubble with the count in the header of your website.
You see this stuff on nearly every single website these days and I'm unsure as to the best way to implement such a feature.
My initial idea was to write some ajax call and then wrap this in a setInterval call so it's requested every 30 or so seconds. The obvious problem here is that a) you have to wait 30 seconds for the request and b) you might be requesting the server hundreds of times in a day with no actual new content to ever display.
My second thought was to use EventListeners as they seem for more ideal as from what I understand they only do a request when the server tells it something. But I'm not 100% sure how to build something like this. Can anyone whip up a quick example or point to something that would serve as the basis for something like this?
So to clarify what I want to do:
When something new happens like sending a message or creating a notification this will send an event that the event listener picks up and updates something on the page either showing a small popup with the info or updating a bubble e.g. Messages (2)
I'll be using CakePHP and jQuery to implement this. So anything specific to this would be awesome... Hopefully someone can help me out.
Essentially I'm asking about EventListener vs setInterval and how it would work with ajax calls...
As suggested by Alex Ball, you should research about COMET programming techniques, and also look at the answers for this question Simple comet example using php and jquery. There isn't really a "simple" answer to implement an effective technique to what you are asking for but the most effective one is using an iframe. Using an iframe will allow you to have a persistent connection with the server (PHP side). Here you will be able to check for new messages (query for new messages) and if there is any, return your data. Your ajax call (success function) will the process this data and then do another post back to the server. If there is none then you would have to loop.
Again, effective COMET Programming techniques are not simple to implement.
Here are some useful examples though:
http://www.webreference.com/programming/javascript/rg30/index.html ,
http://www.zeitoun.net/articles/comet_and_php/start , setInerval wouldn't be effective for chat, maybe notifications.
COMET techniques are not specific to CakePHP.
Related
Currently I'm making a chat application where only admin and users chat, no user-to-user chat . The design is: every chat is stored in database and each 2 seconds user and admin make an AJAX request (to a php file) to see if there is a new chat dialogue, and if there is, pull the data into the textbox. It all seems normal and working good.
Problem is as more user is talking to admin at the same time the AJAX request is becoming a lot, and by testing, the web performance already decreased with only 5 users chatting at the same time. And the input is slow too, every time user press enter they got to enter the data into database first before the admin can read it (and vice versa).
I have been told that using JSON is a recommended way, but I have no idea how to do it, can someone please at least tell me how's the design or flow is going to be if use JSON? Or is there a better way to make it? (by the way, using node.js is currently impossible for my current hosting, so don't put it in suggestion lists, sucks I know).
You should change the AJAX responder phps output to JSON. (you can use the json_encode php function for example.) And you should parse(eval) this in javascript.
I am a bit sceptic. It think It could reduce the network usage by more than 50%.
Maybe you can try a message queue, like 0mq or rabbitmq.
There are a lot of chat examples around.
I am in the middle of making a social network, and i want it to be as smooth as facebook.
Like if you look in a console and look at logging, it doesn't update all the time with ajax calls.
on my site i have to load: notifications(the number of new notifs and the notifs themselves), friend requests(same as notifications), online friends(if there are any online it will load the pictures of the online users.) thats 6 ajax calls that is loaded every 10 second. and this causes a huge bandwidth waste and server requests.
Therefore i thought, what if the SERVER told the CLIENT when there was a new update instead of the CLIENT asking the SERVER every 10 seconds.
i have googled this problem and read about ajax push, and a framework called comet.
i just can't seem to find any info on how to implement this on jQuery.
I looked briefly into Comet. It appears to be ambitious, experimental and won't run on just any old server.
As I understand it, Comet doesn't really push as such but does something called "long polling", which I won't try to describe here. The web already has several good texts on the subject.
Personally, I would stick with the current plan (conventional AJAX) but make one general purpose call with all the necessary data bundled into an object and JSON encoded. This will reduce 6 requests down to one (every 10 seconds).
You can box-clever by returning nulls within the returned object for information that hasn't changed thereby minimising the length of each response.
As far as I know, you must make significant modifications on your webserver to get this thing to work. Also, server side php is not really a good option.
Somebody had already asked something similar here: Using comet with PHP?
You can try socket.io on node.js too. It works great for real time communication
http://socket.io/
I want to program some sort of notification system. What would be the be the best way to achieve this?
By calling Ajax request call to database on page load? But the problem with this is that it only checks on page load. It would be better if it was even realtime, I guess that depends on the priority of the message. How would I go about on achieving this?
By using cookies?
I am using PHP and jquery.
Like you said, it depends on message priority.
If notifications are made upon the visitor performing an action, it would be easy to tie in session-based notifications.
If notifications are made upon other users performing an action (e.g. "John made an edit to this page. Click here to view."), you could use long-polling AJAX to wait for a notification.
You might wanna look into COMET programming.
This would most likely require you to implement this as a distributed solution depending on your traffic.
Basically you'll have a java script function that goes to a server to check for notifications and if it finds any, calls another script that fetches the notifications back to the client. This should happen every so often, and WILL create a higher traffic and leave more connections open.
Take a look at this thread: Using comet with PHP?
For something small, I would consider using setInterval in combination with jQuery .load to load JSON.
Well AJAX and Jquery can be used to develop basic notification system. I've implemented it completely here: http://www.cloudways.com/blog/real-time-php-notification-system/
You can follow it step by step and also scale it as per your requirements.
I'm here to ask you if what I think is the right way to go around coding this.
I have a site that receives private messages and I wish a flag to show up the moment the person receives a message. Should I check for new messages every 3 seconds and show the flag if there is a new message or is there a better way?
If I did it in ajax, I was thinking check every 3-5 seconds for new messages, and once there's a flag, stop checking for more.
My only concern is, if it checks every 3-5 second, will it cause any lag or glitchyness for the person when they're typing? Lets say they're typing out a paragraph somewhere, I don't want their writing to glitch while it checks those 3-5 second intervals.
One of my coder friends mentioned there is a method with Ping(?) or something like that. Where the person is always connected to the server and when there's a change it notifies the user. I'm totally unsure of how this works.
Anyone know how facebook does it? haha.
Thank you!
If you have done the AJAX well, it should not lag/glitch while typing. Something like 3-5s is good as its fast enough but won't slow down server/browser.
Did he mean "push"? In push the messages are pushed to client in realtime, client is not asking if there is new messages. This is most likely the method Facebook is using.
One of my coder friends mentioned there is a method with Ping(?) or
something like that
To be honest I really don't like periodic refresh(polling at intervals), because tt has scaling problems(I got notice from hosting provider when using periodic refresh). You should use more efficient transports like for example:
WebSocket
Adobe® Flash® Socket
AJAX long polling
AJAX multipart streaming
Forever Iframe
JSONP Polling(cross domain)
To use this you could for example use:
hosted solution pusher with API and generous free plan. This gives you max 20 concurrent and 100,000 messages per day, but no SSL, so do not transmit sensitive information over the wire. They also provide third-party PHP client available at github implementing REST API.
socket.io (I like this a lot)
tornado
netty
Anyone know how facebook does it? haha.
For chat they use Erlang. They also have open-sourced tornado(see link above) which they required from friendfeed which they acquired in the past. Facebook is a PHP-shop, but they decided to not use PHP for this, because PHP can not yet do this efficiently. Anyway they are using one of the efficients transports above.
I'd like to make a div's contents update as soon as a new row appears in a MySQL database (I'm making a webmail app). As I'm writing this, it's becoming more clear to me that I can't send some sort of server message to the client asking it to update, so I've come to the conclusion that the best way to have live updates is to use a jQuery ajax call, triggered by a setTimeOut event.
My question is: is there a better way to do this? Or if I have to use setTimeOut, what time interval should I set to keep the optimal balance between server usage and update times?
The code run every AJAX call will be one query (to fetch new mails) and a loop to post it to a ul.
This is the best way unless you use Stream Hub or a COMET server which is reverse AJAX :)
I think HTML5 WebSockets might be what you're looking for...
There's an example usage here.
As you mention, support is limited to Chrome and Safari at present.