APPLICATION TEMPS RÉEL (CHAT) - WEBSOCKET (SOCKET.IO)
HTML-код
- Опубликовано: 29 янв 2019
- Application chat temps réel avec socket.io (websocket) et node js.
📩 TÉLÉCHARGE LE KIT DU SUCCÈS DÉVELOPPEUR :
go.mikecodeur.com/recevoir-ki...
🛠 Fichiers du tuto ici : bit.ly/tuto-files
👉 Petit questionnaire pour 2019 : frenchmike.typeform.com/to/sQ...
💻 S'abonner : bit.ly/2nzkDF9
👍 RESTONS EN CONTACT
Si tu ne me suis que sur RUclips, tu rates des choses.
► CONTACT PRIVÉS : codeur-nomade.com/contactmike
► PODCAST : www.codeur-nomade.com/podcast
► PODCAST : www.codeur-nomade.com/soundcloud
► FACEBOOK : MikeCodeur
► INSTAGRAM : / mikecodeur
► GROUPE FACEBOOK : bit.ly/2Jx279F
► DISCORD : bit.ly/discord-codeur
► TWITTER : / mikecodeur
► BLOG : www.codeur-nomade.com
► FORMATIONS : school.frenchmike.com
💻 S'abonner : ruclips.net/user/MikeCodeurN...
💬 Posez une question : frenchmike.typeform.com/to/Bv...
___
😼 QUI EST MIKE CODEUR ?
Ingénieur informatique en Freelance, j'ai décidé de changer de vie, vivre de mes vidéos, et voyager.
Je parle de code, de Freelance,, de business en ligne, de liberté et de voyage.
Mes conseils sont basés sur mon expérience.
Abonne-toi maintenant pour faire parti de l’aventure.
Et surtout, CODE ! ✊ 
Наука
Tuto très sympa, qui explique tout de manière très claire en moins d'une demi-heure, sans blabla!
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 !
Top !
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.
443 pour https et il n'existe pas de port "ssl" à proprement parler
Oups le vilain nul qui a fait une erreur en disant un raccourci. Colle nous la rfc en details sur https
Cependant je corrige sans dénigrer ton travail, ne soit pas tant sur la défensive mon ami
@@MikeCodeur_ je ne pense pas qu'il voulait être condescendant ;)
Super vidéo merci, je ne connaissais pas
De rien 😉
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
On simplifie mon ami
salut est ce que tu peux mettre le style css en def stp
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 !
👍
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...
Top merci!
Impeccable, merci
👍
Merci beaucoup pour cette vidéo très interessante
🙏
génial, merci :3
👍
ça s'utilise en Freelance ?
Merci beaucoup pour le tuto
👍
au passage super tuto
🙏
super video 👏👏👏
🙏
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
A bon?
Merci
🙏
ta chaine est un tresor mec
Thanks
bonjour j'ai pas le MINGW64 pour interpréter les commandes, est ce que je peut travailler avec le cmd ?
Oui ça devrait passer
bonjour pe on fair sens avoir a telecharger des fichier ? just en code ?
Ui
simple et efficae!
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 ?
Humm …
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...)
Si tu installes ton app sur un hebergeur c ok.
@@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é 😅
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
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
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
Comme ds le tuto
*Tu testes quand ?*
super
🙏
Rien appris de plus que dans le get started de la doc officielle
Alors pkoi tu mattes va lire la doc
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
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.
Merci pr la suggestion
@@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"
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]
Bizar
Le bon compromis c'est le SSE aka server side events.
Yes
Ç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
C pas le plus optimisé
@@MikeCodeur_ En tout cas merci je suis très content d'enfin savoir faire des applications web en temps réel
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.
T'expliques troooop bien Mike g adoré
ou se trouve la différence de websoket et ajax?
Ajax c’est toujours le client qui appelle le serveur. Websocket le serveur notifie le client
@@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 ?
Le tuto n'est pas mal mais une petite correction, le port SSL n'est 447 mais 443 :)
A ui merci pr la correction
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.
comment puis je envoyer un fichier ??
Google php upload file ou node js upload file
@@MikeCodeur_ je veux envoyer un fichier entre 2 utilisateurs en utilisant node et angular
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
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
Mais comment on lance ça sur un serveur prépayé ?
Il faut un serveur node
Je croyais que Express.js était un serveur JavaScript, une alternative à nodejs
Express fonctionne avec node
Mike / Codeur Nomade J'ai vérifié. Merci
Si vous auriez agrandie le terminale ca auré ete bcp plus a laise a suivre.mrc en tous cas
Destruction du clavier
Lol
@@MikeCodeur_ mdr très bonne vidéo sinon 😉
tu ressemble à tom hanks
Mdr