begin process at 2010 03 22 06:43:31
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > PLUGIN JQUERY ARTE: AJOUTER DU TEMPS REEL SUR VOS PAGES WEB

PLUGIN JQUERY ARTE: AJOUTER DU TEMPS REEL SUR VOS PAGES WEB


 Information sur la source

Note :
Aucune note
Catégorie :Divers Classé sous :jquery, plugin, ajax, temps réel, page dynamique Niveau :Initié Date de création :27/01/2010 Date de mise à jour :29/01/2010 03:19:10 Vu / téléchargé :1 587 / 116

Auteur : arthurobriot

Ecrire un message privé
Site perso
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

Il s'agit d'un plugin JQuery.
Celui ci étend les fonctionnalités de l'Ajax en automatisant un certain nombre d'actions.

Il gère une boucle en arrière plan, configurable, afin d'exécuter des requêtes Ajax régulièrement.
Cela permet essentiellement d'ajouter des fonctionnalités 'temps réel' à votre page web.
Ex: mettre à jour une DIV toutes les secondes
<div id="elt_html"></div>

Et bien, il suffit maintenant d'ajouter deux lignes en javascript:
$.arte({'ajax_url':'remote_xml_file_ur l', 'ajax_type':'xml'});
$("elt_html").arte("xml_node" );
La première ligne servant à initialiser le moteur du plugin
La deuxième spécifie que l'on souhaite mettre à jour l'élément HTML 'elt_html'.

Il dispose de nombreuses autres fonctionnalités plus avancées telles que le parseur automatique de la réponse XML de la requète Ajax, l'arrêt/relance de la boucle à n'importe quel moment (grâce aux routines '.start' et '.stop').

