如何使用 laravel-echo-server 通过 socket.io 从 React 连接 websockets 到 Laravel？

Question

我目前在使用 laravel-echo-server 使用 socket.io 从 React 到 Laravel 设置 websockets 时遇到问题。一切似乎都在工作，除非我导航到https://api.mysite.com/socket.io/?EIO=4&transport=websocket 我收到内部服务器错误。每当我检查日志时，这就是错误：

AH01144：没有协议处理程序对 URL /socket.io/ 有效（方案“ws”）。如果您使用的是 DSO 版本的 mod_proxy，请确保代理子模块包含在使用 LoadModule 的配置中。

但是每当我去https://api.mysite.com/socket.io 时，我都会得到这个：

{
  "code": 0,
  "message": "Transport unknown"
}

以下是我的站点可用设置 (000-default-le-ssl.conf)：

<IfModule mod_ssl.c>
<VirtualHost *:443 *:6001>
        ServerName api.mysite.com
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html/public

        <Directory /var/www/html/public/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        <IfModule mod_dir.c>
            DirectoryIndex index.php index.pl index.cgi index.html index.xhtml index.htm
        </IfModule>

SSLCertificateFile /etc/letsencrypt/live/api.mysite.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/api.mysite.com/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf

RewriteEngine On
RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
RewriteCond %{QUERY_STRING} transport=websocket    [NC]
RewriteRule /(.*)           ws://127.0.0.1:6001/$1 [P,L]

ProxyRequests off
ProxyPreserveHost On
SSLProxyEngine on

<Proxy *>
    Require all granted
</Proxy>

ProxyPass        /socket.io http://127.0.0.1:6001/socket.io/
ProxyPassReverse /socket.io http://127.0.0.1:6001/socket.io/
</VirtualHost>
</IfModule>

还有我的非 ssl 文件（000-default.conf）：

<VirtualHost *:80>
        ServerName api.mysite.com
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html/public

        <Directory /var/www/html/public/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        <IfModule mod_dir.c>
            DirectoryIndex index.php index.pl index.cgi index.html index.xhtml index.htm
        </IfModule>
RewriteEngine on
RewriteCond %{SERVER_NAME} =api.mysite.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

这是我的 laravel-echo-server 设置：

{
    "authHost": "api.mysite.com",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

每当我运行 laravel-echo-server start 并创建一些事件时，它们似乎都在正确记录：

L A R A V E L  E C H O  S E R V E R

version 1.6.2

⚠ Starting server in DEV mode...

✔  Running at localhost on port 6001
✔  Channels are ready.
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

Channel: chat.9255
Event: App\Events\LeagueChatCreated
Channel: chat.9255
Event: App\Events\LeagueChatCreated
Channel: chat.9255
Event: App\Events\LeagueChatCreated

最后一件事是我如何在 React 端设置回显：

import Echo from "laravel-echo/dist/echo";
import socketio from "socket.io-client";

const echo = new Echo({
    host: "https://api.mysite.com/socket.io",
    broadcaster: "socket.io",
    client: socketio,
    encrypted: false,
    transports: ["websocket"],
});

export default echo;

我就是这样称呼它的：

echo.channel("chat." + leagueId).listen("LeagueChatCreated", (ev) => {
   console.log("new request");
});

我在 React 端的控制台中没有看到错误，我相信问题是我得到的内部错误。我还需要向我的网站添加更多内容以使其正常工作吗？

Answer 1

这可能会对您有所帮助。 https://linuxhint.com/how-to-use-laravel-with-socket-io/

我认为Echo 对象的主机选项应该是https://api.mysite.com:6001，而不是https://api.mysite.com/socket.io

Answer 2

如果有人遇到同样的问题，这是我的问题。我只需要将这一行添加到 000-default-le-ssl.conf：

RewriteCond %{HTTP:Upgrade} websocket [NC]