Bonjour, je viens tout juste de terminer mon chat (améliorations à venir) en localhost et j'aimerais l'héberger donc en cherchant un peu Heroku étant la "meilleure plateforme gratuite", je suis parti la dessus.

Au debut mon backend pour le serveur websocket était en php, mais par manque de compatibilité, j'ai fais avec node js comme ils le prescrivent sur leur site.

Le problème est que je lance mon serveur, avec le terminal à distance, mais je n'arrive pas à me connecter côté client tout comme le php.

J'ai vu qu'il y avait également des cours sur la plateforme sur heroku alors si quelqu'un aurait la gentillesse de m'aider.

Voici mon client.js:

<script src="plugins/socket.io.min.js"></script>
<script>

        /**************************************************** */  
        /*Socket JS*/          
        /**************************************************** */      

        var socket = io("wss://herokuapp.com/"); #j'ai essayé avec et sans rien dans la parenthèse même problème...   

        if (socket.connected) {
            alert("connected")
            socket.emit("connection")
            socket.on('time', function(data) {
            console.log(data)
        });
        } else {
            alert("not connected")
        }
</script>

Serveur.js

'use strict';

const express = require('express');
const socketIO = require('socket.io');

const PORT = process.env.PORT || 1012;
const INDEX = '/index.html';

const server = express()
  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))
  .listen(PORT, () => console.log(`Listening on ${PORT}`));

const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('Client connected');
  socket.on('disconnect', () => console.log('Client disconnected'));
});

setInterval(() => io.emit('time', new Date().toTimeString()), 1000);

Si vous voulez tester en console ce que cela donne, voici le lien: https://xamchat.herokuapp.com/

Merci

-
Edité par MaxMlr 25 octobre 2021 à 16:11:39

J'ai eu aussi de gros soucis avec les websockets chez les hébergeurs. Pour ma part j'ai abandonné ( de toute façon mon projet avait besoin d'une grosse phase de développement que j'ai poursuivi en local ) mais quelqu'un ici sur le forum, ayant eu le même souci, a contacté le support de son hébergeur qui lui a donné la solution.

Ensuite, pas sûr que "wss://" soit requis pour demander la connexion websocket. D'après ce que j'ai cru comprendre ( mais je peux me tromper ) établir une connexion en http est suffisant :

var socket = io("xamchat.herokuapp.com/");

socket.io se charge automatiquement de transformer cette connexion en wss si c'est possible, ou sinon en HTTP "long polling".

-
Edité par LucasWerquin 24 octobre 2021 à 15:05:43

LucasWerquin a écrit:

J'ai eu aussi de gros soucis avec les websockets chez les hébergeurs. Pour ma part j'ai abandonné ( de toute façon mon projet avait besoin d'une grosse phase de développement que j'ai poursuivi en local ) mais quelqu'un ici sur le forum, ayant eu le même souci, a contacté le support de son hébergeur qui lui a donné la solution.

Je vais voir ce que je peux faire de mon côté parce qu'un chat sans websocket, c'est pas terrible 😅.

Merci quand même

Tu m'as répondu pendant que j'éditais mon message, j'y ai ajouté une piste de recherche.
Moi en local c'est simplement const socket = io("192.168.1.58:8080", {withCredentials: true});

L'option withCredentials: true, c'est la seule bidouille que j'ai trouvé pour résoudre un problème de CORS provoqué par le fait que j'accède au serveur HTTP en tapant "localhost:3000" dans la barre d'adresse, et que la connexion webSocket ne fonctionne qu'en mettant l'adresse ip, d'où le cross origin.
Simplement tu noteras que je tape juste l'adresse ip, sans préciser de protocole.

LucasWerquin a écrit:

Tu m'as répondu pendant que j'éditais mon message, j'y ai ajouté une piste de recherche.
Moi en local c'est simplement const socket = io("192.168.1.58:8080", {withCredentials: true});

L'option withCredentials: true, c'est la seule bidouille que j'ai trouvé pour résoudre un problème de CORS provoqué par le fait que j'accède au serveur HTTP en tapant "localhost:3000" dans la barre d'adresse, et que la connexion webSocket ne fonctionne qu'en mettant l'adresse ip, d'où le cross origin.
Simplement tu noteras que je tape juste l'adresse ip, sans préciser de protocole.