Source

  • /*
  • * plugin jquery: Ajax Real Time Extension
  • *
  • * @author arthur.obriot
  • *
  • * @version 1.5
  • * project site: http://plugins.jquery.com/project/Arte
  • * developing website: http://code.google.com/p/arte/
  • *
  • */
  • (function() {
  • var _config = null;
  • var _is_started = false;
  • var _list_xml_actions = new Array();
  • var _list_html_node = new Array();
  • // manage parameters
  • // this function test if parameters are not already initialized
  • function _manage_parameter(setting) {
  • var config = {
  • 'time': 1000, // int Timer tick beetwen each round
  • 'ajax_mode': 'POST', // GET|POST like the jquery ajax data_mode
  • 'ajax_type': 'text', // text|xml like the jquery ajax data_type
  • 'ajax_url': '', // url of the ajax request
  • 'on_data_set': null, // routine which has to be called before the ajax request (usefull to set ajax parameter). It has to return a string like "arg1=toto&arg2=titi"
  • 'on_success': null // routine(text, xml) which will be called when the loop end a round
  • };
  • // is it the first time we have called arte ?
  • if (_config == null)
  • {
  • // if the user has custom options, update ours
  • if (setting) $.extend(config, setting);
  • // set the options of configuration as definitly set
  • _config = config;
  • }
  • }
  • // start the action loop
  • function _start()
  • {
  • if (_is_started == false)
  • {
  • _is_started = true;
  • _launch_loop();
  • }
  • return this;
  • }
  • // stop the action loop
  • function _stop()
  • {
  • if (_is_started == true) _is_started = false;
  • return this;
  • }
  • // start or stop the action loop, with alternance
  • function _toogle()
  • {
  • if (_is_started == true)
  • _is_started = false;
  • else
  • {
  • _is_started = true;
  • _launch_loop();
  • }
  • }
  • // used to manage parameters after the initialisation of arte
  • function _set(key, value)
  • {
  • if (_config[key])
  • _config[key] = value;
  • return this;
  • }
  • // used to get parameter values
  • function _get(key)
  • {
  • if (_config[key])
  • return _config[key];
  • if (key == "nb_node")
  • return _list_xml_actions.length;
  • if (key == "nb_elt")
  • return _list_html_node.length;
  • }
  • // main routine, used to execute one round more
  • function _launch_loop()
  • {
  • // verify we are allowed to launch a new round
  • if (_is_started == false) return;
  • // create the next package to send
  • var ajax_data = (_config['on_data_set']) ? _config['on_data_set']() : "";
  • // set the ajax request
  • $.ajax({
  • type: _config['ajax_mode'],
  • url: _config['ajax_url'],
  • data: ajax_data,
  • dataType: _config['ajax_type'],
  • success: function(data, textStatus){
  • // execute the custom list of action with some xml nodes
  • if (_list_xml_actions.length > 0)
  • _execute_custom_xml_actions(data);
  • // auto refresh the list of html element
  • if (_list_html_node.length > 0)
  • _execute_custom_html_nodes(data);
  • // call the final success function
  • if (_config['on_success'])
  • _config['on_success'](data);
  • }
  • });
  • // launch automatically a new cycle
  • setTimeout("$.arte().launch()", _config['time']);
  • }
  • // this function, which takes the xml response from the ajax query, parse the response
  • // to execute user action
  • function _execute_custom_xml_actions(data_xml)
  • {
  • for (i = 0; i < _list_xml_actions.length; i++)
  • $(data_xml).find(_list_xml_actions[i].node_name).each(function (){
  • if (_list_xml_actions[i].fct)
  • _list_xml_actions[i].fct(this);
  • });
  • }
  • // this function, which takes the xml response from the ajax query, parse the response
  • // to set automatically some custom html fields
  • function _execute_custom_html_nodes(data_xml)
  • {
  • for (i = 0; i < _list_html_node.length; i++)
  • {
  • $(data_xml).find(_list_html_node[i].node_name).each(function (){
  • $(_list_html_node[i].elt).text($(this).text());
  • });
  • }
  • }
  • // this function is used to add a custom action to be executed after a success ajax request
  • // 'node_name' is name of the xml node we want to get the value
  • // 'fct' the function which will be called if we find this node
  • function _add_custom_xml_actions(node_name, fct)
  • {
  • // test if the element doesn't already exist.
  • for (i = 0; i < _list_xml_actions.length; i++)
  • if (_list_xml_actions[i].node_name == node_name)
  • return this;
  • // add the element in the tab
  • _list_xml_actions.push(new _XmlItem(node_name, fct));
  • return this;
  • }
  • // same as above but remove the node_name from the action list
  • function _del_custom_xml_actions(node_name)
  • {
  • // rebuild a new clean action list
  • var newtab = new Array();
  • for (i = 0; i < _list_xml_actions.length; i++)
  • if (_list_xml_actions[i].node_name != node_name)
  • newtab.push(_list_xml_actions[i]);
  • // update the custom list
  • _list_xml_actions = newtab;
  • return this;
  • }
  • $.arte = (function (settings)
  • {
  • // manage parameters
  • _manage_parameter(settings);
  • // make public links with hidden functions
  • return {
  • start: _start,
  • is_started: _is_started,
  • stop: _stop,
  • toogle: _toogle,
  • set: _set,
  • get: _get,
  • launch: _launch_loop,
  • add_action: _add_custom_xml_actions,
  • del_action: _del_custom_xml_actions
  • };
  • });
  • // this function is used to make an auto update of a custom html field
  • // 'node_name' is name of the xml node we want to use to udpate the html field
  • // if no arguement is passed, stop the auto refresh for these nodes
  • $.fn.arte = (function (node_name)
  • {
  • // parse the list of html node
  • this.each(function() {
  • if (node_name)
  • {
  • // add the element, and test if the element doesn't already exist
  • var is_in = false;
  • for (i = 0; i < _list_html_node.length; i++)
  • if (_list_html_node[i].elt == this)
  • is_in = true;
  • if (is_in == false)
  • _list_html_node.push(new _HtmlAuto(this, node_name));
  • }
  • else
  • {
  • // remove the element
  • var newtab = new Array();
  • for (i = 0; i < _list_html_node.length; i++)
  • if (_list_html_node[i].elt != this)
  • newtab.push(_list_html_node[i]);
  • // update the custom list
  • _list_html_node = newtab;
  • }
  • });
  • return this;
  • });
  • // the following class is just a container to join a string with a function
  • // it will be used for the xml actions
  • function _XmlItem(node_name, fct)
  • {
  • this.node_name = node_name;
  • this.fct = fct;
  • }
  • // the following class is just a container to join an html element with a string
  • // it will be used for the auto update html field
  • function _HtmlAuto(elt, node_name)
  • {
  • this.elt = elt;
  • this.node_name = node_name;
  • }
  • })(jQuery);
