How to display ajax results without ending a php script? Jquery - PHP - php

I'm using the PHP Imap Library along with Ajax to display search results from within emails. The main problem I am finding is that providers (Hotmail in particular) will cut off connection after 6 or 7 connections in close proximity of time.
Instead of imap_connect() in each script, I'd like to connect once and then continuously display information with ajax. I just have no idea how to do this. The problem is that I need to spit out data through the ajax. Is there any way to return information without ending the PHP program through jquery?
I could also potentially do this if I pass the imap connection variable $connection to the php query instead of calling it, but unsure how to pass it. Here's how I'm currently passing the variables.
var dataString='email=<?php echo $email_address; ?>&connection=<?php echo $connection; ?>&password=<?php echo $password; ?>&server=<?php echo $server;?>&daysago='+daysago+'&num='+num;
$.ajax({
type: "POST",
url: "fastsearch.php",
data: dataString,
success: function(msg){
Link to Imap Connect (and general php imap library):
http://php.net/manual/en/function.imap-open.php

I've done "socket emulation" programming in PHP and jQuery in the past, which is a sort of COMET based approach to keep long connections.
This is really a shining example of where Node.js is favorable to web application development as for the easily installable and usable Socket.io library.
Node.js aside, you have a few options, forking a process that keeps your connections alive and persistent, not connecting live every time someone signs in (use an async task manager like celery), and using a COMET approach which is basically an infinite while loop that constantly spits out data to the client side. The latter would keep a single connection open, but would also be highly unstable, non-performant, and by using PHP the wrong tool for the job.
I'd urge you to reconsider your PHP dependency for this specific task, and instead move in favor to a library that was designed for this specific server push/persistence.

Related

dynamically update php website

Ok... I'm rather new to php (and I know this is probably a dumb question) but I am in the process of hooking up a C++ socket program to a php website.. Currently I can send strings to the website and all works well... Except... it only displays the stuff sent ONCE the php finishes executing...
Solutions I think will work:
1. Make the page somehow run echo's whilest executing
2. find a proper solution, i.e. setup a tcp connection and maintain throught the user sesion (how??) then execute a script which prints to the page apon receiving data
I've tried flush... didn't work
Actually, after thinking about it... Is there a solution where I can maintain a socket tcp connection even if the client changes page? That would be useful... Heres the source:
server(c++):
http://pastebin.com/QfaUrF92
client(php):
http://pastebin.com/hZXKsGN0
please note that I know how crap the code is.. It's just testing and fiddling to figure out what I can do and how I can do it
edit:
I'm trying to impliement my own Long Polling system through connecting a php session to a C++ server... I'de be willing to throw away sessions if it's gonna be dificult, but in the end I would love to be able to maintain a session so that I can fork a process to manage the client through out their browser changing pages
PHP is executed server side, so once the page has been generated it's static. If you need the page content to constantly be updating, you can either use web sockets or ajax. Basically, AJAX will let your browser speak to your server using Javascript once the page has been rendered. Libraries like jQuery make it very simple.
From the jQuery docs (http://api.jquery.com/jQuery.post/):
$.post("test.php", { name: "John", time: "2pm" })
.done(function(data) {
alert("Data Loaded: " + data);
});
You can use NodeJS. It is server side JavaScript.
Using NodeJS you can build a socket connection between the browser page and your web server. Using this you can push data to the browser at the will of the server.
But it might take you some time to get started.
Recommended reading:
www.nodejs.org
www.nodebeginner.org
socket.io
hacksparrow.com/tcp-socket-programming-in-node-js.html

Performance issue in continous ajax requests?

I created a ajax chat application something like this to check & get messages every second. and it works fine.
function get_messages(user_id) {
$.ajax({
type : "POST",
url : "messages/get_messages",
cache : false,
data : {
user_id : user_id
},
success : function(data) {
if(data != '') {
var obj = $.parseJSON(data);
var messages = obj.messages;
}
}
});
setTimeout(function() { get_messages(user_id) }, 1000);
}
My question is, When lot of people use this application a lot to Ajax requests to server every second, is there any performance issue or server issue in doing like this, . What is the best practice for doing this ??
Thank you for your valuable suggestions :)
The best way to do chats like this is having the "chat window" properly said as an <iframe> with a permanent connection to a script that will remain running and feeding the client with the new messages so you don't have to overwhelm the server with AJAX requests. This can be achieved by calling a ob_flush() (just to make sure) and flush() after printing new stuff, causing the client to receive the updates immediately. But first you have to prepare the PHP to behave properly by doing some settings:
ini_set('zlib.output_compression', 'off');
ini_set('output_buffering', 'off');
set_time_limit(0);
If you are going to use sessions, don't forget sessions are locked to prevent concurrent writes, so after gathering the information you need from $_SESSION you must release the session by using session_write_close() otherwise the user will be unable to post messages etc.
Your script should also check for inactivity and output something to the client if the chat window remain idle for more than a couple minutes. It prevents the connection from being terminated by the browser. It doesn't have to be anything visual, something commented like <!-- keep alive --> will do.
Now, where you gonna get the new messages from? There are a couple options for doing that:
Sockets. You can have this Chat Server application running in server-side that all the Chat Window PHP scripts will connect to to be fed with the new chat lines. When a user submit a new message, its sent to the Chat Server and it broadcast to the Chat Window scripts. This Chat Server can safely be written in PHP too!
A file. The easiest way. Every Chat Window PHP script open this same file for read-only, and fseek() to its end. Loops checking if its !feof() a couple times per second to read the new lines from it, if theres any. When a user send a new message you just have append this message to the file and the trick is done.
SQL. Not recommended because every Chat Window PHP script will open a new connection to the RDBMS and eventually will reach its limit, but you can try SQLite that don't use RDBMS.
Using regular Ajax/Php for this task is not preferable. As you stated that what if there is alot of users, each user will query the database every second.
This puts too much overload on your server and the users will not have realtime communication with each other.
I would suggest you to use node.js for this task. To make it cross-browser compatible you need to use a framework of node.js which is socket.io
So the final verdict, use node.js
You can learn node.js
http://www.nodebeginner.org/
There are very good tutorials in the web.
lynda.com has also very good tutorial on node.js

How can I connect to a server through JavaScript where my PHP program is housed?

I am writing an Android App, and already have a working program written in HTML and PHP. Using the two, they contact an API with a user customized lookup on the html page, which then sends to the PHP page, contacts the API with the customized search, gets a result, and the php outputs to a html page again.
I know PHP cannot work on Android, but I plan on using PhoneGap. With PhoneGap, I can run JavaScript, HTML, and CSS supposedly. I have also read that a solution with Android being unable to understand PHP is to connect to a server (my computer) which can run the php for me, and then output it in a way the phone can understand.
My plan is to use JavaScript, which PhoneGap can understand, to connect to my computer, and have it run the PHP and output the page in HTML which again, PhoneGap can understand.
If this is absurd, please let me know... Otherwise I'd greatly appreciate it if someone could push me in the right direction in a JavaScript function that would allow me to authenticate myself, connect to my computer, and tell it I'd like to use a certain PHP file.
We had the exact same problem when developing our application for Android as well as for iOS. Like Austin told you already you have to make use of AJAX.
W3schools - AJAX
I recommend you however not to use jquery if it's only needed for a few simple things because it's fairly heavy because of the big script it has to load. So if you can reduce the amount of code, please do so by learning the real JavaScript instead of jQuery.
Also, what we did is writing our own APIRequest.js object. When calling this object like so:
var result = new APIRequest('functionname', {param1:value, param2:value})
This is a fairly easy approach to connect to your php which will run off course on your server somewhere in a foreign country or your pc.
As you can see we insert a functionname, we have developed our API as a fairly simple OOP php thingy that allows us to put a functionname.php in a certain folder and it will be read by de script and then select that function. Database connections and stuff like that will be aranged in the index of the api. With this approach you can make special functions, server-side, for every unique handling.
I am telling you this because you are making use of JavaScript. I'd like you to understand that it is not safe! It as as safe as a JavaScript application on your computer. It is possible for a hacker to download the .apk to his computer, run it in the simulator on his pc and make edits through his console. And thus meaning, he can change your whole code (at least, the JavaScript part). So make sure you try to make this as safe a possible, with keys and stuff like that. Also, try to do as much logic as possible on your server, so the logic can't be changed. Only the input parameters to your API.
I hope this helped you!
Here you would need to use AJAX. jQuery has a great wrapper function called $.ajax that makes most of the process pretty simple and straightforward.
AJAX will send an asynchronous request to any file (in your case a php file) and fire a callback function with the data it receives.
(synchronous is also possible, but not recommended as it will make your application hang until the request is complete. More on why this is not recommended)
Some good reads on the subjects covered here:
http://www.sitepoint.com/ajax-jquery/
http://www.impressivewebs.com/callback-functions-javascript/
The basic technology you want to use is AJAX, which is the term for making server calls over HTTP from Javascript. You pass data to and from the server in XML (the X in AJAX) or perhaps in another encoding, such as JSON.
You'll need a dedicated PHP file on the server that will understand the data you send in the AJAX post and instead of generating HTML generates the XML/other format your Javascript will consume.
Your best bet would probably be to create a browser app that communicates with your server via AJAX, and when that is working port it to PhoneGap.
It's very easy. Just do a GET request to the PHP page and parse the result. Create a function to make it easier:
function httpGet(theUrl){
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
Then, you can call it and obtain the resultant HTML code.
var url = 'http://yourpage/index.php?a=something&b=otherthing';
var page = httpGet(url);

The overheads of using setInterval to get latest data from database

im creating a messaging feature that gets the latest messages from a database every few seconds, basically this method does a continuous database search in order to display new messages.
example of the code:
function getLatestActivities(){
var ignoreMessagesArr = $("input.activityId").map(function(){ return this.value; }).get().join(",");
var profileId = $("input#userActivityId").val();
$.ajax({
traditional: true,
dataType: "json",
type: "GET", url: "include/process.php",
data:{
getLatestActivity: "true",
toUser: profileId,
ignoreMessages: ignoreMessagesArr
},
success: function(data){
$.each(data, function (i, elem) {
$('.commentMessage').after(elem.value);
});
}
});
}
What I want to know is whether there is a more efficient way of performing this task, i.e. detecting a change in the database instead(???).
It sounds like you want your web app to receive data when it changes in the database, but not necessarily to send data in real time. If two way communication is required then you are looking for Web Sockets which Socket.IO will help you with server side but requires that you run a Node server. There is a Google code project that enables Web Sockets for PHP called PHPWebSocket but, if I remember right, requires that you run it in a separate process (i.e. run it from the command line). So that kind of takes care of the server part, but now you have to worry about the front-end.
Currently only FireFox and Chrome fully support Web Sockets according to CanIUse. For those browsers lacking support you need a polyfill. Here is a list of HTML5 polyfills. So Web Sockets can be sort of a mess to implement, so make sure that's what you want to do.
On the other hand if your webapp only needs to receive data then EventSource (a.k.a. Server Sent Events) is the way to go. The support is better on the front-end and you don't really have to do much on the server. Again, for less than stellar browsers you will need a polyfill, but that pretty much just means IE. See the following sites/tutorials on how to use this feature.
http://my.opera.com/WebApplications/blog/show.dml/438711
http://dsheiko.com/weblog/html5-and-server-sent-events
http://www.html5rocks.com/en/tutorials/eventsource/basics/
If none of that works there are a few options. Constant polling using some kind of repeating structure like setTimeout, long polling (a.k.a. hanging get) where the server leaves the AJAX request open until there is new data, and there's also the infinite iframe trick, or maybe even a Flash plugin that connects to the server to get data.
You might want to look into Socket.IO it's geared toward realtime communications with the server. Then you can design the backend to push data to the client when it's available rather than constantly polling the database for new information from the frontend
HTML5 Web Sockets allows for two way communication between the client and your server...
In my opinion you should request only the last ID inserted in your database and add it as a parameter to to your ajax request.
process.php should handle that ID and if there are other rows to do the search.
like
$query = mysql_query("SELECT `ID` FROM `table` WHERE `ID`>'$lastId'");
$result = mysql_num_rows(); //use that to see if you have new rows.

Refresh content automatically if the database changes

how can I automatically add the value of a database row (PHP), to the page, without refreshing the page itself, when the mysql database table changes?
So, it is a bit like this: Automatically refresh browser in response to file system changes? , but instead of refreshing the browser with the file system changes, update the content, without refreshing anything, when the databse changes.
Thanks. I have tried to make this as clear as possible.
Please note this is outdated answer. Recent ways of doing that is: websockets, server-send events. Nice example of that is Firebase. You can find simple code example in: https://github.com/laithshadeed/wsk-feedback. In this example you will see that updating firebase will send event to the browser via websocket, then the UI will update.
This is called Comet/Reverse Ajax/HTTP server push http://en.wikipedia.org/wiki/Comet_(programming). They are many techniques for doing this as well as many existing frameworks to do it for you.
There are many answers in SO about Comet https://stackoverflow.com/search?q=comet
Simple implementation would be javascript setTimeout and setInterval to check server status, with trigger/stored procedure on mysql.
For depth dive into Comet. There are two cool books about this:
Comet and Reverse Ajax 2008 By Dave Crane
Chapter 4 (River of Content) - Building the Realtime User Experience 2010 By Ted Roden
Update: You may look to the newer techniques in HTML5 like Websockets and Server-sent Events, although IE does not support them well, at the moment Server-sent events is not supported in IE and Web Sockets only supported in IE10
It's not a truly simple task, but it's not that bad. You need a few things working in concert:
A javascript routine on your page that checks with the server at specifiedintervals
A page on your server that reports changes when polled
A callback function on your page that inserts new elements (or updates/deletes existing elements) when changed data is reported by the server.
How you determine which data has been changed is something you will have to think about. The easiest way is probably to have a "modified" field maintained for each record. This way when your javascript polls the server it can include a "last time I checked" timestamp and the server only has to return changes that are more recent.
It's not quite so hard as it may at first appear. Take advantage of prebuilt libraries like jQuery and you can do things like:
$.ajax({
url: 'http://example.com/checkforupdates.php?last=' + (new Date().getTime()),
context: document.body,
success: function(data){
// do something here to add/update/remove elements on your page
// using the information returned in the data argument.
}
});
Manipulate the DOM with JavaScript.

Categories