APPLICATION TEMPS RÉEL (CHAT) - WEBSOCKET (SOCKET.IO)

[@ju44tification]

Tuto très sympa, qui explique tout de manière très claire en moins d'une demi-heure, sans blabla!

[@Trinita1970]

Vraiment génial ce tuto ! J'adore quand on se concentre sur l'essentiel ; ça permet de comprendre les bases avant de se lancer dans un vrai projet. Merci !

[@MikeCodeur_]

Top !

[@juleserbin4070]

Je suis mitigé sur cette vidéo, toi qui est fullstack c'est bien d'aider les autres en faisant des tutoriels maisons. Personne n'a le code parfait, mais en tant que dev' front, pour éviter certains malentendus, la déclaration des car devrai plutôt se faire via un const ou un let plutôt que var (useless depuis ES6...) Et la déclaration de fonction devrai plutôt se faire en arrow fonction. Histoire de ne pas faire coder les nouveaux avec des principes JS plutôt vieillissant Sinon c'good

[@MikeCodeur_]

On simplifie mon ami

[@bilelhousni9723]

Une simple question, quel est l'intérêt d'utiliser le module Express qui est un serveur http et d'utiliser le module http en parallèle.

[@misterpoof3197]

ta chaine est un tresor mec

[@MikeCodeur_]

Thanks

[@the-code-provider]