/*
 * plugin jquery: Ajax Real Time Extension
 *
 * @author arthur.obriot
 * 
 * @version 1.5
 * project site: http://plugins.jquery.com/project/Arte
 * developing website: http://code.google.com/p/arte/
 *
 */

(function() {

	var _config 	= null;
	var _is_started = false;
	var _list_xml_actions = new Array();
	var _list_html_node = new Array();

	// manage parameters
	// this function test if parameters are not already initialized
	function _manage_parameter(setting) {
		var config = {
			'time':				1000,	// int			Timer tick beetwen each round
			'ajax_mode':		'POST',	// GET|POST		like the jquery ajax data_mode
			'ajax_type':		'text',	// text|xml 	like the jquery ajax data_type
			'ajax_url':			'',		// url of the ajax request
			'on_data_set':		null,	// routine which has to be called before the ajax request (usefull to set ajax parameter). It has to return a string like "arg1=toto&arg2=titi"
			'on_success':		null	// routine(text, xml) which will be called when the loop end a round
		};
		
		// is it the first time we have called arte ?
		if (_config == null)
		{
			// if the user has custom options, update ours
			if (setting)	$.extend(config, setting);
			
			// set the options of configuration as definitly set
			_config = config;
		}
	}
	
	// start the action loop
	function _start()
	{
		if (_is_started == false)
		{
			_is_started = true;
			_launch_loop();
		}
		return this;
	}
	
	// stop the action loop
	function _stop()
	{
		if (_is_started == true)	_is_started = false;
		return this;
	}
	
	// start or stop the action loop, with alternance
	function _toogle()
	{
		if (_is_started == true)
			_is_started = false;
		else
		{
			_is_started = true;
			_launch_loop();
		}
	}
	
	// used to manage parameters after the initialisation of arte
	function _set(key, value)
	{
		if (_config[key])
			_config[key] = value;
		return this;
	}
	
	// used to get parameter values
	function _get(key)
	{
		if (_config[key])
			return _config[key];
		if (key == "nb_node")
			return _list_xml_actions.length;
		if (key == "nb_elt")
			return _list_html_node.length;
	}
	
	// main routine, used to execute one round more
	function _launch_loop()
	{
		// verify we are allowed to launch a new round
		if (_is_started == false) return;
		
		// create the next package to send
		var ajax_data = (_config['on_data_set']) ? _config['on_data_set']() : "";
		
		// set the ajax request
		$.ajax({
			type: 		_config['ajax_mode'],
			url: 		_config['ajax_url'],
			data: 		ajax_data,
			dataType: 	_config['ajax_type'],
			success: 	function(data, textStatus){
				// execute the custom list of action with some xml nodes
				if (_list_xml_actions.length > 0)
					_execute_custom_xml_actions(data);
				// auto refresh the list of html element
				if (_list_html_node.length > 0)
					_execute_custom_html_nodes(data);
				// call the final success function
				if (_config['on_success'])	
					_config['on_success'](data);
			}
		});
		
		// launch automatically a new cycle
		setTimeout("$.arte().launch()", _config['time']);
	}
	
	// this function, which takes the xml response from the ajax query, parse the response
	// to execute user action
	function _execute_custom_xml_actions(data_xml)
	{
		for (i = 0; i < _list_xml_actions.length; i++)
			$(data_xml).find(_list_xml_actions[i].node_name).each(function (){
				if (_list_xml_actions[i].fct)
					_list_xml_actions[i].fct(this);
			});
	}
	
	// this function, which takes the xml response from the ajax query, parse the response
	// to set automatically some custom html fields
	function _execute_custom_html_nodes(data_xml)
	{
		for (i = 0; i < _list_html_node.length; i++)
		{
			$(data_xml).find(_list_html_node[i].node_name).each(function (){
				$(_list_html_node[i].elt).text($(this).text());
			});
		}
	}
	
	// this function is used to add a custom action to be executed after a success ajax request
	// 'node_name' is name of the xml node we want to get the value
	// 'fct' the function which will be called if we find this node
	function _add_custom_xml_actions(node_name, fct)
	{
		// test if the element doesn't already exist.
		for (i = 0; i < _list_xml_actions.length; i++)
			if (_list_xml_actions[i].node_name == node_name)
				return this;
		
		// add the element in the tab
		_list_xml_actions.push(new _XmlItem(node_name, fct));
		return this;
	}
	
	// same as above but remove the node_name from the action list
	function _del_custom_xml_actions(node_name)
	{
		// rebuild a new clean action list
		var newtab = new Array();
		for (i = 0; i < _list_xml_actions.length; i++)
			if (_list_xml_actions[i].node_name != node_name)
				newtab.push(_list_xml_actions[i]);
		// update the custom list
		_list_xml_actions = newtab;

		return this;
	}

	$.arte = (function (settings)
	{
		// manage parameters
		_manage_parameter(settings);
		
		// make public links with hidden functions
		return {
			start:			_start,
			is_started:		_is_started,
			stop:			_stop,
			toogle:			_toogle,
			set:			_set,
			get:			_get,
			launch:			_launch_loop,
			add_action:		_add_custom_xml_actions,
			del_action:		_del_custom_xml_actions
		};
	});
	
	// this function is used to make an auto update of a custom html field
	// 'node_name' is name of the xml node we want to use to udpate the html field
	// if no arguement is passed, stop the auto refresh for these nodes
	$.fn.arte = (function (node_name)
	{
		// parse the list of html node
		this.each(function() {
			if (node_name)
			{
				// add the element, and test if the element doesn't already exist
				var is_in = false;
				for (i = 0; i < _list_html_node.length; i++)
					if (_list_html_node[i].elt == this)
						is_in = true;
				if (is_in == false)
					_list_html_node.push(new _HtmlAuto(this, node_name));
			}
			else
			{
				// remove the element
				var newtab = new Array();
				for (i = 0; i < _list_html_node.length; i++)
					if (_list_html_node[i].elt != this)
						newtab.push(_list_html_node[i]);
				// update the custom list
				_list_html_node = newtab;
			}
		});
	
		return this;
	});
	
	// the following class is just a container to join a string with a function
	// it will be used for the xml actions
	function _XmlItem(node_name, fct)
	{
		this.node_name = node_name;
		this.fct = fct;
	}
	
	// the following class is just a container to join an html element with a string
	// it will be used for the auto update html field 
	function _HtmlAuto(elt, node_name)
	{
		this.elt = elt;
		this.node_name = node_name;
	}
})(jQuery);

 Conclusion

