How to implement COMET with PHP
How to implement COMET with PHP
How to implement COMET with PHP
Comet is a programming technique that enables web servers to send data to the client without having any need for the client to request it. This technique will produce more responsive applications than classic AJAX. In classic AJAX applications, web browser (client) cannot be notified in real time that the server data model has changed. The user must create a request (for example by clicking on a link) or a periodic AJAX request must happen in order to get new data fro the server.
I will now explain how to implement Comet with PHP programming language. I will demonstrate it on two demos which uses two techniques: the first one is based on hidden "
Uso errato di timer in Javascript
Uso errato di timer in Javascript cause utilizzo della CPU per aumentare browser
da Viper 16. luglio 2009 05:08
Stavo studiando un problema su un sito. In determinate condizioni, la pagina web stava diventando insensibile e utilizzo della CPU sulla macchina è stato il montaggio a 100% e rendendo la macchina inutilizzabile. Non riuscivo a riprodurre il problema facilmente. Dopo aver chiesto alcune domande più all'utente, ho scoperto che stava accadendo quando l'utente è venuto alla pagina dopo aver cliccato sul link da una certa pagina. E c'era un altro problema essere visto alcuni utenti. Se lasciano la pagina aperta tutta la notte, dal tempo mattina l'uso della memoria nel browser era aumentato a più di 150 MB, l'utilizzo della CPU è stata vicina al 50% e la macchina era molto lento. Dopo aver ucciso l'istanza del browser, la macchina è diventato normale.
Dopo aver investigato realizzazione della pagina, ho visto che c'era molta asincrona (AJAX) tipo di implementazione. La pagina è stata sempre più parti della risposta data dal server a intervalli diversi di volte. Dopo aver esaminato i javascript nella pagina, ho visto ci sono stati molti di utilizzo di setTimeout e setInterval funzioni per fare cose come, zecche orologio, richiesta di dati dal server, ecc ho notato che in un flusso di lavoro c'era seguente pezzo di codice.
doTickTock funzione () {myTimer = setTimeout ("doTickTock ()", 1000);}
Questo codice è stata chiamata al metodo ogni secondo. Ci sono stati alcuni problemi con questo pezzo di codice. Discuterò quei po 'più tardi. Ho creato una piccola pagina con poche righe di javascript per simulare il codice. Ecco quel pezzo di codice.
Quando ho usato clockTick1 () metodo, l'utilizzo della CPU mia macchina è montato al 75% in circa 15 secondi e poi macchina è diventato così lento che ho dovuto ucciderlo. Ma quando ho usato clockTick2 () metodo, non ho visto alcun comportamento pigro. Per capire questo comportamento, si dovrebbe conoscere la differenza tra setInterval e setTimeout metodi. setInterval chiama la funzione passata come primo parametro dopo ogni intervallo di tempo che è passato come secondo parametro. Così è la creazione di un timer che spunta a intervalli fissi. Dove, come setTimeout chiama solo il metodo di una volta dopo l'intervallo di tempo. Così, quando ho usato clockTick1 , ogni secondo è stato chiamato il metodo. Ma c'era una cosa negativa che stava facendo. Ha generato un altro timer per chiamare lo stesso metodo ogni secondo. Così il numero dei timer attivi stavano aumentando in modo esponenziale. E hanno portato il browser di fermarsi. Ciò che questo pezzo di codice non ha fatto è stato quello di chiamare clearInterval di distruggere il timer precedente prima di crearne uno nuovo. Quindi, il codice dovrebbe avere sembrava come di seguito.
clockTick1 funzione () {document.getElementById ("clientClockSpan") innerHTML = new Date () toTimeString ();.. if (clockTimer = null) {clearInterval (clockTimer); clockTimer = null;} clockTimer = setInterval ("clockTick1 ( ) ", 1000);}
Noterete che ho seguito le migliori pratiche di impostazione del timer per nulla oggetto di smaltire fuori. Se non lo facciamo, il garbage collector riproponga questi timer inutilizzato, ma lo farà quando il suo corre la prossima volta. Ma per quel periodo di tempo, si può osservare una maggiore utilizzo della memoria da parte del browser insieme ad elevato utilizzo di maniglie dell'oggetto. L'utilizzo di ben maniglie è importante perché se non vengono recuperati rapidamente il vostro browser potrebbe iniziare a diventare pigro. Quindi, il trattamento di questi timer con molta attenzione.
Anche nella funzione in cui setTimeout viene utilizzato, lo rendono una pratica per oggetto timer chiaro prima di un nuovo alto.
da Viper 16. luglio 2009 05:08
Stavo studiando un problema su un sito. In determinate condizioni, la pagina web stava diventando insensibile e utilizzo della CPU sulla macchina è stato il montaggio a 100% e rendendo la macchina inutilizzabile. Non riuscivo a riprodurre il problema facilmente. Dopo aver chiesto alcune domande più all'utente, ho scoperto che stava accadendo quando l'utente è venuto alla pagina dopo aver cliccato sul link da una certa pagina. E c'era un altro problema essere visto alcuni utenti. Se lasciano la pagina aperta tutta la notte, dal tempo mattina l'uso della memoria nel browser era aumentato a più di 150 MB, l'utilizzo della CPU è stata vicina al 50% e la macchina era molto lento. Dopo aver ucciso l'istanza del browser, la macchina è diventato normale.
Dopo aver investigato realizzazione della pagina, ho visto che c'era molta asincrona (AJAX) tipo di implementazione. La pagina è stata sempre più parti della risposta data dal server a intervalli diversi di volte. Dopo aver esaminato i javascript nella pagina, ho visto ci sono stati molti di utilizzo di setTimeout e setInterval funzioni per fare cose come, zecche orologio, richiesta di dati dal server, ecc ho notato che in un flusso di lavoro c'era seguente pezzo di codice.
doTickTock funzione () {myTimer = setTimeout ("doTickTock ()", 1000);}
Questo codice è stata chiamata al metodo ogni secondo. Ci sono stati alcuni problemi con questo pezzo di codice. Discuterò quei po 'più tardi. Ho creato una piccola pagina con poche righe di javascript per simulare il codice. Ecco quel pezzo di codice.
Quando ho usato clockTick1 () metodo, l'utilizzo della CPU mia macchina è montato al 75% in circa 15 secondi e poi macchina è diventato così lento che ho dovuto ucciderlo. Ma quando ho usato clockTick2 () metodo, non ho visto alcun comportamento pigro. Per capire questo comportamento, si dovrebbe conoscere la differenza tra setInterval e setTimeout metodi. setInterval chiama la funzione passata come primo parametro dopo ogni intervallo di tempo che è passato come secondo parametro. Così è la creazione di un timer che spunta a intervalli fissi. Dove, come setTimeout chiama solo il metodo di una volta dopo l'intervallo di tempo. Così, quando ho usato clockTick1 , ogni secondo è stato chiamato il metodo. Ma c'era una cosa negativa che stava facendo. Ha generato un altro timer per chiamare lo stesso metodo ogni secondo. Così il numero dei timer attivi stavano aumentando in modo esponenziale. E hanno portato il browser di fermarsi. Ciò che questo pezzo di codice non ha fatto è stato quello di chiamare clearInterval di distruggere il timer precedente prima di crearne uno nuovo. Quindi, il codice dovrebbe avere sembrava come di seguito.
clockTick1 funzione () {document.getElementById ("clientClockSpan") innerHTML = new Date () toTimeString ();.. if (clockTimer = null) {clearInterval (clockTimer); clockTimer = null;} clockTimer = setInterval ("clockTick1 ( ) ", 1000);}
Noterete che ho seguito le migliori pratiche di impostazione del timer per nulla oggetto di smaltire fuori. Se non lo facciamo, il garbage collector riproponga questi timer inutilizzato, ma lo farà quando il suo corre la prossima volta. Ma per quel periodo di tempo, si può osservare una maggiore utilizzo della memoria da parte del browser insieme ad elevato utilizzo di maniglie dell'oggetto. L'utilizzo di ben maniglie è importante perché se non vengono recuperati rapidamente il vostro browser potrebbe iniziare a diventare pigro. Quindi, il trattamento di questi timer con molta attenzione.
Anche nella funzione in cui setTimeout viene utilizzato, lo rendono una pratica per oggetto timer chiaro prima di un nuovo alto.
Download the Ajax.zip archive. Install this as a Java Web Application with Existing Sources. Add the CommonsLang Library as used in java-forms.html. This application contains the important jQuery JavaScript package which is represented by the single file in the js folder of the Web Pages (the actual folder is web).
jquery.js
JavaScript, Ajax, Toolkits
AJAX is an acronym for Asynchronous Javascript And Xml. The most important point that AJAX is about using JavaScript to make asynchronous server-side calls without having to do a browser reload, allowing web applications to behave more like standard graphical user interface applications.
Modern web applications often feature specialized effects accomplished by JavaScript code written using client-side toolkits. Writing in JavaScript directly tends to be quite tedious and error-prone. The JavaScript language, per se, lacks capabilities for modularity, sharing and testing. Errors are often difficult to track down and browser differences become prominent. The point about client-side toolkits is that they:
* add and replace functionality to JavaScript
* hide browser differences and quirks
* optimize the usage of JavaScript code
As can be expected, there are quite a few such toolkits. One can choose among a long list such as Dojo, Prototype, MochiKit, Google Web Toolkit, AJILE, Echo, Ext, jQuery, ASP.NET AJAX, MooTools, qooxdoo, Rialto, Rico, Scriptaculous, SmartClient, Spry, Yahoo! UI Library, etc. The one we'll use is jQuery along with one of its plugins found at these websites:
jquery.js: http://www.jquery.com/
jquery.form.js: ttp://malsup.com/jquery/form/
Testing/Debugging
JavaScript used in any setting is a difficult language to debug. Fortunately there are some tools and techniques that make it possible. Here are some key points:
1. Use Firefox (sorry IE devotees)! Firefox's built-in JavaScript debugger is the Error Console (accessed through the Tools Error Console menu) which often suffices to debug JavaScript.
2. Install Firebug. Once installed, access it by: Tools Firebug Open Firebug. The HTML tab will display JavaScript-generated code which is not visible by viewing the source code. The console tab will view show information about the AJAX activations which is not visible directly in any other way.
3. JavaScript uses a form of lazy object construction in that its objects are not declared anywhere, just created on the fly. This means that you can add new members at will to almost any existing object. The big downside of this approach is that most misspellings of a subobject will not be regarded as errors. For example, if you mean to write:
document.getElementById('myelt').innerHTML = "hello"
but mistakingly write:
document.getElementById('elt').innerHtml = "hello"
there will be no error, but "nothing will happen," making it hard to track down.
This points to one of the advantages of client-side toolkits in that they provide alternative operations which avoid direct usage of JavaScript coding.
4. Alerts and console messages. A common way of debugging JavaScript is to issue alert("...") statements which invoke a popup message. More subtle is the usage of console.log("...") messages which are issued to the Firebug console.
5. It is often useful to test the server-side handlers "by hand", independently of their being called by a JavaScript activation. In this case, you'll want to manipulate the browser's location line by hand, passing the parameters via the query string. For example, assuming that xx and yy are the relevant incoming query parameters, try:
http://localhost:8080/.../servlet/Handler?xx=1&yy=2
JavaScript
The JavaScript language shares much of the same syntax as the Java language minus the strong typing. Strings can be delimited by double or single quotes and there is only one numeric type (represented by a double).
Other than language details, the most significant difference with Java is that JavaScript is built in to the standard browsers in order program all the browser features according to the so-called Document Object Model (DOM). The DOM supports at its top level the window object, representing the entire browser. The subobjects of window are these:
* document (referring to the HTML document contents),
* navigator (information about the browser type, version, etc),
* location (information about the URL being accessed),
* history (access to previous pages),
* status (the status bar at bottom of browser),
* frames[] (access to frames in a frame-based layout).
For example, the expression window.document refers to the document part of window object. In all cases, JavaScript permits the omission of the top-level "window." syntax and simply write "document" (and others).
Introducing JavaScript code into HTML
JavaScript code is typically made available through the script tags:
These lines make a browser which does not recognize JavaScript ignore the code between:
Alternatively, an external code file, say extern-code.js can be loaded with this script tag usage:
Activation through JavaScript Events
Our JavaScript code of interest consists mostly of functions called by JavaScript events. For example, we can create a "generic" button which calls a JavaScript function as follows:
or
where the JavaScript code section contains:
function my_button_handler()
{
// what to do when the button is pressed
}
Reading/Writing HTML elements from JavaScript
Within JavaScript code we need to be able to read and write data from the HTML elements. JavaScript provides a number of ways to obtain a DOM object for an HTML element, but perhaps the simplest and direct way is by assigning an id attribute to the element and obtaining an object for it with the function document.getElementById. For example, if we define:
then, within JavaScript we can obtain an object representing this textfield with the statement:
var tf = document.getElementById( "tf" )
JSON format
JSON (JavaScript Object Notation) is a format for expressing structured object literals. This notation is used heavily in most of the client-side toolkits as parameters of the function calls. For example:
{ x: 222, y: "hello" } -- an object with members x and y
[ 12, "hello", 15 ] -- an array
{ z: [ 22, 33 ] } -- an object with array value
[ {x: 12, y: "aa"}, {x: 17, y: "bb"} ] -- an array of objects
Not only are these JSON literals used to call client-side functions, they can be used to transmit structured data back to JavaScript after a server-side call. What this means is that the server creates a JSON literal, the JavaScript function retrieves it and then converts it into a JavaScript object by the eval function:
var data = eval( "(" + JSON-literal + ")" );
After that, we can access data as a JavaScript object like this (respectively):
data.x, data.y -- an object with members x and y
data[0], data[1], ... -- an array
data.z[0], data.z[1] -- an object with array value
data[0].x, data[1].y -- an array of objects
Both Java and JavaScript support a "comma at the end" of the last array element, e.g.
[ 12, "hello", 15 ] is the same as [ 12, "hello", 15, ]
However, Internet Explorer, at least is some versions, appears to put an extra null at the end of array in the latter case. So it's better to avoid the "comma at the end."
XML format is an alternative format for transmitting structured data from a server-side call back to the client. However, the extraction of the structured information from the XML literal is significantly slower than a JSON literal, and JSON is generally preferred over XML for reasons both of efficiency and simplicity. In retrospect "AJAX" probably should have been "AJAJ"; however the former definitely sounds cooler.
jQuery Preliminaries
The jQuery package has the advantage of being usable without having to modify the HTML, thus most jQuery JavaScript code can be introduced through external script files. The only requirement of the HTML code is that key elements specify certain attributes, of which, the most basic being the id attribute (which would be the case for any JavaScript usage).
In particular, we can avoid the insertion of JavaScript code in the handler attributes (onclick, onsubmit, onchange, etc). The definitions of the handler attributes can be effected all through jQuery code outside the document's body.
According to the jQuery usage logic, all the event-handling definitions are enclosed within the structure:
$(document).ready(
function() {
...
}
)
meaning, when the document is ready, call the function to effect certain actions. jQuery and other toolkits make heavy usage of these "anonymous" functions which do something when an event takes place.
The "$" is actually the special jQuery object from which everything else is based. This seems odd, but $ is actually a legal identifier character in JavaScript, and thus $ by itself is a legal identifier, along with others like $x, x$, $x$y, etc.
The next jQuery notational convenience is that the above can expressed and rewritten as this:
$( function() {
...
})
It may look a bit too compact, but the crunched syntax "})" actually works well with NetBeans formatter.
Identifying HTML elements
An element's id attribute is commonly used in JavaScript in conjuction with the expression:
var elt = document.getElementById("elt_id")
The jQuery equivalent is the expression:
$("#elt_id")
which retrieves a certain jQuery object from which we can express operations. If you know CSS notation, the "#" is actually a perfect choice for the designator prefix. Although we do not need more than this, jQuery also makes it easy to effect operations on a set of elements. Specifically the expression
$(".some_class")
is an object from which we can effect changes to all elements which define:
class="some_class"
Handling an onclick event
A very common situation is to activate some JavaScript code, like an AJAX call when the user clicks a button or hyperlink. The way jQuery expresses this is by the code:
$(function() {
$("#clicker_id").click(function() {
...
})
})
The JavaScript onclick event is turned into the jQuery click function. As with "onload", the argument passed to the click function is a function which will be executed when the onclick event happens.
In the case of hyperlink clicking, jQuery usually wants to "take control" of the actions and so must prevent the hyperlink's default behavior. The is done very cleanly by realizing the event argument passed to the click function as follows:
$(function() {
$("#clicker_id").click(function(evt) {
evt.preventDefault()
...
})
})
jquery.js
JavaScript, Ajax, Toolkits
AJAX is an acronym for Asynchronous Javascript And Xml. The most important point that AJAX is about using JavaScript to make asynchronous server-side calls without having to do a browser reload, allowing web applications to behave more like standard graphical user interface applications.
Modern web applications often feature specialized effects accomplished by JavaScript code written using client-side toolkits. Writing in JavaScript directly tends to be quite tedious and error-prone. The JavaScript language, per se, lacks capabilities for modularity, sharing and testing. Errors are often difficult to track down and browser differences become prominent. The point about client-side toolkits is that they:
* add and replace functionality to JavaScript
* hide browser differences and quirks
* optimize the usage of JavaScript code
As can be expected, there are quite a few such toolkits. One can choose among a long list such as Dojo, Prototype, MochiKit, Google Web Toolkit, AJILE, Echo, Ext, jQuery, ASP.NET AJAX, MooTools, qooxdoo, Rialto, Rico, Scriptaculous, SmartClient, Spry, Yahoo! UI Library, etc. The one we'll use is jQuery along with one of its plugins found at these websites:
jquery.js: http://www.jquery.com/
jquery.form.js: ttp://malsup.com/jquery/form/
Testing/Debugging
JavaScript used in any setting is a difficult language to debug. Fortunately there are some tools and techniques that make it possible. Here are some key points:
1. Use Firefox (sorry IE devotees)! Firefox's built-in JavaScript debugger is the Error Console (accessed through the Tools Error Console menu) which often suffices to debug JavaScript.
2. Install Firebug. Once installed, access it by: Tools Firebug Open Firebug. The HTML tab will display JavaScript-generated code which is not visible by viewing the source code. The console tab will view show information about the AJAX activations which is not visible directly in any other way.
3. JavaScript uses a form of lazy object construction in that its objects are not declared anywhere, just created on the fly. This means that you can add new members at will to almost any existing object. The big downside of this approach is that most misspellings of a subobject will not be regarded as errors. For example, if you mean to write:
document.getElementById('myelt').innerHTML = "hello"
but mistakingly write:
document.getElementById('elt').innerHtml = "hello"
there will be no error, but "nothing will happen," making it hard to track down.
This points to one of the advantages of client-side toolkits in that they provide alternative operations which avoid direct usage of JavaScript coding.
4. Alerts and console messages. A common way of debugging JavaScript is to issue alert("...") statements which invoke a popup message. More subtle is the usage of console.log("...") messages which are issued to the Firebug console.
5. It is often useful to test the server-side handlers "by hand", independently of their being called by a JavaScript activation. In this case, you'll want to manipulate the browser's location line by hand, passing the parameters via the query string. For example, assuming that xx and yy are the relevant incoming query parameters, try:
http://localhost:8080/.../servlet/Handler?xx=1&yy=2
JavaScript
The JavaScript language shares much of the same syntax as the Java language minus the strong typing. Strings can be delimited by double or single quotes and there is only one numeric type (represented by a double).
Other than language details, the most significant difference with Java is that JavaScript is built in to the standard browsers in order program all the browser features according to the so-called Document Object Model (DOM). The DOM supports at its top level the window object, representing the entire browser. The subobjects of window are these:
* document (referring to the HTML document contents),
* navigator (information about the browser type, version, etc),
* location (information about the URL being accessed),
* history (access to previous pages),
* status (the status bar at bottom of browser),
* frames[] (access to frames in a frame-based layout).
For example, the expression window.document refers to the document part of window object. In all cases, JavaScript permits the omission of the top-level "window." syntax and simply write "document" (and others).
Introducing JavaScript code into HTML
JavaScript code is typically made available through the script tags:
These lines make a browser which does not recognize JavaScript ignore the code between:
Alternatively, an external code file, say extern-code.js can be loaded with this script tag usage:
Activation through JavaScript Events
Our JavaScript code of interest consists mostly of functions called by JavaScript events. For example, we can create a "generic" button which calls a JavaScript function as follows:
or
where the JavaScript code section contains:
function my_button_handler()
{
// what to do when the button is pressed
}
Reading/Writing HTML elements from JavaScript
Within JavaScript code we need to be able to read and write data from the HTML elements. JavaScript provides a number of ways to obtain a DOM object for an HTML element, but perhaps the simplest and direct way is by assigning an id attribute to the element and obtaining an object for it with the function document.getElementById. For example, if we define:
then, within JavaScript we can obtain an object representing this textfield with the statement:
var tf = document.getElementById( "tf" )
JSON format
JSON (JavaScript Object Notation) is a format for expressing structured object literals. This notation is used heavily in most of the client-side toolkits as parameters of the function calls. For example:
{ x: 222, y: "hello" } -- an object with members x and y
[ 12, "hello", 15 ] -- an array
{ z: [ 22, 33 ] } -- an object with array value
[ {x: 12, y: "aa"}, {x: 17, y: "bb"} ] -- an array of objects
Not only are these JSON literals used to call client-side functions, they can be used to transmit structured data back to JavaScript after a server-side call. What this means is that the server creates a JSON literal, the JavaScript function retrieves it and then converts it into a JavaScript object by the eval function:
var data = eval( "(" + JSON-literal + ")" );
After that, we can access data as a JavaScript object like this (respectively):
data.x, data.y -- an object with members x and y
data[0], data[1], ... -- an array
data.z[0], data.z[1] -- an object with array value
data[0].x, data[1].y -- an array of objects
Both Java and JavaScript support a "comma at the end" of the last array element, e.g.
[ 12, "hello", 15 ] is the same as [ 12, "hello", 15, ]
However, Internet Explorer, at least is some versions, appears to put an extra null at the end of array in the latter case. So it's better to avoid the "comma at the end."
XML format is an alternative format for transmitting structured data from a server-side call back to the client. However, the extraction of the structured information from the XML literal is significantly slower than a JSON literal, and JSON is generally preferred over XML for reasons both of efficiency and simplicity. In retrospect "AJAX" probably should have been "AJAJ"; however the former definitely sounds cooler.
jQuery Preliminaries
The jQuery package has the advantage of being usable without having to modify the HTML, thus most jQuery JavaScript code can be introduced through external script files. The only requirement of the HTML code is that key elements specify certain attributes, of which, the most basic being the id attribute (which would be the case for any JavaScript usage).
In particular, we can avoid the insertion of JavaScript code in the handler attributes (onclick, onsubmit, onchange, etc). The definitions of the handler attributes can be effected all through jQuery code outside the document's body.
According to the jQuery usage logic, all the event-handling definitions are enclosed within the structure:
$(document).ready(
function() {
...
}
)
meaning, when the document is ready, call the function to effect certain actions. jQuery and other toolkits make heavy usage of these "anonymous" functions which do something when an event takes place.
The "$" is actually the special jQuery object from which everything else is based. This seems odd, but $ is actually a legal identifier character in JavaScript, and thus $ by itself is a legal identifier, along with others like $x, x$, $x$y, etc.
The next jQuery notational convenience is that the above can expressed and rewritten as this:
$( function() {
...
})
It may look a bit too compact, but the crunched syntax "})" actually works well with NetBeans formatter.
Identifying HTML elements
An element's id attribute is commonly used in JavaScript in conjuction with the expression:
var elt = document.getElementById("elt_id")
The jQuery equivalent is the expression:
$("#elt_id")
which retrieves a certain jQuery object from which we can express operations. If you know CSS notation, the "#" is actually a perfect choice for the designator prefix. Although we do not need more than this, jQuery also makes it easy to effect operations on a set of elements. Specifically the expression
$(".some_class")
is an object from which we can effect changes to all elements which define:
class="some_class"
Handling an onclick event
A very common situation is to activate some JavaScript code, like an AJAX call when the user clicks a button or hyperlink. The way jQuery expresses this is by the code:
$(function() {
$("#clicker_id").click(function() {
...
})
})
The JavaScript onclick event is turned into the jQuery click function. As with "onload", the argument passed to the click function is a function which will be executed when the onclick event happens.
In the case of hyperlink clicking, jQuery usually wants to "take control" of the actions and so must prevent the hyperlink's default behavior. The is done very cleanly by realizing the event argument passed to the click function as follows:
$(function() {
$("#clicker_id").click(function(evt) {
evt.preventDefault()
...
})
})
SuperNote Demonstration
SuperNote Demonstration
This is an accessible, CSS/JS based "popup tooltip" script that dynamically converts regular footnotes in a document into tooltips that appear next to their triggering elements.