Salut à toi Mike, merci pour ce tutorial mais je vais être plus complet sur une problématique rencontrée lorsque je l'ai suivi : L'inclusion des ressources comme des fichiers CSS par exemple, car toi, tu as utilisé directement une balise sur ta page HTML mais si tu procèdes comme sur ta vidéo pour afficher une page HTML qui appelle elle-même un fichier CSS externe, tu vas être embêté avec un florilège d'erreurs difficiles à déceler. C'est pour cela que je poste ici la manière de faire en sorte que les fichiers CSS soient appelés par la page "index.html" appelée elle-même par la méthode GET : Appeler une seconde déclaration de variable pour 'express' sans parenthèses, en dessous de la var app, comme suit : var app = require("express")(); var express = require("express"); Déclarer juste en dessous également un système de pathing, en faisant un require("path"), comme suit : var path = require("path"); Créer un dossier "public" à la racine de son projet dans le quel on mettra ses fichiers CSS, images etc ( ou même plein d'autres sous dossiers, aucun problème ). Y faire référence avec ce dernier appel ( avant le app.get ) : app.use(express.static(path.join(__dirname, 'public'))); Lorsque vous lancerez votre page index.html sur votre localhost:3000 après avoir lancé votre serveur Node, elle ira chercher automatiquement vos fichiers CSS ( que vous aurez déclaré dans votre index.html, évidemment, mais SANS RAJOUTER le "public/" dans votre href ! ) En gros, voici un petit code complet qui fonctionne : var app = require("express")(); var express = require("express"); var http = require("http").Server(app); var io = require("socket.io")(http); var path = require("path"); app.use(express.static(path.join(__dirname, 'public'))); app.get("/", function(request, response){ response.sendFile(__dirname + "/index.html"); }); http.listen(3000, function(){ console.log("Server running."); }); J'espère avoir été utile !

[@MikeCodeur_]

👍

[@florianblanc9916]

443 pour https et il n'existe pas de port "ssl" à proprement parler

[@MikeCodeur_]

Oups le vilain nul qui a fait une erreur en disant un raccourci. Colle nous la rfc en details sur https

[@florianblanc9916]

Cependant je corrige sans dénigrer ton travail, ne soit pas tant sur la défensive mon ami

[@AntoineViallonDevelloper]

@@MikeCodeur_ je ne pense pas qu'il voulait être condescendant ;)

[@vianney_fpv]

bonjour mike le fichier que tu as partagez dans la description de ta video ne marche pas (je parle du lien de "🛠 Fichiers du tuto") peut me redonner le lien de téléchargement merci beaucoup d'avance

[@MikeCodeur_]

A bon?

[@motivationsquotidiennes53]

Bonjour ingénieur, Merci d'abord pour les vidéos instructives et HD, Est-ce possible d'utiliser le websockets pour faire une application web de géolocalisation à temps réel ? #Merci

[@MikeCodeur_]

👌

[@sxelina]

bonjour pe on fair sens avoir a telecharger des fichier ? just en code ?

[@MikeCodeur_]

Ui

[@MathisBarres]

salut est ce que tu peux mettre le style css en def stp

[@zainebkhlifi3680]

bonjour j'ai pas le MINGW64 pour interpréter les commandes, est ce que je peut travailler avec le cmd ?

[@MikeCodeur_]

Oui ça devrait passer

[@dr_lunastra]

Salut ! Optes plûtot pour const quand tu déclares une variable si tu ne penses pas changer sa valeur c'est préférable pour éviter d'écraser des variables utiles sans le vouloir en plus de ça, une constante n'est limité que dans le bloc où il est déclaré, dans un scop en particulier à la différence de var. let est identique à const sauf qu'on peut réécrire une variable en let

[@MikeCodeur_]

Merci mais ce n’est pas le but d’embrouiller les gens avec un nouveau mot clef, on fait simple ceux qui veulent adapter. Adaptent

[@arsworld]

1er test de websocket que j'arrive à faire fonctionner en local. Par contre si on up tout le dossier, comment on fait fonctionner ça online ?

[@MikeCodeur_]

Humm …

[@unguestdev2846]

Perso j'ai une page qui se rafraîchit avec le message en get. Le backend prend bien le message en compte mais du coup on 'recherge à chaque fois...

[@motivationsquotidiennes53]

Bonjour dev, Comment ça marche ?

[@lucas_hubert]

Super vidéo merci, je ne connaissais pas

[@MikeCodeur_]

De rien 😉

[@airsoftaveugle]

Hello. Petite remarque, dans la partie code tu fait beaucoup d'éléments genre: "ça ici, le truc la, et hop" ça pose un souci pour tes spectateurs qui ne peuvent voir l'écran. Par exemple les dev non voyant comme moi, qui du coup ne pouvons pas reelement suivre tout ce que tu fait.

[@MikeCodeur_]

Merci pr la suggestion

[@airsoftaveugle]

@@MikeCodeur_ je sais bien que c'est pas évident à penser, enfin voilà, c'est top pour nous, parce que j'ai déjà eu le cas où j'avais un bug sur un framework PHP, j'ai chercher la réponse pendant genre 16 heures à trouver que des vidéos avec de la musique et personne qui parle, à la fin je tombe sur un vidéaste qui parle, lis le message d'erreur, bingo on a le même, il dit que c'est pas grave qu'il suffis d'une petite manip et hop, (donc re bingo), sauf qu'il fait: "bon bah dans se fichier vous tapez ça comme ça, *bruit de clavier... La ligne la, c'est ça, avec ça, et hop ! Ça remarche !" (Depuis j'ai refuser tout net de retoucher se framework lol) Pour plus d'info sur l'accessibilitee j'ai fait une vidéo sur ma chaîne "#a11y"

[@Khaly_ahmad]

Vraiment merci beaucoup

[@MikeCodeur_]

De rien, bonne chance pour ton projet.

[@lamiamezai1060]

Merci beaucoup pour cette vidéo très interessante

[@MikeCodeur_]

🙏

[@moiseotuka2318]

ou se trouve la différence de websoket et ajax?

[@MikeCodeur_]

Ajax c’est toujours le client qui appelle le serveur. Websocket le serveur notifie le client

[@moiseotuka2318]

@@MikeCodeur_ merci, est ce que il existe une possibilité que le message que le serveur notifie le client ne soit pas diffuser pour tout les clients ?

[@Alexarr]

Salut, super tuto, tout fonctionne correctement sur un seul appareil mais des que j'essaye d'utiliser un autre toute la partie serveur ne fonctionne pas et j'ai que l'html... [les autres appareils sont sur le meme reseau wifi que le serveur]

[@MikeCodeur_]

Bizar

[@hardjojo7852]

Rien appris de plus que dans le get started de la doc officielle

[@MikeCodeur_]

Alors pkoi tu mattes va lire la doc

[@hardjojo7852]

Pour pointer du doigt que tu copie colle le tuto le plus simple de la doc sans rien expliquer de plus , tu ne prends pas de risque , t essaie pas d approfondir, je me demande a quoi sert ta vidéo a part a générer du trafique sur ta chaîne. C'est médiocre et ça fait pas avancer le monde

[@MikeCodeur_]

*Tu testes quand ?*

[@goffeur868]

Salut Merci pour le tuto. Néanmoins j'ai une question : si on voulait coder un appli de chat comme WhatsApp par exemple , comment devrait on se prendre pour faire communiquer plusieurs machines à distance .. merci

[@MikeCodeur_]

Comme ds le tuto

[@yesicdi4134]

T'expliques troooop bien Mike g adoré

[@rosalyna_24]

comment puis je envoyer un fichier ??

[@MikeCodeur_]

Google php upload file ou node js upload file

[@rosalyna_24]

@@MikeCodeur_ je veux envoyer un fichier entre 2 utilisateurs en utilisant node et angular

[@nayldev9185]

Ça se fait souvent quand même de d'appeler le serveur toutes les secondes ? En tout cas c'est ce que j'ai fait à chaque fois jusqu'ici

[@MikeCodeur_]

C pas le plus optimisé

[@nayldev9185]

@@MikeCodeur_ En tout cas merci je suis très content d'enfin savoir faire des applications web en temps réel

[@BeyondAppearances-0]

Tu consommes inutilement de la bande passante, et risque de saturer ton serveur de requêtes inutiles(dans le monde réel), c'est comme si tu allais vérifier ta boîte aux lettres toutes les x secondes pour savoir si t'as reçu du courrier, au lieu d'attendre de recevoir une notification qui te dira quand tu en auras reçu. C'est le principe de l'abonnement : observable / observateurS qui est sous-jacent.

[@adriendarraillan9817]

Super vidéo merci ! Par contre j'ai une petite question : Est-ce qu'il est possible de lancer le server 'node server.js' autrement que manuellement par le terminal ? J'aimerai utiliser cette méthode pour faire un site, et éviter le lancement manuel à chaque fois... (en fait c'est pour un projet et je peux pas utiliser de bdd...)

[@MikeCodeur_]

Si tu installes ton app sur un hebergeur c ok.

[@adriendarraillan9817]

@@MikeCodeur_ ok merci beaucoup ! Juste une dernière question, est-ce que tu as fais une vidéo sur ce style de tchat, juste avec ajzx, jquery mais toujours sans bdd ? J'ai cherché sur ta chaîne et je n'ai pas trouvé 😅

[@MariusSchwendtmayer]

Le bon compromis c'est le SSE aka server side events.

[@MikeCodeur_]

Yes

[@franckdiomande1394]

Le tuto n'est pas mal mais une petite correction, le port SSL n'est 447 mais 443 :)