Ajouter du temps réel sur une page web est maintenant à la portée de tous.

Pour plus d'informations et de documentations, vous pouvez visiter le site de développement http://code.google.com/p/arte/
Je suis bien sur à l'écoute de vos remarques et suggestions pour le modifier/corriger.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

27 janvier 2010 17:01:31 :
Correction de quelques fautes d'orthographes
29 janvier 2010 03:19:11 :
edit the title

 Sources de la même categorie

Source avec Zip Source avec une capture SÉQUENCEUR par jdmcreator
Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36
Source avec Zip VIRTUAL IPHONE (V.2) par loicseg
Source avec Zip MOOTABLEAU par Miky76
Source avec Zip CALCULER VOTRE IMC par lesnouesremy

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DEMINEUR JAVACSCRIPT | PHP, CONFIGURABLE AVEC LE FRAMWORK JQ... par Nementon
Source avec Zip Source avec une capture MOTEUR DE RECHERCHE SANS PHP par jdmcreator
Source avec Zip Source avec une capture ALBUM PHOTO AVEC PARTIE ADMINISTRATION - PHP + AJAX + XML par tinokoxx
DYNAMIC CONTENT DANS UNE DIV par duterte
Source avec Zip Source avec une capture UPLOAD PLUSIEURS FICHIERS FANCYUPLOAD V2 par mnouzahir