Je vais regarder de ce côté et est-ce que cette ligne peut impacter le fonctionnement ?

  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))

Car j'ai cette erreur en console: polling-xhr.js:157 GET https://herokuapp.com/socket.io/?EIO=4&transport=polling&t=NooXUGB 404 (Not Found)

-
Edité par MaxMlr 25 octobre 2021 à 16:12:17

Mince, que je me souvienne...
J'ai déjà eu cette erreur, mais je ne me souviens plus à quoi elle correspond.
A priori, quand tu as cette erreur là c'est que l'adresse spécifiée dans var socket = io("xamchat.herokuapp.com/"); est la bonne, puisqu'une connexion HTTP long polling est demandée. Donc que tu as bien déclenchée un processus de socket.io.

Moi de mon côté, si j'essaye avec une mauvaise ip ( donc si l'adresse spécifiée est mauvaise ), j'ai ça :

GET http://192.168.1.14:8080/socket.io/?EIO=4&transport=polling&t=NooujJn net::ERR_CONNECTION_TIMED_OUT

J'ai aussi eu des souci dans l'export des scripts sockets.io, mais là, ça me donnait ça :

GET http://localhost:3000/javascripts/socket.io/client-dist/socket.io.js net::ERR_ABORTED 404 (Not Found)
websocketclient.js:1 Uncaught ReferenceError: io is not defined
    at websocketclient.js:1
(anonyme) @ websocketclient.js:1

Donc, par élimination, tu as peut-être bien raison, c'est le chemin des scripts serveurs qui ne va pas.
Alors je ne sais pas trop comment t'aider, j'utilise aussi express, mais de façon sensiblement différente de la tienne. J'ai commencé par créer le serveur HTTP de base en utilisant la commande ( dans le terminal ) 

express nom_de_mon_app

Mais dans mon fichier app.js, je créé un autre serveur pour socket.io :

//Création serveur socket.io
const wsServer = http.createServer(app);
const {Server} = require('socket.io');
const io = new Server(wsServer, {
    cors: {
        origin: true,
        methods: ["GET", "POST"],
        allowedHeaders: 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization',
        credentials: true
    }
});
wsServer.listen(8080, () => {
    console.log('serveur webSocket créé sur port 8080');
});

Ce qui d'ailleurs me posera problème si j'héberge mon app, n'ayant alors plus le contrôle sur le choix des ports ( mais je me pencherais sur la question à ce moment-là )
Le problème que j'ai eu été lié au fait que les fichiers de socket.io se trouvaient dans les node_modules, et que l'app ne pouvait servir au client que ce qui se situe dans le répertoire "public".
Vraiment navré que les très longues heures à me battre avec socket.io ne m'aient pas appris suffisamment sur la question pour pouvoir t'aider

LucasWerquin a écrit:

Mince, que je me souvienne...
J'ai déjà eu cette erreur, mais je ne me souviens plus à quoi elle correspond.
A priori, quand tu as cette erreur là c'est que l'adresse spécifiée dans var socket = io("herokuapp.com/"); est la bonne, puisqu'une connexion HTTP long polling est demandée. Donc que tu as bien déclenchée un processus de socket.io.

Moi de mon côté, si j'essaye avec une mauvaise ip ( donc si l'adresse spécifiée est mauvaise ), j'ai ça :

GET http://192.168.1.14:8080/socket.io/?EIO=4&transport=polling&t=NooujJn net::ERR_CONNECTION_TIMED_OUT

J'ai aussi eu des souci dans l'export des scripts sockets.io, mais là, ça me donnait ça :

GET http://localhost:3000/javascripts/socket.io/client-dist/socket.io.js net::ERR_ABORTED 404 (Not Found)
websocketclient.js:1 Uncaught ReferenceError: io is not defined
    at websocketclient.js:1
(anonyme) @ websocketclient.js:1

