Javascript無法連接到PHP Ratchet WebSocket服務器

Question

我一直在嘗試在localhost上配置Ratchet ，並且一直在遵循本教程 。

我已經安裝了Composer和Ratchet，並從該教程中完全復制了PHP代碼。 當我運行服務器並使用telnet訪問它時，我沒有問題，它工作正常。

但是，當我嘗試使用JavaScript建立連接（使用HTML5 websockets）時，它卻無法連接-請求過了一段時間就會超時。 我可以在PHP控制台和telnet中看到我的瀏覽器發送的初始HTTP請求消息，因此客戶端顯然可以“連接”良好-好像服務器不認可該請求。

我事先在StackOverflow和其他類似站點上調查了其他人的問題，有人提到服務器必須發送回HTTP答復，這是我嘗試做的（如果消息開始，則對最近連接的客戶端使用send方法使用GET HTTP/1.1 ）。 我在MDN上查找了一些規范，並找到了本指南 ，但是我對其的實現對問題沒有影響-JavaScript仍然無法連接。 我不確定這是因為我錯誤地實現了握手代碼，還是根本不是解決我最初的問題的方法。

但是，WebSocket + Ratchet指南都沒有提到需要實現此功能，因此我懷疑這可能不是問題。

我已經嘗試使用8080和8888端口，並且都具有相同的結果。 我在Google Chrome 60的macOS上使用XAMPP。

這是我的JavaScript代碼：

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!");
    }
}

這是我的PHP服務器代碼（ 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();

這是Chat類（ 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

因此，您無需實現握手，Ratchet會為您完成此操作。

像我在上面所做的那樣，獲取代碼所需要做的就是確保您使用如下所示的WebServer：

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