Partage
  • Partager sur Facebook
  • Partager sur Twitter

Cours Node.js : c'est parti !

25 juillet 2014 à 16:10:36

a5er a écrit:

Si le sujet doit s'allonger il serait peut-être bon d'adopter une convention pour structurer la conversation.

Par exemple, on pourrait numéroter les questions posées et toute personne qui voudrait en poser une commencera son post par Q#numero_de_la_question:, et ceux qui voudrait proposer une réponse à une question commenceraient par R#numero_de_la_question:.

Q#1: Qu'en pensez-vous ?

ou sinon il y a les citations ou encore on copie le lien "Il y a 14 minutes" et on peut changer la référence comme "ca"

:p

______

tien, page 2! un petit up pour ma question page 1 et en attendant que le TP et le quizz de la semaine 3,

je vais tenter ceci : http://code4fun.fr/creer-un-site-simple-avec-node-js-express-et-jade/

il y a une npm install -g (j'aurais p-e ma réponse en pratiquant) puis pas mal de truc intéressant...

______

Pas de bol je ne suis pas allé loin sur ce tuto ... ( et vu que c'est hors sujet )

-
Edité par CQEadsurf 25 juillet 2014 à 18:56:55

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
25 juillet 2014 à 20:25:38

R@CQEadsurf: Effectivement, c'est une bonne idée, quoi que plus compliquée à mettre en oeuvre, disons que ça serait facultatif, mais le texte R#numéro_de_la_question pourrait être un lien vers la question en question (je me comprend ...), comme ceci

R#1:.

-
Edité par a5er 25 juillet 2014 à 20:26:05

  • Partager sur Facebook
  • Partager sur Twitter
28 juillet 2014 à 14:12:45

CQEadsurf a écrit:

j'ai essayé npm install -g (sur la console "normal" et la console "admin") et il va installer le module sur :

"c:\Users\Utilisateur\AppData\Roaming\npm\node_modules\"

En suite j'ai essayer de faire fonctionner "super chat" après que les module aient été installé avec cet option.

  L'application ne trouve pas mes modules ...

Donc j'ai essayé d'installer les modules dans "c:\program files\nodejs\node_modules\npm\node_modules\" (console "admin"):

  Pareil, l'application ne trouve pas mes modules ...

je vois pas où se trouve le problème...(enfin je suppose que si je fais npm install -g, ça devrait mieux fonctionner qu’implanter mes modules dans  "c:\program files\nodejs\node_modules\npm\node_modules\")

Si vous avez une info par rapport a ce problème je suis preneur ...

-
Edité par CQEadsurf le 25 juillet 2014 à 15:42:30


Désolé, je ne fais pas joujou avec les citations :) j'écourte simplement mes quotes.

Pour ma part, je n'ai fait de développement NodeJS que sous Linux, et je n'ai pas eu ce genre de problèmes... une idée comme une autre, dans tes variables d'environnement, tu dois avoir un chemin qui pointe vers ton répertoire node_modules, as-tu vérifier de ce côté là ? 

L'idée part de ce que l'on peut lire dans la doc de NodeJS (désolé, en version anglaise, en gras, la partie qui nous intéresse le plus) :

Loading from the global folders: If the NODE_PATH environment variable is set to a colon-delimited list of absolute paths, then node will search those paths for modules if they are not found elsewhere. (Note: On Windows, NODE_PATH is delimited by semicolons instead of colons.) Additionally, node will search in the following locations: 1: $HOME/.node_modules 2: $HOME/.node_libraries 3: $PREFIX/lib/node Where $HOME is the user's home directory, and $PREFIX is node's configured node_prefix. These are mostly for historic reasons. You are highly encouraged to place your dependencies locally in node_modules folders. They will be loaded faster, and more reliably.

Donc, je suggère la création d'une variable d'environnement NODE_PATH qui pointe vers ton répertoire dans C:/Users/...etc../node_modules.

Dans le registre de l'hypothèse du pourquoi ça ne fonctionne pas, un de mes livres parlent de problème pour les noms d'utilisateur avec espace sous windows (exemple : ton "Utilisateur" s'appelle "Util Isateur") qui peuvent poser problème pour trouver les modules NodeJS... je ne suis pas du tout sûr pour cette anomalie, mais je tenais à la remonter (on ne sait jamais).

En espérant avoir pu aider...

Bonne journée !

-
Edité par Airin 28 juillet 2014 à 14:13:39

  • Partager sur Facebook
  • Partager sur Twitter
Apprendre peut être long et difficile, mais abandonner n'accélère certainement pas le processus.
29 juillet 2014 à 9:01:49

@Airin merci pour ton info et j'ai regardé un peu partout ...

j'ai même suivi ce qui a été dit ici (en plus ca devait m'aidé parce que je suis sous vista et rien n'y fait...).

  • j'ai redéfini les chemins (meme : C:\Users\Utilisateur\AppData\Roaming\npm\node_modules\)
  • j'ai désinstallé et essayant d'effacer tt trace de node.js et réinstallé et redéfinissant les chemin comme indiqué sur le site... 

rien n'y fait .

par contre chose bizarre autant qu'étrange :

  • je fais mes npm install sur C:\users\utilisateur\
  • je met l'exercice zippé du tp "super chat" sur C:\users\utilisateur\
  • je vais dans C:\users\utilisateur\super-chat\ pour lancer l'application...

ça marcheo_O alors que quand je fais une install globale il ne trouve pas mes modules qui sont installé dans C:\Users\Utilisateur\AppData\Roaming\npm\node_modules\

c'est p-e parceque c'est la derniere version de node.js qui déconne (surtout que dans les pactages il me parle de définir le path....):-°

Precision : (Parce qu'en me relisant il m'est venu cet idée...) quand je défini C:\Users\Utilisateur\node_modules\ et que je fais npm install -g, il me remet les modules dans C:\Users\Utilisateur\AppData\Roaming\npm\node_modules\:colere:

_____

Sinon je vais pas me casser la tête avec ça (ni monopoliser le forum avec ce pb qui me court sur les haricot)...

vu que node trouve mes module sur C:\users\utilisateur\,  je vais m'en accommoder et installer mes module à cet endroit ...

-
Edité par CQEadsurf 29 juillet 2014 à 9:32:11

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
29 juillet 2014 à 9:25:56

Windows et node, en général... bof bof ;)

"vu que node trouve mes module sur C:\users\utilisateur\,  je vais m'en accommoder et installer mes module à cet endroit "

En fait node va chercher les modules de façon un peu particulière ;)

Si ton projet est à dans le dossier C:\users\utilisateur\projet, normalement les modules doivent se situer dans le dossier C:\users\utilisateur\projet\node_modules

S'ils n'y sont pas, node va les chercher de plus en plus haut dans la hierarchie :

C:\users\utilisateur\node_modules

C:\users\node_modules

C:\node_modules

Il s'arrête de chercher quand il l'a trouvé ou quand il atteint la racine.
Il est toutefois préférable de bien t'assurer que les modules sont enregistrés dans le dossier du projet. Pour l'export, c'est mieux :)

Pour le soucis du npm install -g... pourquoi veut tu le mettre en global ?

-
Edité par Lesterpig 29 juillet 2014 à 9:27:59

  • Partager sur Facebook
  • Partager sur Twitter
29 juillet 2014 à 9:33:46

Cybernetic a écrit:

Je suis passé à côté de quelque chose... J'ai compris en gros comment NodeJS fonctionnait (Je suis à la fin de la partie 2).

J'ai donc compris qu'il permettait d'utiliser JavaScript côté serveur. Mais par exemple, j'ai un website chez un hébergeur. Puis-je utiliser NodeJS dessus ? Si oui, comment dois-je m'y prendre ?

(Je suis pas super à l'aise avec ces notions, je suis un vrai zéro, donc ma question est peut-être à côté de la plaque)


Les hébergeurs web "mutualisés" sont conçus (en général) pour fonctionner avec PHP/MySQL. Node.Js, totalement différent, ne fonctionnera pas dessus !

Heureusement, il existe des hébergeurs "node.js" mutualisés, qui te permettent d'exécuter un programme node.js de ton choix. Regarder du côté des fournisseurs de "VPS" pour carrément louer une petite machine permettant d'exécuter node.js. 

-
Edité par Lesterpig 29 juillet 2014 à 9:36:00

  • Partager sur Facebook
  • Partager sur Twitter
29 juillet 2014 à 9:40:18

@Lesterpig

tout betement pour ne pas installer mes modules plusieurs fois (surtout express qu'il pourrait être utilisé sur plusieurs projets ... surtout qu'express plombe... donc installé plusieurs fois à la longue .....).

Lesterpig a écrit:

C:\users\utilisateur\node_modules

C:\users\node_modules

C:\node_modules


et "C:\Users\Utilisateur\AppData\Roaming\npm\node_modules\" pourquoi il ne veut pas? PB de droits ? (vu que ce sont des fichier "caché" il n'y va pas ?"...)

-
Edité par CQEadsurf 29 juillet 2014 à 9:56:22

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
29 juillet 2014 à 9:55:54

CQEadsurf a écrit:

@Lesterpig

tout betement pour ne pas installer mes modules plusieurs fois (surtout express qu'il pourrait être utilisé sur plusieurs projets ...).

Lesterpig a écrit:

C:\users\utilisateur\node_modules

C:\users\node_modules

C:\node_modules


et "C:\Users\Utilisateur\AppData\Roaming\npm\node_modules\" pourquoi il ne veut pas? PB de droits ? (vu que ce sont des fichier "caché" il n'y va pas ?"...)

-
Edité par CQEadsurf il y a 12 minutes


Pour le global : je te conseille vraiment d'éviter le global si c'est possible. Imagine que tu doives installer ton projet sur un autre ordinateur, qui n'a pas express. Tu vas faire "npm install", et il n'installera pas express, qui était global sur l'ancien ordinateur. Ton projet ne marchera pas.

Mais parfois c'est utile, notamment avec des modules qui se lancent en ligne de commande (mocha, forever...). Peux tu nous copier/coller les erreurs, et le fichier qui pose problème ? :) 

-
Edité par Lesterpig 29 juillet 2014 à 9:56:21

  • Partager sur Facebook
  • Partager sur Twitter
29 juillet 2014 à 10:13:17

@Lesterpig

c'est surtout quand on lance les applications c'est du style : "je ne trouve pas le module express, je ne trouve pas ent je ne trouve pas socket.io":

module.js:340
    throw err;
          ^
Error: Cannot find module 'express'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (C:\Users\Utilisateur\super-chat\serveur.js:1:73
)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)

