[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

Bud Spencer
Raspinaute
Messages : 1089
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 1 déc. 2016 20:34

Ok, c'est donc bien un problème de socket.
si tu entres l'url que la console te renvoie dans GET http://192.168.1.25:8080/socketio/socket.io.js directement dans le navigateur, cela doit te retourner un code source en javascript, c'est bien le cas ?
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

pajRLE
Messages : 9
Enregistré le : mar. 29 nov. 2016 13:01

Re: [TUTO] Application web dynamique

Message par pajRLE » jeu. 1 déc. 2016 21:18

Non il renvoie : Cannot GET /socketio/socket.io.js
Dans la console du navigateur :
Failed to load resource : http://192.168.1.25:8080/socketio/socket.io.js
the server responded with a status of 404 (Not Found)

De plus quelque chose m'intrigue :
Dans le fichier index.html il y a :
<script src="/socketio/socket.io.js"></script> Mais je ne vois pas ce fichier dans l'arborescence de node_modules
Ni <script src="/jquery/jquery.js"

pajRLE
Messages : 9
Enregistré le : mar. 29 nov. 2016 13:01

Re: [TUTO] Application web dynamique

Message par pajRLE » ven. 2 déc. 2016 08:43

J'ai trouvé.
En fait il manquait un point dans la description du fichier socketio dans index.html.
Il y avait : <script src="/socketio/socket.io.js"></script>
il faut : <script src="/socket.io/socket.io.js"></script>
J'aurais dû le voir plus tôt.
Ca marche.
Merci encore de ta patience.
Patrice

Bud Spencer
Raspinaute
Messages : 1089
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » ven. 2 déc. 2016 13:44

pajRLE a écrit : De plus quelque chose m'intrigue :
Dans le fichier index.html il y a :
<script src="/socketio/socket.io.js"></script> Mais je ne vois pas ce fichier dans l'arborescence de node_modules
Ni <script src="/jquery/jquery.js"
J'expliquais ca dans la lecon n° 1. Les lignes 'app.use( ... express.static ....)' dans la partie serveur sont l'équivalent de liens symboliques qui permettent de masquer les chemins réels par des chemins simplifiés.
Notez l’intérêt d’avoir défini un chemin statique dans la partie serveur (app.use(‘/jquery ….). Cela nous permet dans la page html d’écrire juste :
src= "/jquery/…. au lieu de src= "/node_module/jquery/dist/…’


Très bien que tu ais fini par trouver tout seul le problème. Je me doutais bien que c'était un problème de ce genre. Pour ce type de dev., il y à cette subtilité qui est d'avoir une partie du programme coté serveur et l'autre coté client. Quand tu executes un programme NodeJS, tu es averti des erreurs de compilation coté serveur, mais pas de celles qui peuvent survenir coté client. J'avais notifié dès la première leçon que tout le code qui se trouve entre les balises <script></script> est ignoré par le serveur. Pour ca, l'utilisation du débogueur des navigateur est très importante pour déceler les erreurs. Il faut aussi prendre l'habitude de mettre des traces de débogage, surtout avec du JavaScript. Cela permet de suivre le déroulement d'un programme dans une console et au moins de se dire 'jusque là, ca va' et définir à partir de quel endroit ca commence à foirer.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Bud Spencer
Raspinaute
Messages : 1089
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 3 déc. 2016 11:26

NPM

Le gestionnaire de paquet npm ne sert pas seulement à installer des packages à la demande, il possède aussi de nombreuses commandes qui permettent de gérer au mieux toutes les dépendances.

Une des possibilités est l’installation automatique des paquets. Cela peut par exemple éviter de les inclure dans votre distribution si vous décidez de partager votre application. Faisons en l’expérience :

Mettez-vous dans le répertoire racine de votre application NodeJs et entrez la commande :
npm init
Validez les opérations par entrée en ayant préalablement changé les valeurs si besoin. La valeur par défaut qui sera retenue est celle contenue entre parenthèse quand il y en a une. Vous pouvez dans un premier temps faire ‘enter’ pour chaque option jusqu’à la validation finale.

Si vous regardez maintenant dans votre répertoire, npm a créé un fichier package.jso qui contient les différentes informations de votre appli ainsi que la liste des dépendances. Supprimez maintenant le répertoire node_modules puis exécutez la commande npm install
. Vous allez avoir quelques warning pour les valeurs que vous n’avez pas renseigné à l’init puis npm va recréer le dir node_modules et installer automatiquement tous les paquages.

La bonne pratique à s’imposer quand on créer une appli nodejs, c’est de bien créer ce fichier package.jso, soit manuellement, soit en utilisant la fonction init de npm. Vous pouvez aussi utiliser la commande npm update pour mettre à jour vos dépendances ainsi que tout un tas d’autres commandes.
Si vous êtes tenté par le développement d’appli NodeJS, prenez un peu de temps pour vous intéresser à son gestionnaire de paquet. Tout ce que vous aurez besoin de savoir ce trouve ici -> https://docs.npmjs.com/
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

guillaume9344
Raspinaute
Messages : 629
Enregistré le : mar. 6 janv. 2015 19:44
Localisation : finistere

Re: [TUTO] Application web dynamique

Message par guillaume9344 » dim. 18 déc. 2016 14:28

Bonjour,
Ca y est je me suis lancé , j'ai un petit server web à faire tourner pour 2 sondes de temperatures , je me suis dit "c'est l'ocase de tester node.js "
Je retrouve le tuto , install le premier tuto et premiéres erreures:
en premier, pour lancer node je doit faire nodejs myweb.js et non node myweb.js , de meme pour la commande node -v , nodejs -v me renvoie v0.10.29
en second lorsque j'essaye de charger la page , node me renvoi des erreures et les affiches dans le navigateurs:

Code : Tout sélectionner

root@orangepipcplus:/home/pi/myweb# nodejs myweb.js
CTRL+C pour quitter.
Error: Failed to lookup view "index.html" in views directory "/home/pi/myweb/templates"
    at EventEmitter.render (/home/pi/myweb/node_modules/express/lib/application.js:579:17)
    at ServerResponse.render (/home/pi/myweb/node_modules/express/lib/response.js:960:7)
    at /home/pi/myweb/myweb.js:22:5
    at Layer.handle [as handle_request] (/home/pi/myweb/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/pi/myweb/node_modules/express/lib/router/route.js:131:13)
    at Route.dispatch (/home/pi/myweb/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/home/pi/myweb/node_modules/express/lib/router/layer.js:95:5)
    at /home/pi/myweb/node_modules/express/lib/router/index.js:277:22
    at Function.process_params (/home/pi/myweb/node_modules/express/lib/router/index.js:330:12)
    at next (/home/pi/myweb/node_modules/express/lib/router/index.js:271:10)
^C
J'ai verifié la présence d'index.html dans /templates et également le contenu de myweb.js et index.html

pour info je travail sur une orangepi sous armbian jessie 3.4.112 en root

si je me suis planté à la premiere lecon , je n'inquiéte pour la suite :D :D
rpi b+ ,osmc, motioneyes
rpi 2 raspbian , server minecraft 24h/24 , utilisation gpio
orange pi pc debian ,utilisation gpio, motion cam

Bud Spencer
Raspinaute
Messages : 1089
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 18 déc. 2016 16:41

Sur une de mes vm debian 8, je doits aussi utiliser la commande nodejs au lieu de node. J'avais trouvé un peu d'explication ici -> http://stackoverflow.com/questions/1813 ... untu-12-04 mais cela ne m'a jamais posé de problème de fonctionnement.
Visiblement tu as un problème avec Express ce que je n'ais jamais eus. Tu as quel version de npm et d'Express ?

Pour le fun, je viens de télécharger le zip de leçon 1 et J'ai recréer une arborescence de projet dans laquelle j'ai mis le fichier .js a la racine puis un sous dir. /templates dans lequel j'ai mis le fichier html et sous dir. /public pour l'image. Ensuite j'ai installé les packages localement (ejs et express)en exécutant npm depuis la racine du projet et je n'arrive pas a reproduire ton erreur. Tout fonctionne normalement sous Raspbian Pixel (pi 2b), win10 x64 (pc), Debian 8 (vm hyperv) et win XP (vm hyperv).
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

guillaume9344
Raspinaute
Messages : 629
Enregistré le : mar. 6 janv. 2015 19:44
Localisation : finistere

Re: [TUTO] Application web dynamique

Message par guillaume9344 » dim. 18 déc. 2016 17:43

Merci ,
j'avais bien une erreure de /template au lieu de /templates.
tout est rentré dans l'ordre et écrire nodejs ne me pose pas de problémes.

Concernant le zip de la lecon 2 , je crois qu'il contient le ficher index.html de la lecon 1 (du coup j'ai du acheter des doigts pour taper sur mon clavier :D :D :D )

Autre question, pour remplacer

Code : Tout sélectionner

var io=io.connect(http://195.165.1.......:8080);
automatiquement par l'ip du server suffit il de metre :

Code : Tout sélectionner

var io = io.connect(location.host);
?

Et pour envoyer plusieurs données si j 'ai bien compris:
pour l 'envoi

Code : Tout sélectionner

var data = {'etat' : s,'iden': i }; 
	socketio.sockets.emit('perifchange',data);
pour la reception:

Code : Tout sélectionner

	io.on('perifchange',function(data)
		{
			setStatus(data.iden,data.etat);
		});
?
rpi b+ ,osmc, motioneyes
rpi 2 raspbian , server minecraft 24h/24 , utilisation gpio
orange pi pc debian ,utilisation gpio, motion cam

Bud Spencer
Raspinaute
Messages : 1089
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 18 déc. 2016 19:12

haaa ces petites erreurs de saisie qui nous font tourner en rond :lol: .

Pour tes 3 questions, tu as tout bon dans tes propres réponses. 'perifchange' est le nom de l'évènement et 'data' contient toutes tes données sous forme d'objet JSON.

Pour la lecon2, je vais la télécharger et mettre à jour si besoin. Il est bien possible que je me sois gourge en zippant.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

guillaume9344
Raspinaute
Messages : 629
Enregistré le : mar. 6 janv. 2015 19:44
Localisation : finistere

Re: [TUTO] Application web dynamique

Message par guillaume9344 » dim. 18 déc. 2016 19:25

merci.
Bon je met tout cela en pratique sur un petit server avec 3 sondes , à bientot pour d'aautre questions.
rpi b+ ,osmc, motioneyes
rpi 2 raspbian , server minecraft 24h/24 , utilisation gpio
orange pi pc debian ,utilisation gpio, motion cam

Répondre

Retourner vers « Tutoriels »