Donc, par élimination, tu as peut-être bien raison, c'est le chemin des scripts serveurs qui ne va pas.
Alors je ne sais pas trop comment t'aider, j'utilise aussi express, mais de façon sensiblement différente de la tienne. J'ai commencé par créer le serveur HTTP de base en utilisant la commande ( dans le terminal ) 

express nom_de_mon_app

Mais dans mon fichier app.js, je créé un autre serveur pour socket.io :

//Création serveur socket.io
const wsServer = http.createServer(app);
const {Server} = require('socket.io');
const io = new Server(wsServer, {
    cors: {
        origin: true,
        methods: ["GET", "POST"],
        allowedHeaders: 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization',
        credentials: true
    }
});
wsServer.listen(8080, () => {
    console.log('serveur webSocket créé sur port 8080');
});

Ce qui d'ailleurs me posera problème si j'héberge mon app, n'ayant alors plus le contrôle sur le choix des ports ( mais je me pencherais sur la question à ce moment-là )
Le problème que j'ai eu été lié au fait que les fichiers de socket.io se trouvaient dans les node_modules, et que l'app ne pouvait servir au client que ce qui se situe dans le répertoire "public".
Vraiment navré que les très longues heures à me battre avec socket.io ne m'aient pas appris suffisamment sur la question pour pouvoir t'aider

Alors leger problème je ne connais rien a express js 😂.

je peux peut être vous montrer l’arboresence des dossiers ?

merci de votre temps 

-
Edité par MaxMlr 25 octobre 2021 à 16:12:38

Je peux pas dire que je sois une pointure, mais ça fait bientôt un an que je potasse un projet sous express, j'ai quelques vagues notions.
Je ne suis pas sûr du tout de pouvoir t'aider, mais si tu montre l'arborescence, ça peut aider ( pas tous les node_modules, sinon ça va alourdir ton post )

Ducoup voila à quoi ressemble le chat:

Le fichier sur lequel est le chat s'appelle: index2.php et ducoup il fait appel au fichier socket.js:

Je remet socket.js car je l'ai modifié:

'use strict';

const express = require('express');
const socketIO = require('socket.io');

const PORT = process.env.PORT || 3000;
const INDEX = '/index2.php';

const server = express()
  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))
  .listen(PORT, () => console.log(`Listening on ${PORT}`));

const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('Client connected');
  socket.on('disconnect', () => console.log('Client disconnected'));
});

setInterval(() => io.emit('time', new Date().toTimeString()), 1000);

Mais, je ne comprend pas ton projet, il y a du node, et du php ?
Du php pour le côté HTTP, et un server socket.io basé sur un server express, j'imagine ?

Bon, je pense que c'est peut-être un souci pour trouver les dossiers de socket.io, ton serveur doit chercher dans le répertoire racine et pas dans node_modules, ou quelque chose comme ça. Moi j'ai eu ce souci, mais pour l'export de socket.io/client-dist/socket.io.min.js, j'ai du en coller une copie dans le répertoire "public" de mon arborescence.
Pour ma part, je ne saurais hélas pas t'aider plus.

LucasWerquin a écrit:

Mais, je ne comprend pas ton projet, il y a du node, et du php ?
Du php pour le côté HTTP, et un server socket.io basé sur un server express, j'imagine ?

Bon, je pense que c'est peut-être un souci pour trouver les dossiers de socket.io, ton serveur doit chercher dans le répertoire racine et pas dans node_modules, ou quelque chose comme ça. Moi j'ai eu ce souci, mais pour l'export de socket.io/client-dist/socket.io.min.js, j'ai du en coller une copie dans le répertoire "public" de mon arborescence.
Pour ma part, je ne saurais hélas pas t'aider plus.

il y a du node car il a été rajouté après afin de faire le serveur websocket car on ne peut pas le faire sur heroku avec du php. Et pour le coup je ne vois pas pourquoi il ne trouverait pas les fichiers socket.io car quand je lance sur le serveur: node socket.js je n’ai aucune erreur.

j’ai peut être une piste, au niveau de express js, on fait passer le fichier a du php mais est ce possible ?

-
Edité par MaxMlr 25 octobre 2021 à 7:13:06