normal vu qu'il pointe (d'après ce que j'ai remarqué) en "C:\Users\Utilisateur" après avoir surement cherché en "C:\Users\Utilisateur\chat" et donc il "fouillerait" a chaque fois dans le dossier parent....

(je viens de comprendre) Et vu que npm install -g va mettre en "C:\Users\Utilisateur\AppData\Roaming\npm\node_modules\", node ne remonte pas (ou plutôt ne redescend pas) vers cet emplacement ... c'est normal ... 

>_< y a t-il moyen de configurer npm pour qu'il installe les Modules dans "C:\Users\Utilisateur"? (et qu'on  me ne dise pas de redéfinir les path ca ne change rien npm n'en fait qu'a sa tete !!!)

___

de plus ca ne m’inquiétè pas plus que ca de ne pas installer les modules dans le projet (surtout si c'est des modules trouvé sur github ou npm... je m'explique (d’après ce que j'ai remarqué car j'ai fait pas mal de test):

c'est sur que si ce sont tes module il faut les mettre dans node_module...

mais par exemple quand tu télécharge un module d'un de tes potes que tu fais npm install dans ton projet, si le module est bien fait:

 il n'est pas alourdis par un tas de modules qu'on peut trouver de partout ...(ou sont ils? on s'en fout) car il y a package.json !!! (puis le readme est la aussi pour dire ce qu'il faut faire ....)

une fois que tu as fais l'install de ton module :

  • tu vas dans node_module de ton projet
  • tu fais un "cd new_module && npm install" (new_module etant le module que tu viens d'installer)

npm installe les dépendances selon package.json et hop tu as un module correctement installé !!!:p

donc quand on crée un projet : BIEN FAIRE SON PACKAGE.JSON!!!

 ______

Autre chose bien utile pour express (qui est installé en global...): le module express generator (qui lui doit aussi être installé en global !!!!)

Dans la console node on fait "express mon_projet"

Il te construit ton projet ... il reste:

  •  A compléter packages.json : s'il y a des modif comme jade qui est inscrit en 1.3.0 et qu'on veut la dernière (version 1.5.0 / HTML5 !!!) ou ajouter d'autre d'autre dépendance...
  • Et selon si on est a l'endroit ou on a fait "express mon_projet"(1) ou déja dans"mon_projet"(2) "cd new_module && npm install"(1) ou "npm install"(2).

enfin je vous conseille d'aller voir la doc pour ca j'explique ce qu'est express generator vite fait ...

 (dsl pour le pavé que je viens d’écrire:p)

-
Edité par CQEadsurf 29 juillet 2014 à 11:59:35

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
29 juillet 2014 à 20:20:31

C'est moi ou le cours contient des notions obsolètes ?  io.set() et io.get() sont dépréciées depuis la version 0.9 : http://socket.io/docs/migrating-from-0-9/#

  • Partager sur Facebook
  • Partager sur Twitter
30 juillet 2014 à 10:19:08

@Jarodd

regarde ces de post tu aura ta réponse ;)
Le 18 juillet 2014 à 1:23:54

Le 18 juillet 2014 à 15:12:49

surtout si tu parle de socket.io 1.0.6 qui n'a plus io.set() et io.get() (hé oui le cours n'est pas vraiment à jour...).