[@MikeCodeur_]

A ui merci pr la correction

[@jacquesp6574]

Selon l’IANA 443 c’est pas le port ssl mais HTTPS. O_o Parce que ssl est aussi utilisé par SSH, FTPS où encore WSS (Secure Web Socket)... Mais d’ailleurs aujourd’hui c’est plutôt TLS.

[@pierrel4063]

ça s'utilise en Freelance ?

[@vianney_fpv]

au passage super tuto

[@MikeCodeur_]

🙏

[@faridLatrich]

super video 👏👏👏

[@MikeCodeur_]

🙏

[@djcolmere]

génial, merci :3

[@MikeCodeur_]

👍

[@fredygangbo]

Top merci!

[@smartwolf9045]

Impeccable, merci

[@MikeCodeur_]

👍

[@jkstimulation4112]

simple et efficae!

[@ninam7749]

Merci

[@MikeCodeur_]

🙏

[@StEvUgnIn]

Je croyais que Express.js était un serveur JavaScript, une alternative à nodejs

[@MikeCodeur_]

Express fonctionne avec node

[@StEvUgnIn]

Mike / Codeur Nomade J'ai vérifié. Merci

[@BarbeRousseTv]

Mais comment on lance ça sur un serveur prépayé ?

[@MikeCodeur_]

Il faut un serveur node

[@lorenzo7098]

Bonjour mike, merci pour ton tuto c'est super encore une fois :D je voulais savoir si c'était obligatoire d'utiliser node.js..? J'ai un serveur en ligne, ou j'ai codé un jeu pokémon en JS, et là je voudrais afficher mes joueurs en temps réel, seulement je ne sais pas utiliser node.js ni comment l'installer sur un serveur, surtout que je sais que l'utiliser via winScp, je voudrais pas m'imposer de contrainte, et trouver une manière assez rapide d'utiiser le websocket, en commencant déja par faire un petit tchat, jusque la je trouve ça simple d'en faire, en tout cas sans webscocket, donc avec le refresh :p, est il donc possible de faire du websocket sans node, si oui comment , et as tu un petite vidéo ou autre pour le faire rapidement ? Merci en tout cas :p

[@MikeCodeur_]

Il y a d’autre implémentation côté serveur pour traiter du we socket. Java etc mais je ne connais pas. Dans tout les cas il te faut un serveur

[@59140Dunkerque]

super

[@MikeCodeur_]

🙏

[@lieutneautnacer]

Si vous auriez agrandie le terminale ca auré ete bcp plus a laise a suivre.mrc en tous cas

[@angrybonobro8711]

Destruction du clavier

[@MikeCodeur_]

Lol

[@angrybonobro8711]

@@MikeCodeur_ mdr très bonne vidéo sinon 😉

[@najlaesabir1614]

merci

[@MikeCodeur_]

Avec plaisir