Page 4 sur 31

Re: [TUTO] Application web dynamique

Posté : jeu. 1 déc. 2016 20:34
par Bud Spencer
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 ?

Re: [TUTO] Application web dynamique

Posté : jeu. 1 déc. 2016 21:18
par pajRLE
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"

Re: [TUTO] Application web dynamique

Posté : ven. 2 déc. 2016 08:43
par pajRLE
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

Re: [TUTO] Application web dynamique

Posté : ven. 2 déc. 2016 13:44
par Bud Spencer
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.

Re: [TUTO] Application web dynamique

Posté : sam. 3 déc. 2016 11:26
par Bud Spencer
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/

Re: [TUTO] Application web dynamique

Posté : dim. 18 déc. 2016 14:28
par guillaume9344
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

Re: [TUTO] Application web dynamique

Posté : dim. 18 déc. 2016 16:41
par Bud Spencer
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).

Re: [TUTO] Application web dynamique

Posté : dim. 18 déc. 2016 17:43
par guillaume9344
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);
		});
?

Re: [TUTO] Application web dynamique

Posté : dim. 18 déc. 2016 19:12
par Bud Spencer
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.

Re: [TUTO] Application web dynamique

Posté : dim. 18 déc. 2016 19:25
par guillaume9344
merci.
Bon je met tout cela en pratique sur un petit server avec 3 sondes , à bientot pour d'aautre questions.