bizarre aussi qu'il n'a pas défini les dépendance pour cette partie du cours ... en même temps ça fait du bien ça nous force à aller à la pêche aux info...

il n'y a que ça qui aide à comprendre....

-
Edité par CQEadsurf 30 juillet 2014 à 10:32:23

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
30 juillet 2014 à 10:20:34

Jarodd a écrit:

C'est moi ou le cours contient des notions obsolètes ?  io.set() et io.get() sont dépréciées depuis la version 0.9 : http://socket.io/docs/migrating-from-0-9/#

Le cours existe depuis plus d'un an, il a juste été remis en avant en tant que MOOC... Pour le coup c'est un peu gonflé.



-
Edité par Lesterpig 30 juillet 2014 à 10:24:56

  • Partager sur Facebook
  • Partager sur Twitter
30 juillet 2014 à 10:43:01

Lesterpig a écrit:

Le cours existe depuis plus d'un an [...]

:waw:ce serait cool que les cours soient à jours....:-°
  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
30 juillet 2014 à 11:42:57

Autant je peux comprende qu'il soit obsolète en tant que cours simple, autant proposer une certif sur un cours pas mis à jour, ça ne donne pas une très bonne image d'OC... En gros personne ne l'a relu avant ! En plus le rédacteur est le boss d'OC, ça la fout mal...
  • Partager sur Facebook
  • Partager sur Twitter
