I have been working with jquery/ajax requests. I have successfully got a ajax request which will retrieve data from a database, the problem is, that i'm constantly serving window.setInterval() to refresh this function every x amount of seconds.
How would I change this to keep the ajax request alive, so it updates the html content without having to serve multiple requests to my ajax script.
My code follows:
window.setInterval(function()
{
$(function ()
{
$.ajax({
url: 'Ajax.php'+SearchTerm, dataType: 'json', success: function(rows)
{
$('#NumberOfVotes').empty();
for (var i in rows)
{
var row = rows[i];
var QuestionID = row[0];
var Votes = row[1];
$('#NumberOfVotes')
.append(Votes);
}
}
});
});
}, 500);
A lot of this depends on how your server would be able to update it's content dynamically. That said, what you are looking for is websockets. Websockets are designed to replace the long-polling paradigm.
EDIT: Since you use mainly php for your server technology, look at Ratchet. I've heard good things about it http://socketo.me/
Here is an excellent article on using websockets with HTML
http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
.NET has a great socket library in SignalR
http://signalr.net/
There is a myriad of php documentation on sockets out there
http://php.net/manual/en/book.sockets.php
look into using web sockets - you could send the client a message anytime they need to go an look for new data - that way your not making any unnecessary requests. Try checking out pubnub -service is cheap and could handle everything you need.
You could set xhr.multipart = true and modify server code. see Multipart Responses Example Code. Alternative way is to use websockets as mentioned
You need something server side that keeps the request alive until it has something to return. This is usually called "Comet", "Long-polling" or "Push".
The principle is :
You send a request client-side via AJAX
Your server receives the request, and doesn't return a response yet. It sleeps/waits until it has something to return
A new entry in your database ! Your server now has something to return : it returns some JSON data for the waiting request
Your receive the response server side, display what you have to display, and go back to step 1 sending another request.
Now, the implementation server side will depend on the language/framework you are using.
Edit :
Some examples using PHP :
Comet and PHP
Simple Comet Implementation Using PHP and jQuery
Related
I've been working on a project for a couple of Minecraft servers that use Bukkit. I'm trying to create a web page that contains a dynamic map of the servers' worlds, as well as a real-time event update system, where a <div> is updated as events happen on the server. To give a brief outline of how my system works, the Minecraft servers communicate events with a Node.js webserver over the same network via UDP packets, and the Node.js webserver uses these packets to build JavaScript objects containing the event info. The objects are then stored, and passed to Jade whenever the page is requested. Jade takes care of the templating.
What I want to do is update this page dynamically, so that the user doesn't have to refresh the entire page to update the list of events. What I'm trying to implement is something like the Facebook ticker, which updates every time a Facebook friend does something like posting a status, commenting on a post, or 'liking' a post.
In reading this question on SO, I've concluded that I need to use long polling in a PHP script, but I'm not sure of how to integrate PHP with a webserver written almost entirely in Node.js. How could I go about doing this?
EDIT:
I've run into a problem in the clientside code.
This is the script block:
script(src='/scripts/jadeTemplate.js')
script(src='/socket.io/socket.io.js')
script(type='text/javascript')
var socket = io.connect();
socket.on('obj', function(obj) {
var newsItem = document.createElement("item");
jade.render(newsItem, 'objTemplate', { object: obj });
$('#newsfeed').prepend(newsItem);
console.log(obj);
alert(obj);
});
And this is objTemplate.jade:
p #{object}
// That's it.
When the alert() and console.log() are placed at the top of the script, it alerts and logs, but at the bottom, they don't execute (hence, I think it's a problem with either the creation of newsItem, the jade.render(), or the prepend.
If I need to provide any more snippets or files let me know. I'm still tinkering, so I might solve it on my own, but unless I update, I still need help. :)
I'd skip PHP and take a look at socket.io. It uses websockets when possible, but it will fall back to long-polling when necessary, and the client side library is very easy to use.
Whenever your node.js server has a new object ready to go, it will push it to all connected browsers. Use ClientJade to render the object using your template (you may have to break out the relevant part of the main template into its own file), then prepend the generated dom element to your feed.
First, if it isn't this way already, you'll need to break out the relevant part of your jade template into its own file. Call it objTemplate.jade. Then use ClientJade to create a compiled template that can be run in the browser: clientjade objTemplate.jade > jadeTemplate.js. Put jadeTemplate.js in your public js directory.
In your node.js app, you'll have something like this (pseudo-codey):
var io = require('socket.io').listen(httpServer);
listenForUDPPackets(function(obj) {
saveObjSomewhere(obj);
io.sockets.emit('obj', obj);
});
Then on the client, something like this:
<script src="/js/jadeTemplate.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect();
socket.on('obj', function(obj) {
var newsItem = document.createElement();
jade.render(newsItem, 'objTemplate', obj);
$('#newsFeed').prepend(newsItem);
});
</script>
I have seen this question before and found this example in http://www.zeitoun.net/articles/comet_and_php/start which is really great and clear. However, it uses javascript.
My question is, are there any plugins, functions or something that would help me to implement PHP comet with jQuery easily? Because given example requires lots of javascript code.
And by the way, I want to use it on Apache. Is it possible?
If you are only doing long polling then jQuery will work fine. However, jQuery does not expose a readyState === 3 event, so there is no built in way to get data as it is streaming if that is the direction you want to go.
[Edit]
Here is the bug, #1172
And it looks like they added the functionality in 1.5, using a Prefilter
So yes, you can do all the comet stuff with jQuery now :)
Comet is long-polling where client sends a request and waits for the response from the server. The server queues the request and once it gets the updated results. It sends the response to the client.
So basically all you need to do is to send an .ajax request to the server and use the onSuccess callback to deal with the returning the data. The onSuccess callback will not be called unless the server gets the updated data.
Nothing really fancy at the client-side. The actual game is on the server side to queue the requests and then respond accordingly.
Take a look at this answer detailed code sample > How do I implement basic "Long Polling"?
i have made the jQuery version of comet before, this is what i had done:
var comet = {
connection : false,
iframediv : false,
initialize: function(){
// For other browser (Firefox...)
comet.connection = $('<iframe>');
comet.connection.attr('id', 'comet_iframe');
comet.connection.css( {
left : "-100px",
top : "-100px",
height : "1px",
width : "1px",
visibility : "hidden",
display : 'none'
})
//comet.iframediv = $('<iframe>');
comet.connection.attr('src', 'backend.php');
//comet.connection.append(comet.iframediv);
$('body').append(comet.connection);
},
// this function will be called from backend.php
printServerTime: function (time) {
console.log('time',time);
$('#content').html(time);
},
onUnload: function() {
if (comet.connection) {
comet.connection = false; // release the iframe to prevent problems with IE when reloading the page
}
}
}
$(window).load(comet.initialize)
.unload(comet.onUnload);
i had taken the code right off that page and made it jquery ^_^
there is a plugin i have seen, try this? http://code.google.com/p/jquerycomet/
Quite simply, I need to alert the end user when they have a new private message.
From a combination of research and other opinion, I realise I need to use AJAX for this.
The mysql query would be
SELECT id FROM tbl_messages WHERE to_viewed = 1
So when someone sends a message, I want an alert to popup on the screen to inform the user without a page reload.
I have absolutely no idea what I am doing, but know what I want.
Really need help with this, AJAX is definitely something I want to improve as it opens up greater possibilities!
Thanks
Using jQuery for brevity, if you don't have any JavaScript experience I recommend learning.
var check;
function checkForMessages() {
$.get("/newMessages.php", function(data) {
if(data == 1) {
//There are new messages
clearInterval(check);
alert("You have new mail!");
}
});
}
check = setInterval(checkForMessages, 60000);
The above JavaScript will ping the server every 60 seconds. The script "newMessages.php" should return '1' if there are new messages. You have the query already written so I think you can figure it out.
You have two options on the client side:
Polling via Ajax: Every X seconds, send a request to the server to check for messages.
Server-push via Comet: Open a connection to the server and wait for the server to respond with the message.
There are numerous client side libraries available. For Ajax, you can use JQuery. For Comet, look into Dojo, but your server/platform must support Comet. I know it's possible with Java using Jetty, but I'm not sure about other platforms.
I am working on using node.js's connection abilities to continiously long poll a php script and I was wondering if anyone knows the thoery behind (maybe even a code sample) linking to php in node.js? I was thinking I need a new client and I add a request for the php page and then I add a response event listener which then fires off a event function which grabs the returned data and throws it back into the server function.
I am, however, a noob and need some initial guidance since their api documentation is not the easiest to read; the English is too wordy and it's white font on a dark background...not nice.
Thanks,
var sys = require('sys'),
http = require('http'),
url = require("url"),
path = require("path"),
events = require("events");
var twitter_client = http.createClient(80, "192.168.23.128");
var tweet_emitter = new events.EventEmitter();
function get_tweets() {
var request = twitter_client.request("GET", "/?url=ajax/session", {"host": "192.168.23.128"});
request.addListener("response", function(response) {
var body = "";
response.addListener("data", function(data) {
body += data;
});
response.addListener("end", function() {
sys.puts(body);
var tweets = JSON.parse(body);
if(tweets.length > 0) {
tweet_emitter.emit("tweets", tweets);
}
});
});
request.end();
}
setInterval(get_tweets, 5000);
http.createServer(function (req, res) {
sys.puts("accessed Server");
res.writeHead(200, {'Content-Type': 'text/plain', "Access-Control-Allow-Origin": "*"});
var t = JSON.stringify({id:"test"});
var listener = tweet_emitter.addListener("tweets", function(tweets) {
res.write(tweets);
});
res.write(t);
res.end();
}).listen(8124);
sys.puts('Server running at http://127.0.0.1:8124/');
This seemed to work. Taken from a mixture of other tutorials
Was just doing some research on this topic, and wanted to drop in an answer for anyone that might be looking to do the same thing.
The comments on the OP made good points as to whether or not this sort of thing would be an efficient use of resources, or a waste of nodes event-based processing abilities. I would say that passing requests on to an Apache/PHP server would be inefficient, because you're essentially doing the same thing as having recurring AJAX request sent to the Apache server. The only difference is you now have a man-in-the-middle sending the requests.
Apache is still serving requests just the same as it always is, it is just serving them to the Node.js server rather than the client. This does not build in any efficiencies, other than taking a bit of load off the client and placing it on the server.
The correct way to do this, as #Paul mentioned, is to use some sort of PHP processor that will allow you to bypass Apache. There's some fancy methods for getting this done using FastCGI and PHP-FPM - they're pretty high level so you might have some trouble integrating them into Node.js on your own.
On the bright side, there's a node module already being built to do just this: node-php. It's pretty young ("omega-alpha-super-beta-proof-of-concept"), but may be able to handle what you're trying to do. If it can't, at least it's a good starting point, and you can fork off to make your own additions
I have a PHP page that needs to make a call to a external web service. This Web service call takes a bunch of sensitive data from a html form on the PHP page, e.g. SSN, and returns info related to that person.
The problem is that the web service call should be made as soon as the customer fills in the SSN field and the field loses focus, so the page cannot be reloaded in any way. I was thinking about using jQuery to make a call to the web service, but AJAX unfortunately requires that you are on the same domain as the requested resource. So I'm thinking about creating an local PHP page that makes the call to the web service and then use JQuery to call this new page.
Questions:
How do I use JQuery to call the local PHP script that makes the call to the web service?
Because the JQuery code will take sensitive data from a html form and send it to the PHP script, how can I encrypt the data?
To call your PHP file:
var url = "http://localhost/data.php";
var params = {
"SSN" : theSSN
};
$.get(url, params, function (){
// Do whatever you need here, once the data arrives.
});
To call the external webservice from PHP, I'd suggest using cURL.
To encrypt, I'd suggest using the HTTPS protocol instead of encrypting manually from JavaScript.
1) $.get("myscript.php", function(response) { alert(response) });
2) I wouldn't encrypt using jQuery, it would be slow and easy to decrypt. Enabling SSL on the server would be a better solution.
1: Ajax request example:
$.ajax(
{
type: "GET",
url: "http://yourdomain.com/yourpage.php",
success: function (msg) { //does something }
});
More details here
2: php XOR is a pretty good encryption algorithm, I use it myself for a project with sensitive data. you can find the function here.
Enjoy! :)
This probably won't help you in particular, but some webservices support something called JSONP, which adds a callback name to a normal JSON request.
However, chances are you will need to make some sort of local proxy, as not many JSONP services exist yet.
The way to go is enabling SSL on your domain, and doing the xmlHTTPRequest to the https of the remote service