GIS and Media fusion
"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild
User Tools
ajax:websocket
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
ajax:websocket [2011/05/27 11:40] jfreyre |
ajax:websocket [2018/05/15 17:18] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== HTML5 & Web socket ====== | ====== HTML5 & Web socket ====== | ||
| + | |||
| + | Présentation : {{:ajax:websockets.pdf|}} | ||
| ===== HTML5 ===== | ===== HTML5 ===== | ||
| - | HTML5 apporte beaucoup au développeur en permettant de donner plus de sens à la source. | + | HTML5 apporte beaucoup au développeur en permettant, notamment, de donner plus de sens à la source. |
| - | Tout d'abord de nombreux nouveaux tags sont désormais valides ''header'', ''nav'', ''footer'', etc... et permettent une meilleure sémantique des pages. Ensuite, tous les tags HTML peuvent avoir des attributs personnalisés liés à l'application et suffixé de ''data''-. On trouvera donc ''data-monAttribut'' plutôt que d'utiliser une classe inutile et dénuée de sens. | + | De nombreux nouveaux tags sont désormais valides ''header'', ''nav'', ''footer'', etc... et permettent une meilleure sémantique des pages. Ensuite, tous les tags HTML peuvent avoir des attributs personnalisés liés à l'application et suffixé de ''data''-. On trouvera donc ''data-monAttribut'' plutôt que d'utiliser des classes inutiles et dénuées de sens. |
| ==== Exemple de code HTML5 ==== | ==== Exemple de code HTML5 ==== | ||
| - | <code html> | + | <code html5> |
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| Line 13: | Line 15: | ||
| <head> | <head> | ||
| <meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
| - | + | <title>here comes a title</title> | |
| - | <title></title> | + | |
| <link rel="stylesheet" media="screen" href="ecran.css"> | <link rel="stylesheet" media="screen" href="ecran.css"> | ||
| </head> | </head> | ||
| Line 21: | Line 21: | ||
| <header> | <header> | ||
| <h1>Wake up sheeple!</h1> | <h1>Wake up sheeple!</h1> | ||
| - | <p><a href="news.html">News</a> - | + | <p> |
| - | <a href="blog.html">Blog</a> - | + | <a href="news.html">News</a> - |
| - | <a href="forums.html">Forums</a></p> | + | <a href="blog.html">Blog</a> - |
| + | <a href="forums.html">Forums</a> | ||
| + | </p> | ||
| <p>Last Modified: <time>2009-04-01</time></p> | <p>Last Modified: <time>2009-04-01</time></p> | ||
| <nav> | <nav> | ||
| Line 57: | Line 59: | ||
| ==== Les APIs ==== | ==== Les APIs ==== | ||
| - | De plus, HTML5 apporte une suite d'API intéressantes pour rendre les applications web encore plus performantes, indépendantes, etc : | + | De plus, HTML5 apporte une suite d'APIs intéressantes qui <del>permettent</del> permettront de rendre les applications web encore plus performantes, indépendantes, etc : |
| * Stockage en local de fichier | * Stockage en local de fichier | ||
| * Base de données locales et accessible dans une pseudo version de SQL | * Base de données locales et accessible dans une pseudo version de SQL | ||
| Line 69: | Line 71: | ||
| * Mode déconnecté | * Mode déconnecté | ||
| - | ==== Références ==== | + | |
| - | * http://www.html5rocks.com/ | + | De nombreux exemples concernant l'ensembles des APIs sont consultables sur http://slides.html5rocks.com/ |
| - | * http://slides.html5rocks.com/ | + | |
| ===== L'interface WebSocket ===== | ===== L'interface WebSocket ===== | ||
| - | L'interface proposée par le consortium W3C convernant les websockets est disponible à l'adresse: http://dev.w3.org/html5/websockets/ | + | L'interface proposée par le consortium W3C concernant les websockets est disponible à l'adresse: http://dev.w3.org/html5/websockets/ |
| - | Elle est encore à l'état de draft (état au 24 mai 2011) mais certains navigateurs l'implémente d'ores déjà; à savoir Chrome et Safari (y.c. la version mobile). | + | Elle est encore à l'état de draft (état au 24 mai 2011) mais certains navigateurs l'implémentent d'ores déjà; à savoir Chrome et Safari (y.c. la version mobile). La découverte d'une faille de sécurité relativement importante lors de la phase de handshake, certains browsers ont décidé de désactivé l'API pour le moment; c'est notamment le cas de firefox 4. |
| L'interface proposée par le W3C se présente de la manière suivante: | L'interface proposée par le W3C se présente de la manière suivante: | ||
| Line 108: | Line 109: | ||
| ==== Côté client ==== | ==== Côté client ==== | ||
| - | Afin de pouvoir satisfaire tout le monde (c-à-d ceux qui n'utilisent pas <del>des browser modernes</del> Safari ou Chrome :) ), il est possible d'établir une connexion persistante entre le serveur et ces clients via un fichier swf. Par contre, l'utilisation de cette méthode nécessite l'ajout de quelques classes et fichiers pour le client. | + | Afin de pouvoir satisfaire tout le monde (c-à-d ceux qui n'utilisent pas <del>des browser modernes</del> Safari ou Chrome :) ), il est possible d'établir une connexion persistante entre le serveur et ces clients via un fichier swf. Par contre, l'utilisation de cette méthode nécessite l'ajout de quelques classes et fichiers pour le client. Cette démonstration est faite à l'exemple 4. |
| ===== Exemples ===== | ===== Exemples ===== | ||
| Line 116: | Line 117: | ||
| === Description === | === Description === | ||
| - | Le fonctionnement de cette application permet de faire la transition entre les requêtes ajax et les websockets. | + | Le fonctionnement de cette application permet de faire la transition entre le monde des requêtes ajax et les websockets. |
| Pour ce faire, on va établir une connexion persistante entre le client et le server mais les données ne transiterons **qu'à la demande du client**. Lorsque le client appellera le serveur, celui-ci lui renverra l'heure actuelle et elle sera ensuite affichée chez le client. | Pour ce faire, on va établir une connexion persistante entre le client et le server mais les données ne transiterons **qu'à la demande du client**. Lorsque le client appellera le serveur, celui-ci lui renverra l'heure actuelle et elle sera ensuite affichée chez le client. | ||
| === Coté Client === | === Coté Client === | ||
| - | Dans cet exemple, le code javascript est très simple. On va créer un nouvel objet ''WebSocket'' fourni par l'API du browser et ne fonctionnera que sur Chrome, Safari et Safari mobile. | + | Dans cet exemple, le code javascript est très simple. On va simplement créer un nouvel objet ''WebSocket'' fourni par l'API du browser en lui indiquant l'url de notre server de sockets. |
| <code javascript> | <code javascript> | ||
| - | var myWebsocket = new WebSocket(wsUri); | + | var wsConnection = new WebSocket('ws://monserveur.com:8080/application'); |
| </code> | </code> | ||
| + | |||
| Le reste du code va simplement permettre de définir les méthodes ''onopen'', ''onclose'', ''onmessage'' et ''onerror'' de l'objet ''websocket''. On peut noter que la grande partie du code est utilisé pour l'esthétique de l'interface. | Le reste du code va simplement permettre de définir les méthodes ''onopen'', ''onclose'', ''onmessage'' et ''onerror'' de l'objet ''websocket''. On peut noter que la grande partie du code est utilisé pour l'esthétique de l'interface. | ||
| <code javascript> | <code javascript> | ||
| - | myWebsocket.onopen = function (evt) { | + | wsConnection.onopen = function (evt) { |
| console.log('Websocket open.'); | console.log('Websocket open.'); | ||
| $('#status').removeClass().addClass('online').html('online'); | $('#status').removeClass().addClass('online').html('online'); | ||
| Line 136: | Line 138: | ||
| $('#send').attr('disabled', false); | $('#send').attr('disabled', false); | ||
| } | } | ||
| - | myWebsocket.onclose = function(evt) { | + | wsConnection.onclose = function(evt) { |
| console.log('Websocket closed.'); | console.log('Websocket closed.'); | ||
| $('#status').removeClass().addClass('offline').html('offline'); | $('#status').removeClass().addClass('offline').html('offline'); | ||
| $('#send').attr('disabled', true); | $('#send').attr('disabled', true); | ||
| } | } | ||
| - | myWebsocket.onmessage = function(evt) { | + | wsConnection.onmessage = function(evt) { |
| console.log('Message received.') | console.log('Message received.') | ||
| writeToScreen('Received: ' + evt.data); | writeToScreen('Received: ' + evt.data); | ||
| output.animate({scrollTop: output.attr('scrollHeight')}) | output.animate({scrollTop: output.attr('scrollHeight')}) | ||
| } | } | ||
| - | myWebsocket.onerror = function(evt) { | + | wsConnection.onerror = function(evt) { |
| - | console.error('Error') | + | console.error('Error with the socket') |
| $('#status').removeClass().addClass('error').html('error'); | $('#status').removeClass().addClass('error').html('error'); | ||
| } | } | ||
| Line 204: | Line 206: | ||
| ====3 - Simple IRC ==== | ====3 - Simple IRC ==== | ||
| [[http://poulpe.heig-vd.ch/masrad/websockets/3-irc|Lien sur l'application]] | [[http://poulpe.heig-vd.ch/masrad/websockets/3-irc|Lien sur l'application]] | ||
| + | |||
| + | Télécharger l'exemple: {{:ajax:3-irc-simple.zip|}} | ||
| === Description === | === Description === | ||
| Line 210: | Line 214: | ||
| * D'enregistrer les nouveaux clients. | * D'enregistrer les nouveaux clients. | ||
| * Broadcaster l'arrivée de quelqu'un. | * Broadcaster l'arrivée de quelqu'un. | ||
| - | * Broadcaster les messages des utilisateurs | + | * Broadcaster les messages des utilisateurs . |
| + | * Gérer la déconnexion d'un utilisateur. | ||
| - | De leur côtés, les clients doivent être en mesure de : | + | De leur côté, les clients doivent être en mesure de : |
| * Effectuer une connexion au serveur | * Effectuer une connexion au serveur | ||
| - | * Transmettre des messages à tout le monde | + | * Transmettre des messages au serveur |
| - | * Récupérer les messages | + | * Lire les messages reçu |
| === Côté Client === | === Côté Client === | ||
| <code javascript> | <code javascript> | ||
| - | var wsUri = "ws://monserveur:monport/echo"; | + | var wsUri = "ws://monserveur:monport/application"; |
| var output; | var output; | ||
| Line 272: | Line 277: | ||
| === Côté Serveur === | === Côté Serveur === | ||
| + | |||
| + | Du côté du serveur, nous avons volontairement choisi d'utiliser un format d'échange standard pour les communications. En effet, nous aurions pu simplement renvoyer le message "ip_client:port_client écrit :'Hello World'". Toutefois, nous ne maîtrisons pas toujours qui utilise nos services. Fort de ce constat, nous préférons utiliser des objets sérialisés en JSON. | ||
| + | |||
| <code php> | <code php> | ||
| public function onData($data, $client) { | public function onData($data, $client) { | ||
| Line 308: | Line 316: | ||
| </code> | </code> | ||
| + | Solution : {{:ajax:4-irc-crossbrowser.zip|}} | ||
| ===== Les exercices ===== | ===== Les exercices ===== | ||
| Line 315: | Line 324: | ||
| En se basant sur l'exemple 1 et en modifiant {{:ajax:ex-hash-template.zip|}}, faire en sorte que le client envoie une chaine de caractères au serveur. Celui-ci lui renverra le hash md5 de la valeur au client qui l'affichera. | En se basant sur l'exemple 1 et en modifiant {{:ajax:ex-hash-template.zip|}}, faire en sorte que le client envoie une chaine de caractères au serveur. Celui-ci lui renverra le hash md5 de la valeur au client qui l'affichera. | ||
| + | Solution : {{:ajax:ex-hash-solution.zip|}} | ||
| ==== IRC++ ==== | ==== IRC++ ==== | ||
| En partant de {{:ajax:ex-irc-template.zip|}} et de l'exemple 3, faire en sorte que : | En partant de {{:ajax:ex-irc-template.zip|}} et de l'exemple 3, faire en sorte que : | ||
| - | * Les clients ne reçoivent pas leurs propres message. Il sera toutefois afficher lors de l'envoie par le JS. | + | * Les clients ne reçoivent pas leurs propres message. Il sera toutefois affiché sur l'interface par le javascript. |
| * Les clients peuvent mettre à jour leur nom d'utilisateur. Celui-ci sera transmis dans la liste des utilisateurs | * Les clients peuvent mettre à jour leur nom d'utilisateur. Celui-ci sera transmis dans la liste des utilisateurs | ||
| * Les clients reçoivent et mettent à jour la liste des personnes connectées uniquement lorsque cela est nécessaire | * Les clients reçoivent et mettent à jour la liste des personnes connectées uniquement lorsque cela est nécessaire | ||
| + | |||
| + | Solution: {{:ajax:ex-irc-solution.zip|}} | ||
| + | |||
| + | ===== Docs, Démo, etc... ===== | ||
| + | * http://www.html5rocks.com/ présente beaucoup d'informations à propos de html5 et de toutes ces APIs | ||
| + | * http://dev.w3.org/html5/websockets/ Draft de l'API WebSocket | ||
ajax/websocket.1306489217.txt.gz · Last modified: 2018/05/15 17:17 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