30 juillet 2014 à 15:02:59

Hello tout le monde,

En préambule, je ne suis pas un fan aveugle du site (même si je le pratique depuis l'époque SiteDuZero...) mais pratiquant NodeJS, je peux assurer qu'il est TRES difficile d'avoir un cours à jour... à moins de vérifier chaque module dont parle le cours à chaque version/sous version d'un module... et nom de ... qu'il est parfois difficile de faire ça !

Le cours a l'avantage d'exister au moins... si NodeJS vous intéresse, il est assez facile de trouver des ressources pour palier aux problèmes rencontrés dans le cours (si vous êtes anglophone, j'ai quelques suggestions de lecture si vous voulez...).

Cependant, si vous vous basez sur les versions exacts des modules du cours, vous ne rencontrerez aucun problème... mais comme le cours ne donne pas les versions utilisées (je viens de vérifier) sans télécharger la solution, c'est effectivement embêtant...

Une mise à jour du cours "simple" (comprendre : rapide) serait de préciser les commandes npm install avec les numéros de versions exacts des modules... ?

Ceci dit, c'est une excellente leçon pour les étudiants : votre "package.json" est la clé de voûte de votre application ! une version différente d'un module peut vous coller une méga régression des familles :)

Bonne journée à tous, et bon cours :)

-
Edité par Airin 30 juillet 2014 à 15:03:52

  • Partager sur Facebook
  • Partager sur Twitter
Apprendre peut être long et difficile, mais abandonner n'accélère certainement pas le processus.
3 août 2014 à 21:39:33

dans le TP super chat je me pose un tas de question en rapport aux fichier qui pourrait etre lié à index HTML (je m'explique)

je veux virer le CSS ici

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Super Chat temps réel !</title>
        <style>
            #zone_chat strong {
                color: white;
                background-color: black;
                padding: 2px;
            }
        </style>
    </head>

et avoir cela :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Super Chat temps réel !</title>
        <link rel="stylesheet" href="css/base.css">
    </head>

j'ai compris que la page est fournis par ceci :

// Chargement de la page index.html
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

et qu'on utilisait express ... seulement j'ai rechercher partout pour avoir un bon tuto et :

  • soit je suis tombé sur des tutos ou on se passait totalement d'express et on utilisait avec path et fs...(et ca ne fonctionnait pas j'avais tt mes \ doublé dans les liens traité par fs : c:\\users\\....)
  • soit je tombais sur des tutos avec express (étroitement lié a jade) mais on ne parlait jamais de page html...
  • soit on tombe sur des tutos ou on a un chat hébergé sur wamp et node gérait de façon externe tt le traitement js ....(enfin je me comprend)

Bref ...comment s'y prend on... (même si c'est hors sujet ça pourrait quand même faire parti du court ... enfin je crois:-°   ...j'ai cherché partout, trifouillé un  tas de truc sans succès ...)


-
Edité par CQEadsurf 3 août 2014 à 21:41:04

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
3 août 2014 à 22:50:31

Ben c'est assez simple, en vérité. Il faut voir les choses coté client :

Si dans la page HTML qu'il reçoit sur un GET de http://ton_site_web/index.html il y a un lien dynamique vers "css/base.css", il va envoyer une requête GET supplémentaire pour obtenir la page http://ton_site_web/css/base.css, à toi de décider dans ton code de mettre un app.get('/css/base.css' ... qui lui renverra le contenu attendu...

-
Edité par a5er 4 août 2014 à 5:03:51

  • Partager sur Facebook
  • Partager sur Twitter
4 août 2014 à 8:54:35

Hello,

a5er a tout à fait raison, mais je ne peux pas m'empêcher d'ajouter mon parpaing de sel car il y a une autre option.

Tout dépend comment le "server.js" (je n'utilise pas cette dénomination pour le JS principal d'une application, d'où les guillemets) est créé.

Je viens de survoler la partie code de l'app.js dans le cours (app.js = server.js pour ceux qui n'auraient pas suivi) et je pense qu'on pourrait étoffer en exploitant les fonctionnalités d'Express vu dans la partie ... Express... du cours.

Tout en bas, on a droit à une rubrique sur les fonctionnalités Connect (louée soit la sainte Pelle, ce middleware reste intégré à Express en 4.0+), avec, je cite :

app.use(express.logger()) // Active le middleware de logging
2.use(express.static(__dirname + '/public')) // Indique que le dossier /public contient des fichiers statiques
3.use(express.favicon(__dirname + '/public/favicon.ico')) // Active la favicon indiquée
4.use(function(req, res){ // Répond enfin
5    res.send('Hello');
6});

Bon, c'est bien meugnon tout ça, mais ce qui m'intéresse c'est principalement :

var express = require('express');
app.use(express.static(__dirname + '/public'));

Alors oui, ça veut dire que le dossier /public contient des fichiers statiques (ça reste l'objectif premier de ce bout de code), mais ça indique aussi à express qu'il va devoir se farcir les routes tout seul comme un grand pour ce répertoire là :)