Commentaires et avis

Commentaire de manapanu le 21/02/2010 08:58:58

Bonjour,

Serait-il possible d'avoir une page de démo svp ?
Merci

Commentaire de arthurobriot le 21/02/2010 15:22:18

Bonjour,

@Manapanu: oui pas de problème

J'ai mis quelques examples sur mon serveur perso (alors si ca ram un peu ou s'il est indisponible de temps en temps, c'est normal :s)
sur http://arthur.blogdns.com/arte/demo/
Ce sont les même exemples que sur le site ou j'ai déposé mon code source (http://code.google.com/p/arte/wiki/Index?tm=6#Examples), je t'invite a y aller pour obtenir un peu plus d'informations.

Cordialement

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

MultiFile.js JQuery plugin... aide à la compréhension de l'utilisation du script [ par polothentik ] Bonjour,Je suis très intéressé par le script MultiFile.js, plugin de JQuery qui permet l'upload de plusieurs fichiers simultanément. D'après ce que j' jQuery : Problème de double requete ajax [ par neoseals ] Bonjour à tous,Voilà je suis sur ce probleme depuis hier après-midi mais impossible de comprendre pourquoi ça ne marche pas ! Contexte: Zend Jquery Ajax | probleme d'affichege d'element sous IE [ par matdev62 ] Bonjour, j'ai developpé une application Zend sous wamp. Pour différents formulaires, j'utilise JQuery pour executer des requetes ajax afin d'affiche JQuery - ordre d'execution des actions ajax [ par matdev62 ] Bonjour à tous, j'utilise JQuery[ajax] pour gérer l'affichage de tableaux d'informations au parcours des champs d'un formulaire. Au focus, j'affiche S'initier à JQuery/Ajax/ASP [ par sylvain64520 ] Salut à tous, Je commence dans JQuery donc naturellement j'ai des questions. En ce qu'il concerne les BDD. Je vois partout des connexions aux BDD à plugin wslide jquery [ par am1ra2 ] bonjour, j'ai utilisé le pluguin wslide de jquery pour le défilement des pages html,tout va bien,ce que je veux est que le défilement soit juste au pa [jQuery] Faire sortir une variable de $.ajax [ par kilhom ] Bonjour à tous ! Voilà je suis débutant en javascript et j'ai quelque soucis avec une fonction (ajax) de jQuery. J'aimerais pouvoir faire sortir la va fonction Remove(); avec this [ par corentin9 ] Bonjour, Je ne m'en sors vraiment pas pour effectuer une petite fonction toute simple en javacript/jquery. J'ai une liste d'item qui s'affichent sur ajax/javascript (rémunéré) [ par bZx ] Je suis sur le développement d'un site depuis un certain temps et, après une nuit blanche sur du bon vieux php5 (que je maitrise assez bien) je me sui LiveValidation et ajax.updater [ par pierreo13 ] Bonjour, j'ai un problème avec ajax.updater. Je voudrais charger un formulaire dans une div et ce formulaire doit être validé par LiveValidation. Mai


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,530 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales