Javascript can't connect to PHP Ratchet WebSocket server

Question

I have been trying to configure Ratchet on localhost, and have been following this tutorial.

I have installed Composer and Ratchet, and have copied the PHP code from that tutorial exactly. When I run the server and use telnet to access it, I have no problems, it works fine.

But, when I try to use JavaScript to make a connection (with HTML5 websockets), then it does not connect - the request simply times out after a while. I can see the initial HTTP request message that is sent by my browser in the PHP console and in telnet, so the client can obviously "connect" fine - it just seems as if the server does not acknowledge this request.

I looked into other people's problems with this on StackOverflow and other similar sites beforehand, and some people mentioned that the server has to send back an HTTP reply, which I have tried doing (using the send method for the recently connected client if their message started with GET HTTP/1.1). I looked up some of the specifications for this on MDN, and found this guide, but my implementation of it had no effect on the problem - JavaScript could still not connect. I am not sure if this was because I incorrectly implemented the handshake code, or if it simply was not the solution to my initial problem.

None of the WebSocket + Ratchet guides mention a need to implement this however, so I suspect that this may not be the problem.

I have tried both ports 8080 and 8888, and both have the same outcome. I am using XAMPP on macOS in Google Chrome 60.

Here is my JavaScript code:

window.onload = function() {
    var conn = new WebSocket('ws://localhost:8080');
    conn.onmessage = function(e) {
        console.log(e.data);
    }
    conn.onopen = function(e) {
        console.log("Connection established!");
    }
}

Here is my PHP Server code (bin/chat-server.php):

<?php
use Ratchet\Server\IoServer;
use MyApp\Chat;

require dirname(__DIR__) . '/vendor/autoload.php';

$server = IoServer::factory(
    new Chat(),
    8080
);

$server->run();

And here is the Chat class (src/MyApp/Chat.php):

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

class Chat implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        // Store the new connection to send messages to later
        $this->clients->attach($conn);

        echo "New connection! ({$conn->resourceId})\n";

    }

    public function onMessage(ConnectionInterface $from, $msg) {
        $numRecv = count($this->clients) - 1;
        echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n"
            , $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');
        foreach ($this->clients as $client) {
            if ($from !== $client) {
                // The sender is not the receiver, send to each client connected
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {
        // The connection is closed, remove it, as we can no longer send it messages
        $this->clients->detach($conn);

        echo "Connection {$conn->resourceId} has disconnected\n";
    }

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

        $conn->close();
    }
}

Answer 1

So, you do not need to implement the handshake, Ratchet does this for you.

All you need to do to get code like I have above working is ensure that you make it use a WebServer like so:

<?php
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use MyApp\Chat;

require dirname(__DIR__) . '/vendor/autoload.php';

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Chat()
        )
    ),
    8080
);

$server->run();