WebSocket 连接到“wss://localhost:8000/game”失败（Symfony，棘轮）

Question

我正在尝试使用 symfony 6、ratchet 和 javascript 进行实时聊天，但是我无法连接到本地主机，即使当我在控制台中查看 URL 时它似乎是正确的。

这是我的指挥官

<?php

namespace App\Command;

use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;

use Ratchet\App;
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use App\Websocket\MessageHandler;

use App\Sockets\LiveChat;


class SocketCommand extends Command
{
    protected function configure()
    {
        $this->setName('sockets:start-chat')
            ->setHelp("Starts the chat socket demo")
            ->setDescription('Starts the chat socket demo');
    }

    protected function execute(InputInterface $input, OutputInterface $output)
    {

        // $server = IoServer::factory(
        //     new HttpServer(
        //         new WsServer(
        //             new LiveChat()
        //         )
        //     ),
        //     8000
        // );
        $output->writeln([
            'Chat socket',
            '============',
            'Starting chat, open your browser.',
        ]);
        //$app = new App('localhost', 8000, '127.0.0.1');
        $app = new \Ratchet\App('127.0.0.1', 8000, '0.0.0.0');
        $app->route('/game', new LiveChat);
        $app->run();
    }
}

这是初始化 websocket 的代码

<?php

namespace App\Sockets;

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use SplObjectStorage;

class LiveChat implements MessageComponentInterface
{
    protected $clients;

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

    public function onOpen(ConnectionInterface $conn)
    {
        $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";

w        $conn->close();
    }
}

最后但并非最不重要的是 javascript 连接到 websocket

var clientInformation = {
    username: new Date().getTime().toString()
        // You can add more information in a static object
};

var conn = new WebSocket('wss://localhost:8000/game');

console.log(conn);

conn.onopen = function(e) {
    console.info("Connection established succesfully");
};

conn.onmessage = function(e) {
    var data = JSON.parse(e.data);
    Chat.appendMessage(data.username, data.message);

    console.log(data);
};

conn.onerror = function(e) {
    alert("Error: something went wrong with the socket.");
    console.error(e);
};

document.getElementById("form-submit").addEventListener("click", function() {
    var msg = document.getElementById("form-message").value;

    if (!msg) {
        alert("Please send something on the chat");
    }

    Chat.sendMessage(msg);

    document.getElementById("form-message").value = "";
}, false);

var Chat = {
    appendMessage: function(username, message) {
        var from;

        if (username == clientInformation.username) {
            from = "me";
        } else {
            from = clientInformation.username;
        }

        var ul = document.getElementById("chat-list");
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(from + " : " + message));
        ul.appendChild(li);
    },
    sendMessage: function(text) {
        clientInformation.message = text;
        conn.send(JSON.stringify(clientInformation));
        this.appendMessage(clientInformation.username, clientInformation.message);
    }
};

任何帮助将不胜感激，谢谢！

Answer 1

我认为，您应该将 WS 与本地主机一起使用，而 WSS 则使用分配的 IP 而不是本地主机来保护 WS。

var conn = new WebSocket('ws://localhost:8000/game'); // try changing WSS ->  WS