如何使用laravel-echo-server通過socket.io將websockets從React連接到Laravel？

我目前在使用 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 端設定 echo：

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 端的控制臺中沒有看到錯誤，我相信問題是我得到的內部錯誤。我還需要向我的網站添加更多內容以使其正常作業嗎？

uj5u.com熱心網友回復：

這可能會對您有所幫助。https://linuxhint.com/how-to-use-laravel-with-socket-io/

我認為Echo物件的主機選項應該是https://api.mysite.com:6001，而不是https://api.mysite.com/socket.io

uj5u.com熱心網友回復：

如果有人遇到同樣的問題，這是我的問題。我只需要將這一行添加到 000-default-le-ssl.conf：

RewriteCond %{HTTP:Upgrade} websocket [NC]

標籤：

上一篇：使用PHP和htaccess的推薦人策略

下一篇：是否可以使用java操作作業系統（Windows）？