Websocket ne se connecte pas lors du rafraîchissement

Question

J'ai un serveur Websocket qui utilise Ratchet/PHP :

<?php
require __DIR__.'/../vendor/autoload.php';

use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use MyApp\Mediator;

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Mediator()
        )
    ),
    9000
);

$server->run();
?>

Classe de médiateur :

<?php
namespace MyApp;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Mediator implements MessageComponentInterface {
    protected $clients = [];

    public function onOpen(ConnectionInterface $conn) {
        $this->clients[$conn->resourceId] = $conn;
        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        echo "Incoming: $msg\n";
    }

    public function onClose(ConnectionInterface $conn) {
        unset($this->clients[$conn->resourceId]);
        echo "Connection {$conn->resourceId} has disconnected\n";
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        echo "An error has occurred: {$e->getMessage()}\n";
        $conn->close();
    }
}
?>

Maintenant, du côté client, j'ai ce code JS de base :

let ws = new WebSocket('wss://localhost:8443');
ws.addEventListener('open', () => {
    ws.send('Hello!');
});
ws.addEventListener('message', event => {
    alert(event.data);
});

Il fonctionne (je peux envoyer et recevoir des messages), mais voici le problème :

Lorsque vous visitez la page pour la première fois, une connexion avec le serveur websocket est établie et fonctionne correctement. Lorsque je ferme la page, la connexion est fermée (comme il se doit). Cependant, lorsque je rafraîchis la page, la connexion est fermée (lors du déchargement de la page, c'est normal) mais lorsque la page est rechargée, aucune connexion n'est établie avec le serveur websocket. Je dois rafraîchir à nouveau pour que le script se connecte. Cela ne devrait pas se produire, n'est-ce pas ? Je n'ai aucune idée de la raison pour laquelle cela se produit, de ce qui en est la cause.

Answer 1

Peut-être ajouter un écouteur d'événement pour fermer votre ws javascript WebSocket avant d'essayer de le rouvrir.

let ws = new WebSocket('wss://localhost:8443');
ws.addEventListener('open', () => {
    ws.send('Hello!');
});

$(window).unload(function () {
   ws.close();
});

incluez également les éventuelles erreurs de la console, car cela semble être un problème avec votre javascript. WebSocket logique, mais j'ai lu plus d'informations sur Rachet/PHP et j'apprécierais des informations supplémentaires sur votre logique backend.

Mise à jour

Je vous suggère pour consulter leur page de démonstration et déboguer à la fois votre code et vos requêtes réseau. Commencez par recréer une fonctionnalité de travail 1-1 exactement identique, puis mettez en œuvre vos modifications et comprenez ce qui provoque vos erreurs :

1) Examinez votre demande de réseau et conservez le journal, lisez-le et signalez tout problème étrange.

2) Examiner leur code pour la démo