Créer petit intranet en temps réel avec React

Bonjour à tous,

je m'intéresse à React depuis plusieurs mois et je suis toujours dans le lent apprentissage de cette technologie compliquée..

La plupart du temps nous avons 2 contextes d'exécution, dans les ressources (tuto et autres) qui sont disponibles.
- soit bricoler sur son Pc en circuit fermé, avec live reload ou les fonctionnalités dev de create-react-app, etc... pour faire tourner son application
- soit transporter ses fichier sur des sites spécialisés qui font tourner notre appli en lui assignant une url (et on ne maitrise plus les fichiers et les données)

Moi je voudrais faire ceci:
- un appli qui tourne sur un petit intranet, par exemple à l'intérieur d'une entreprise avec 10 Pcs environ.
- l'appli pourrait être un genre de messagerie, chaque Pc l'exécutant dans le navigateur moderne de son choix avec un compte utilisateur particulier.
- quand un message est envoyé à un utilisateur la notification s'affiche dans le navigateur sans avoir besoin de rafraichir celui ci.

Dans l'éco-système de React, quelles sont les technique et/ou outils qu'il faudrait mettre en œuvre pour faire cela ???

Merci
Modifié par lionel_css3 (27 Oct 2020 - 11:05)

lionel_css3 a écrit :
sans avoir besoin de rafraichir celui ci

Je vais suivre le sujet avec intérêt. En effet, à ma connaissance il n'y a que côté serveur, en particulier avec node.js, que l'on peut faire le rafraîchissement d'une page suite à la création de nouvelles données, en envoyant des notifications côté serveur. Les autres systèmes étant obligés de rafraîchir la page par moment pour contrôler.

C'était d'ailleurs l'une des raisons de la création de node.js : le rafraîchissement côté serveur.

Maintenant, les choses ont peut-être changé depuis. Je ne suis peut-être pas à jour...
Modifié par Olivier C (27 Oct 2020 - 14:17)

Oui, mais justement, React tourne sous node.js

En fait ce qu'il faudrait faire c'est faire tourner l'appli sur un Pc du réseau et pouvoir y acceder depuis n'importe quel poste, mais ça je sais pas faire, pourtant il me semble que c'est un peu la finalité, quelque part??

Bonjour,

Un exemple d'application de "chat" en node.js assez clair (mais en anglais). Tout est détaillé.

https://itnext.io/build-a-group-chat-app-in-30-lines-using-node-js-15bfe7a2417b

Une fois qu'on a mis en place tout le code décrit dans l'article sur le serveur où se trouve node.js (qui peut-être n'importe où), on lance un script js sur le serveur qui en quelque sorte écoute tout ce qui se passe sur le réseau. Dans l'exemple de l'article, via un terminal, on lance la commande :

$ node index.js

Après, on va sur deux autres machines (ou une machine avec 2 navigateurs ouverts, ou encore une machine avec 1 navigateur et 2 fenêtres d'ouvertes ou deux onglets d'ouverts). Et dans les deux onglets ou fenêtres ou navigateurs ou machines, on affiche la page de l'application de "chat". Dans l'exemple, l'url de la page est "http://localhost:8080".

Ensuite, si on tape un message dans l'une des fenêtres, on le voit apparaitre dans l'autre fenêtre. Dans le détail, le texte est envoyé sur le réseau, chopé par l'application qui tourne sous node.js et renvoyé sur les autres pages connectées.

Il existe des exemples où au lieu de node.js, ils utilisent react. Ce sera (probablement) le même principe.

Amicalement,

merci parsimonhi je vais regarder ça avec attention.....

parsimonhi a écrit :
Bonjour,

Un exemple d'application de "chat" en node.js assez clair (mais en anglais). Tout est détaillé.

https://itnext.io/build-a-group-chat-app-in-30-lines-using-node-js-15bfe7a2417b

Dans son exemple il ouvre deux fenêtres de navigateur sur le même PC mais on sait pas trop comment opérer avec des Pcs en réseau puisque chacun a son propre localhost...

Bonjour,

Il faut remplacer localhost par l'ip (ou le nom de domaine) du serveur.

Le index.js ne tourne que sur le serveur.

Les clients n'utilisent qu'un navigateur et se connectent à une page d'un site internet (donc ici le nom de domaine ou l'ip du serveur suivi de :8080 qui est le port qui a été codé dans index.js).

Dans l'exemple, le gars a mis localhost:8080 parce qu'il a testé avec un navigateur qui était sur son serveur.

Amicalement,

Bonjour,

Il te faudra aussi remplacer localhost par l'ip ou le nom de domaine du serveur dans la ligne suivante du fichier index.ejs :

var socket = io.connect('http://localhost:8080');

Amicalement,

Et l'eau,

Exact c'est du nodejs et surtout socket.io. La difficulté que tu vas rencontrer Lionel c'est comment rendre persistent ton système de chat / événement. Ce que je te conseille, tu crées un service au sein de ton serveur via systemd ou init.d (ça va t'éviter une lourde config avec Apache/nginx). De mémoire, dans ta page html, tu vas devoir faire référence à ton serveur avec le port qui va bien (ex : tu as lancé nodejs sur le port 3000).

au passage, on s'en fout de react/vuejs/svlet puisqu'il y a socketio . Si tu ne fais pas de requêtes en base de données/parser des fichiers/etc., j'en vois pas l'intérêt d'utiliser ces outils là. Le plus important est que tu saches gérer tes événements

Au passage, bien que j'ai lu en Z l'article de parsimonhi, le moteur de template ejs, ouais un gros bof ! il y a bien mieux !

Par contre, je ne vois trop ton intérêt à réinventer la roue :
- https://slack.com/intl/fr-fr/
- irc

[ hs ]
edit : perso, j'aurais placé ce sujet dans développement serveur puisque c'est proprement dit du vrai dev serveur (nodejs/socketio/twig-ejs). Le principal étant que Lionel trouve une solution à son souci.
[/ hs ]
Modifié par niuxe (28 Oct 2020 - 00:34)