[Résolu] Envoyer des données entre 2 pages web

Bonjour à tous !

Mon retour dans la programmation Je n'avais jamais touché au javascript jusqu'à lundi et je découvre chaque jours !

J'en appelle à vous pour éviter de tourner en rond sur un besoin que j'ai...

L'histoire :
J'ai créé une petite appli html/css et JS pour afficher un scoreboard de matches de badminton qui ressemble à la photo suivante:

index.html:


Je voudrais faire une page supplémentaire qui ne contient que ce cadre. J'ouvre OBS, navigateur, et j'incruste le fichier HTML contenant uniquement le cadre de score. Ce qui donne une organisation comme suit:


OBS comprends bien et affiche bien affichage.obs.html
l'affichage sur index.html est parfait.

La où je coince, c'est la mise à jours de données entre le fichier HTML "index" et le fichier html d'affichage utilisé par OBS: Avez-vous des idées ?

Particularité : Je ne veux pas utiliser de PHP ou autre: Le système final doit être autonome (je veux pouvoir l'envoyer à n'importe qui sans avoir à installer un serveur local etc...).
En revanche, l'utilisation étant uniquement local, les deux fichiers se trouvent au même endroit et je peux en faire ce que je veux...

J'ai testé localStorage, qui me donne actuellement le meilleur résultat: les données passent bien d'un fichier à l'autre. En revanche je n'ai pas encore testé via obs et le fait que ce ne soit pas le même navigateur risque de faire planter ce moyens.

J'ai aussi tenté les cookie, sans résultat pour le moment,
J'ai aussi tenté la lecture/ecriture via js, mais sans résultat non plus pour le moment...

J'espère avoir été assez clair et que vous aurez des pistes pour moi

Vincent

Salut !

Tu peux te renseigner sur Socket.io. C'est une librairie JS, mais il faut un serveur NodeJS. Après il y a des alternatives (t'utilises PHP), en recherchant Socket IO pour PHP je trouve pas mal de résultats.

PS : Ce n'est seulement que des recherches très rapides que j'ai faites sur Socket IO avec PHP.

Salut !

Merci pour ton retour.

Le problème du PHP, ou NodeJS, c'est qu'il faut un serveur. Et que le fichier ne devient plus vraiment autonome s'il faut installer un serveur avant de l'utiliser...

J'ai testé les localStorage, qui est ce qui fait exactement ce que je veux... sauf sur OBS A priori, la version MAC d'OBS ne supporte pas les localStorage... (Tout fonctionne bien sur chrome...).

Vous pensez que jQuery et Ajax peuvent m'aider?

Vincent

Bonjour,

j'ai pas bien compris pourquoi il te faut 2 fichiers différents ?

Vbpix a écrit :
Salut !

Merci pour ton retour.

Le problème du PHP, ou NodeJS, c'est qu'il faut un serveur. Et que le fichier ne devient plus vraiment autonome s'il faut installer un serveur avant de l'utiliser...

J'ai testé les localStorage, qui est ce qui fait exactement ce que je veux... sauf sur OBS A priori, la version MAC d'OBS ne supporte pas les localStorage... (Tout fonctionne bien sur chrome...).

Vous pensez que jQuery et Ajax peuvent m'aider?

Vincent

Sinon y'a pas vraiment d'alternative... Il faut un serveur pour ce que tu veux faire. Les deux clients doivent communiquer avec quelque chose pour qu'ils soient synchro, leurs données doivent transiter sur un élément : le serveur. Socket IO permet de faire ça mais de façon asynchrone, sans recharger la page, mais en faisant des requêtes tous les X temps, sur le serveur.

En fait, pour diffuser une source sur OBS, j'ai 2 choix:

- Soit diffuser la fenêtre (rognée au niveau et aux dimensions du cadre du score),
- Soit de diffuser une page HTML/css/javascript.

La première solution, je gère (c'est celle que j'utiliserai en l'absence d'autres), mais c'est contraignant pour le rognage, ça utilise du CPU pour rien...

La deuxième solution permet de donner un fichier de 1Ko au logiciel, que tu textes, facilement exploitable et très légé. Le bonus, c'est que ça permet d'afficher des choses transparentes, ce que la recopie de fenêtre de permet pas...

Je pense, dans la deuxième solution et les localstorage, que ce qui me limite, c'est OBS... (Les deux fichiers sont sur le même ordinateur et dans le même dossier et tout fonctionne bien...)

Vincent

Comme dise mes compagnons de routes,
pour faire une "requête" entre deux pas il faut un serveur. c'est tout.

A de moins de faire comme tu fais, stocker les variable en localstorage/sessionStorage.

OU BIEN en GET dans l'url.

Pourquoi ne pas passer par du GET ? des params dans l'url ? l'url est "decryptable" par javascript aussi donc bon...

Je ne peux pas passer par du GET parce qu'il n'y a pas de lien entre les deux fichiers HTML (La flèche pleine dans le schéma de principe du premier post est une erreur de ma part).

Il s'agit clairement de 2 fichiers distincts, sans liens, utilisant des paramètres communs. Sauf que ces paramètres sont variables et doivent être récupérés automatiquement...

Ok, alors LocalStorage et/ou SessionStorage y'a rien de mieux.

bon courage

Salut,

Je ne sais pas ce que c'est "OBS" comme navigateur web, mais je ne suis pas du tout sur que les LocalStorage/SessionStorage soient partagés d'un navigateur web (Chrome) à un autre (OBS), de base j'aurai même plutôt tendance à être sur de l'inverse, il faudra que je test à l'occasion, mais cela ne m'a pas du tout l'air d'être une solution

Il n'y a pas la possibilité de simplement faire un CSS différent selon que l'on utilise le navigateur web Chrome ou OBS ?

EDIT : Non en fait ça ne change rien au problème, ça n'affichera pas les modifications des données ..
Modifié par Mathieuu (12 Jun 2019 - 12:09)

Qu'on soit bien d'accord.

LocalStorage et/ou SessionStorage fonctionne uniquement au sein d'un même navigateur.

Salut !

Merci pour vos réponses.

Pour l'info Mathieuu, OBS est un logiciel de diffusion vidéo (très très connu des youtubers). En gros, il te permet de faire ta chaine de TV et de diffuser sur YouTube/Twitch/Facebook... en direct.

Ce petit système permet d'intégrer un fichier HTML, interpreté par OBS.

Sur leur site officiel, il semble que cela devrait fonctionner, car a priori ils y arrivent sur une version PC. Je pense que sur la version PC, potentiellement, le logiciel utilise le navigateur par défaut pour émuler la page web: Ce qui collerai au fait que cela fonctionne sur windows et que ce soit la version mac (moins aboutie) qui soit limitée.

Vincent