Ainsi, si j'ai une structure de fichier du type : "/public/vendor/mocha.css" (les tests, c'est bon, mangez en)

Dans ma page html, je vais écrire

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/vendor/mocha.css">
</head>
</html>

Nous n'avons plus à nous soucier des routes, simplement à garder nos css dans une partie "static" connue par le middleware Connect d'Express. 

Dans ton cas, en répertoriant "/css/base.css" dans un "/public/css/base.css", tu auras le même résultat (et tu n'auras pas envie de tuer le graphiste de l'équipe à chaque fois qu'il te pondra une nouvelle CSS..........)

Voilà... je pense que c'est tout ce que je voulais ajouter... 

Bonne journée à tous !

-
Edité par Airin 4 août 2014 à 13:32:54

  • Partager sur Facebook
  • Partager sur Twitter
Apprendre peut être long et difficile, mais abandonner n'accélère certainement pas le processus.
4 août 2014 à 11:26:48

Airin a écrit:

Alors oui, ça veut dire que le dossier /public contient des fichiers statiques (ça reste l'objectif premier de ce bout de code), mais ça indique aussi à express qu'il va devoir se farcir les routes tout seul comme un grand pour ce répertoire là :)

Ainsi, si j'ai une structure de fichier du type : "/public/vendor/mocha.css" (les tests, c'est bon, mangez en)

C:\Users\utilisateur\projet\serveur.js:17
app.use(express.static(__dirname + '/public'));
        ^
ReferenceError: express is not defined
    at Object.<anonymous> (C:\Users\utilisateur\todo list\serveur.js:17:9)

    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

