Websocket does not connect on refresh

Question

I have got a Websocket server using 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();
?>

Mediator class:

<?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();
    }
}
?>

Now on the client side, I have this basic JS code:

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

It does work (I can send and receive messages), however here's the problem:

When visiting the page for the first time, a connection with the websocket server is established and works fine. When I close the page, the connection is closed (as it should). However, when I refresh the page the connection is closed (on unloading the page, this is normal) but when the page is loaded again, no connection is made to the websocket server. I have to refresh again to make the script connect. This should not happen, right? I have no idea why this is happening, what's causing this.

Answer 1

maybe add an event listener to close your ws javascript WebSocket before trying to reopen it.

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


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

also include possible console errors, as this looks like a issue with your javascript WebSocket logic, but I have been reading more info about Rachet/PHP and I would appreciate additional information on your backend logic.

Update

I suggest you to check out their demo page and debug both your code and your network requests. Start re-creating a 1-1 exactly identical working functionality, then implement your changes and understand what causes your errors:

1) Review your network request and persist the log, read them and report any strange issues

2) Review their code for the demo