Apparemment express 4.7.1 n'a pas envie de s'em......nuyer avec le routage statique ... voir ça ne l’intéresse pas du tout !(je me suis inquiété de ses dépendances... rien n'y fait)>_<

parcontre la solution d'a5er marche... mais je vois mal définir tout mes lien statique à la main :-°


  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
4 août 2014 à 11:39:48

Prends le temps d'essayer de résoudre tes problèmes avant de poster.

Le texte d'erreur est clair : express is not defined Ça signifie que tu as omis la toute première instruction indiquée dans le mode d'emploi de express, à savoir : var express = require('express');.

-
Edité par a5er 4 août 2014 à 12:07:11

  • Partager sur Facebook
  • Partager sur Twitter
4 août 2014 à 13:31:55

Hello,

Pas mieux que a5er pour le coup, le souci vient du nom de la variable.

Tellement l'habitude de nommer Express par un nom de variable "clair" (express pour le coup) que je n'y prête plus attention.

Tiens, j'édite histoire que ceux qui liraient les réponses ne se fassent pas avoir également !

  • Partager sur Facebook
  • Partager sur Twitter
Apprendre peut être long et difficile, mais abandonner n'accélère certainement pas le processus.
5 août 2014 à 12:25:27

Bonjour, je tente de réalisé la totolist en temps réel mais je suis toujours bloqué sur le personne connecté enfin surtout quand elle ce déconnecte.

Mon problème est qu'il voit bien la déconnexion mais il ne supprime pas utilisateur de l'objet ni de ma liste de connectés

Sa fait un moment que je cherche et si quelqu'un avait une idée du problème sa serait cool

Voilà ou j'en suit actuellement:

Mon fichier serveur.js

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var ent = require('ent');
var fs = require('fs');
var php = require('phpjs');

app.use(express.static(__dirname + '/'));

app.get('/', function(req, res)
{
	res.sendfile(__dirname + '/index.html');
});

var utilisateurs = {};

io.sockets.on('connection', function(socket)
{
    var utilisateur = false;
    var id = php.uniqid();
    console.log('nouveau utilisateur');

    for(var k in utilisateurs)
    {
        socket.emit('nouveau_utilisateur', utilisateurs[k]);
    }

    socket.on('login', function(utilisateur)
    {
        utilisateur.prenom = php.ucfirst(utilisateur.prenom);
        utilisateur.id = id;
        console.log(utilisateur);
        socket.emit('connecter');
        utilisateurs[utilisateur.id] = utilisateur;
        console.log(utilisateurs);
        io.sockets.emit('nouveau_utilisateur', utilisateur);
    });

    socket.on('disconnect', function(utilisateur)
    {
        console.log('utilisateur quitte');
        console.log(utilisateur.id);
        delete utilisateurs[utilisateur.id];
        console.log(utilisateurs);
        io.sockets.emit('deconnection', utilisateur);
    });
});

server.listen(8888);


Mon fichier client.js

$(function()
{
	var socket = io.connect('http://localhost:8888');

	$('#connection').submit(function(event)
	{
		event.preventDefault();
		socket.emit('login', {
			prenom : $('#prenom').val(),
			genre  : $('#genre').val()
		});
	});

	socket.on('connecter', function()
	{
		$('#lightbox').fadeOut();
		$('#connection').fadeOut();
	});

	socket.on('nouveau_utilisateur', function(utilisateur)
	{
		console.log(utilisateur);
		$('aside ul').append('<li id="' + utilisateur.id + '"><img src="./image/' + utilisateur.genre + '.png"><p>' + utilisateur.prenom + '</p></li>');
		
	});

	socket.on('deconnection', function(utilisateur)
	{
		console.log(utilisateur);
		$('#' + utilisateur.id).remove();
	});


});

Mon fichier index.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>Liste à faire</title>
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="icon" type="image/png" href="image/mafavicon.png" />
		<link rel="stylesheet" href="css/style.css">
		<script type="text/javascript" src="js/browser-update.js"></script>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="http://localhost:8888/socket.io/socket.io.js"></script>
		<script type="text/javascript" src="js/client.js"></script>
	</head>
	<body>
		<div id="lightbox"></div>
		<div id="connection">
			<form>
				<p>Veulliez-vous identifier</p>
				<input id="prenom" type="text" name="prenom" autofocus required placeholder="Votre prénom" size="15">
				<input id="genre" type="text" name="genre" required placeholder="Votre genre" size="15">
				<!--<select name="sexe" required>
					<option>Votre genre</option>
					<option value="homme">Homme</option>
					<option value="femme">Femme</option>
				</select>-->
				<input type="submit" value="Enregister !!">
			</form>
		</div>
		<section>
			<aside>
				<div>Liste de connectées</div>
				<ul>
					<!--<li><img src="./image/homme.png"><p>Stéphane</p></li>
					<li><img src="./image/femme.png"><p>Mélodie	</p></li>-->
				</ul>
			</aside>
			<div id="espace"></div>
			<article>
				<div>Liste des choses à faire</div>
				<ul>
					<li>
						<img src="./image/supprimer.png" alt="	Supprimer" title="Supprimer">
						<img src="./image/modifier.png" alt="Modifier" title="Modifier">
						<img src="./image/valider.png" alt="Fait" title="Fait">
						<p>Acheter du paim</p>
					</li>
					<li>
						<img src="./image/supprimer.png" alt="	Supprimer" title="Supprimer">
						<img src="./image/modifier.png" alt="Modifier" title="Modifier">
						<img src="./image/valider.png" alt="Fait" title="Fait">
						<p>Payer la fecture EDF</p>
					</li>
				</ul>
			</article>
		</section>
	</body>
</html>




  • Partager sur Facebook
  • Partager sur Twitter
La vérité est ailleurs !!
5 août 2014 à 14:25:34

@stephane7393 (de la part d'un bleu en JS et node.)

Est ce un devoir à rendre ce soir ? Parce que si on doit régler ce pb fissa ... espérons qu'il y a un bon dans le coin ... :p

si on reprend l'énoncé et qu'on doit faire l'éxo en urgence :

  • Quand un client se connecte, il récupère la dernière Todolist connue du serveur : Perso j'ai réglé de telle sorte que le client ai accès a une page dynamique (hé oui quand on consulte une page web on devient client de ce serveur)
il ne te reste plus qu'à te préoccuper de :
  • Quand un client ajoute une tâche, celle-ci est immédiatement répercutée chez les autres clients .
  • Quand un client supprime une tâche, celle-ci est immédiatement supprimée chez les autres clients.

voila un exo un peu plus simplifié ce qu'il te préoccuper c'est que le client récupéré la todolist qui est déjà remplis et la répercuter

____

Perso moi ça bloque sur la récupération de la "liste de tache" déjà existant (puis sur certains bonus d'un code d'un tp que j'ai suivi point par point ici).

voici mon code de ma todolist: (je vous fait grace du css il n'y a cas pomper le code principal sur  le tuto)

html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <link rel="stylesheet" href="style.css">
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>
    <body ng-app="todo">

      <section id="todoapp" ng-controller="TodoCtrl">
        <header id="header">
          <h1>TodoList</h1>
          <form id="todo-form" ng-submit="addTodo()">
            <input type="text" id="new-todo" placeholder="Ajouter une Nouvelle tâche" autofocus autocomplete="off" ng-model="newtodo">
          </form>
        </header>

        <section id="main">
          <input type="checkbox" id="toggle-all" ng-model="allchecked" ng-click="checkAllTodo(allchecked)">
          <ul id="todo-list">
            <li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed : todo.completed, editing: todo.editing}" ng-dblclick="todo.editing = true">
              <div class="view">
                <input type="checkbox" class="toggle" ng-model="todo.completed">
                <label>{{todo.name}}</label>
                <button class="destroy" ng-click="removeTodo($index)"></button>
              </div>
              <form action="#">
                <input class="edit" ng-model="todo.name" ng-blur="editTodo(todo)">
              </form>
            </li>
          </ul>
        </section>

        <footer id="footer">
          <span id="todo-count"><strong>{{remaining}}</strong> Tâches restantes</span>
          <ul id="filters">
            <li><a href="#/" ng-class="{selected: location.path() == '/'}">Toutes</a></li>
            <li><a href="#/active" ng-class="{selected: location.path() == '/active'}">Active</a></li>
            <li><a href="#/done" ng-class="{selected: location.path() == '/done'}">Finit</a></li>
          </ul>
        </footer>

      </section>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
      <script type="text/javascript" src="app.js"></script>
	  <script src="/socket.io/socket.io.js"></script>
    </body>
</html>

app.js :

var app = angular.module('todo', []);

app.directive('ngBlur', function(){
	return function(scope, elem, attrs){
		elem.bind('blur', function(){
			scope.$apply(attrs.ngBlur);
		})
	}
})



app.controller('TodoCtrl', function($scope, filterFilter, $http, $location){
	$scope.todos = [];
	
				var host = location.origin;
				var socket = io.connect(host);
					
				// mise a jour des ajouts
				socket.on('name', function(name){
		  			$scope.todos.push({name : name, completed : false});
		  			$scope.$apply();
		  		});
	
				// mise a jour des suppressions
				socket.on('clear', function(idx){
		  			$scope.todos.splice(idx,1);
		  			$scope.$apply();
		  		});

	// actions filtres
	$scope.$watch('todos', function(){
		$scope.remaining = filterFilter($scope.todos, {completed:false}).length;
		$scope.allchecked = !$scope.remaining;
	}, true)

	// tache fini ou non
	if($location.path() == ''){ $location.path('/')}
	$scope.location = $location;
	$scope.$watch('location.path()', function(path){
		$scope.statusFilter =
			(path == '/active') ? {completed : false} :
			(path == '/done') ? {completed : true} :
			null;
	});

	// ordre de suppression
	$scope.removeTodo = function(index){
		socket.emit('clear',index)
	}
	// ajout tache
	$scope.addTodo = function(){
		
			name = $scope.newtodo;
		socket.emit('name',name)
		$scope.newtodo = '';
		return false;
	}
	// rééditer tache
	$scope.editTodo = function(todo){
		todo.editing = false;
	}
	// sélectionner toutes les taches
	$scope.checkAllTodo = function(allchecked){
		$scope.todos.forEach(function(todo){
			todo.completed = allchecked;
		})
	}

});

serveur.js :

var express = require('express')
  , app = express()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);

app.use(express.static(__dirname + '/'));



server.listen(8080);

var name ='',index = '';

io.sockets.on('connection', function (socket) {
  socket.emit('name', name);
  socket.on('name', function(name){
  	io.sockets.emit('name', name);
  })

  socket.emit('clear', index);
  console.log(index);
  socket.on('clear', function(idx){
  	io.sockets.emit('clear', index);
  })
});

ce qui marche sur ce code (testé simultanément sur 2 navigateur différent):

  • mise a jours des nouvelles taches
  • suppression des taches

ce qui ne marche pas :

  • "l'historique" des taches existant ( le client qui vient de se connecter ne récupéré pas la liste)
  • les taches exécute doivent être cochées(c'est du bonus je ne le demande pas mais si toute fois...)
  • les taches exécute peuvent tous être cochées en une fois(c'est du bonus je ne le demande pas mais si toute fois...)

en fait la ou je bloque c'est surtout sur le transfert d'un array par  socket. io qui se trouverait dans serveur (j'y travaille, mais je trouve pas d'infos pour le moment sur le net ...)

Merci pour ceux qui pourront m'apporter une petite info (je dois rendre l'éxo au plus tard ce soir :p)

______

petit oublie , le json :

{
  "name": "TP todolist OC ",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "express": "3.x",
    "socket.io": "0.9.14"
  }
}

______

dernier essais :

serveur.js :

var express = require('express')
  , app = express()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);

app.use(express.static(__dirname + '/'));



server.listen(8080);

var name ='', index = '', todos = [], todoInfo, option;



io.sockets.on('connection', function (socket) {

function todoBroadcast(todoInfo,options){
	console.log(todoInfo,option);
		switch(options) {
			case 'todo':
				todos.push({name : todoInfo, completed : false});
				
			break;
			case 'clear':
				todos.splice(todoInfo,1);
			break;
			} 
	socket.on('todo', function(todos){
	io.sockets.emit('todo', todos);
	})
}

  socket.emit('todo', todos);
  todoBroadcast(todos,'todo')
  

  socket.emit('clear', index);
  todoBroadcast(index,'clear')
  
});



et app.js :

// mise a jour des ajouts
socket.on('todos', function(todos){
     $scope.todos = todos
});


en lieu et place de :

// mise a jour des ajouts
socket.on('name', function(name){
    $scope.todos.push({name : name, completed : false});
    $scope.$apply();
});
	
// mise a jour des suppressions
socket.on('clear', function(idx){
    $scope.todos.splice(idx,1);
    $scope.$apply();
});





-
Edité par CQEadsurf 5 août 2014 à 16:16:12

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
5 août 2014 à 16:17:12

De retour, j'ai trouvé pourquoi sa ne marché pas même si je comprend pas pourquoi

Le fichier serveur.js

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var ent = require('ent');
var fs = require('fs');
var php = require('phpjs');

app.use(express.static(__dirname + '/'));

app.get('/', function(req, res)
{
	res.sendfile(__dirname + '/index.html');
});

var utilisateurs = {};

io.sockets.on('connection', function(socket)
{
    var me = false;
    var id = php.uniqid();
    console.log('nouveau utilisateur');

    for(var k in utilisateurs)
    {
        socket.emit('nouveau_utilisateur', utilisateurs[k]);
    }

    socket.on('login', function(utilisateur)
    {
        me = utilisateur;
        me.prenom = php.ucfirst(utilisateur.prenom);
        me.id = id;
        console.log(me);
        socket.emit('connecter');
        utilisateurs[me.id] = me;
        console.log(utilisateurs);
        io.sockets.emit('nouveau_utilisateur', me);
    });

    socket.on('disconnect', function()
    {
        if(!me) {return false;}
        delete utilisateurs[me.id];
        console.log(utilisateurs);
        io.sockets.emit('deconnection', me);
    });
});

server.listen(8888);



-
Edité par stephane7393 5 août 2014 à 16:17:37

  • Partager sur Facebook
  • Partager sur Twitter
La vérité est ailleurs !!
5 août 2014 à 17:30:23

Hello Stéphane7393,

Un indice pour t'expliquer pourquoi ton dernier cas fonctionne ?

La portée de ta variable est importante... 

"me" est définie au niveau "connection" => accessible par "login" et "disconnect".

De fait, ton cas 2 fonctionnera car tu spécifies que ta variable "me" = "utilisateur" passé par ton client.js

    $('#connection').submit(function(event)
    {
        event.preventDefault();
        socket.emit('login', {
            prenom : $('#prenom').val(),
            genre  : $('#genre').val()
        });
    });

"utilisateur" est donc ton couple prenom/genre.

Dans ton premier cas, tu avais une variable "utilisateur" au niveau login qui n'est pas la variable "utilisateur" au niveau "connection".

Si jamais je ne suis pas clair, je t'invite à revoir la partie "portée de variable" en JS... je suis sûr que le cours en parle :)

Je repasserai plus tard pour voir les autres posts et si je peux aider ;)

  • Partager sur Facebook
  • Partager sur Twitter
Apprendre peut être long et difficile, mais abandonner n'accélère certainement pas le processus.
5 août 2014 à 18:23:32

(bon heureusement j'ai sauvegardé la todolist avant de me plonger sur la transmission des array par socket.io)

j'ai beau tourner dans tout les sens mon problème je n'arrive pas a passer mon array à travers socket.io ...

[...partie tronquée vu que ça m'a mené à rien...]

______

je fais p-e fausse route a vouloir faire passer un array dans socket io... je crois que je vais repartir sur la première idée faire une boucle  pour renvoyer morceau par morceau mon tableau ...

______

ca y est j'ai résolu (partiellement) mon problème de  récupération la dernière Todolist connue du serveur... j'ai envoyé mon exo a la dernière minute:p. il y a juste un bug graphique que je ne peut expliquer a la fin de la todolist... j'ai ouvert un autre sujet pour ne pas polluer ces pages car ca devient hors sujet.... pour ceux que ca intéresse

-
Edité par CQEadsurf 6 août 2014 à 8:17:46

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
6 août 2014 à 1:36:04

**Message à supprimer, j'ai fait un nouveau sujet sur le forum**

-
Edité par jbltx 6 août 2014 à 1:50:23

  • Partager sur Facebook
  • Partager sur Twitter
6 août 2014 à 8:46:46

Bon j'ai regardé la correction je n'ai pas a rougir de mon code:p

Par contre mateo a fait bien passer l'array par socket.io ...:colere:on a même l'impression qu'il n'a pas eu de difficulté à le faire passer...:'( (c'est p-e qu'il n'a pas d'objet dedans ....)

-
Edité par CQEadsurf 6 août 2014 à 10:33:38

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
10 août 2014 à 22:54:57

Ma 3eme note peine à arriver... :euh:  ...je pense que je l'aurais une fois que les gens seront rentré des vacances et qu'ils seront à leur 3eme semaine :p vivement septembre ! perso j'ai presque fini l'autocorrection de ma todolist socket.io & angular.js...

-
Edité par CQEadsurf 10 août 2014 à 23:00:54

  • Partager sur Facebook
  • Partager sur Twitter
L’éternel débutant...
12 août 2014 à 15:38:02

Bonjour,

Je suis débutant en node.js et j'ai un problème pour la todolist.

//import des bibliothèques
var express = require("express");
var app = express();
var cookieParser = require("cookie-parser");
var bodyParser = require("body-parser");
var cookieSession = require("cookie-session");
var session = require("express-session");

//on utilise les cookies, les sessions et les formulaires
app.use(cookieParser())
.use(session({secret: "topsecret", saveUninitialized: true, resave: true }))
.use(bodyParser.json())

//si il n'y a pas de todo_list dans la session, on en créé une vide sous forme d'un array avant la suite
.use(function(res, req, next){
	//si le tableau todolist n'existe pas
	if(typeof(req.session.todolist) == "undefined"){
		req.session.todolist = [];
	}
	next();
})

J'ai bien fait tous les "npm install ..." mais j'ai l'erreur suivante: TypeError: Cannot read property 'todolist' of undefined

J'ai tenté pas mal de trucs mais je suis toujours bloque :/

Merci d'avance :)

  • Partager sur Facebook
  • Partager sur Twitter

Cours Node.js : c'est parti !

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown