Azure 静态 Web 应用程序中的 Laravel Reverb Web 连接失败

Question

与 wss://sample-api.azurewebsites.net:8081/app/fs213123111 的 Websocket 连接失败

我一直在尝试在Azure Web App Service中配置从前端（VUE）Azure Static Web App到后端（Laravel）的Websocket连接。它在本地运行良好，但在生产服务器中运行不佳。

到目前为止我已经在前面安装了必要的包，包括echo.js。

这是我前面的.env

VITE_REVERB_APP_KEY="1fsa12561231245"
VITE_REVERB_HOST="sample-api.azurewebsites.net"
VITE_REVERB_PORT=8080
VITE_REVERB_SCHEME="https"

.env 在后端

REVERB_SERVER_PORT=8080

REVERB_APP_ID=112345
REVERB_APP_KEY=1fsa12561231245
REVERB_APP_SECRET=adz1dgaghte
REVERB_HOST="sample-api.azurewebsites.net"
REVERB_PORT=8080
REVERB_SCHEME=https
REVERB_SERVER_HOST=0.0.0.0

我还在应用服务的 CORS 设置中允许了我的前端域，但仍然遇到相同的问题。应用程序服务在 Linux 中运行，因此 Websocket 默认处于打开状态。

它们是否有允许在 Azure 中进行 Websocket 连接的配置？谢谢！

Answer 1

以下是在 Azure 环境中为前端 (Vue.js) 和后端 (Laravel) 配置 WebSocket 通信的步骤。

安装 Laravel WebSockets 和 cors 包：

composer require fruitcake/laravel-cors
composer require beyondcode/laravel-websockets

发布 Laravel WebSockets 配置文件：

php artisan vendor:publish --provider="BeyondCode\\LaravelWebSockets\\WebSocketsServiceProvider" --tag="config"

编辑

config/websockets.php

设置您的 WebSocket 服务器：

return [
    'apps' => [
        [
            'id' => env('YourPUSHERAPPID'),
            'name' => env('YourAPPNAME'),
            'key' => env('YourPUSHERAPPKEY'),
            'secret' => env('YourPUSHER_APP_SECRET'),
            'path' => env('YourPUSHERAPPPATH'),
            'capacity' => null,
        ],
    ],

    'dashboard' => [
        'username' => env('WEBSOCKETSDASHBOARDYourUSERNAME'),
        'password' => env('WEBSOCKETSDASHBOARDYourPASSWORD'),
    ],

    'ratchet' => [
        'host' => '127.0.0.1',
        'port' => env('LARAVELWEBSOCKETSYourPORT', 6001),
    ],

    'ssl' => [
        'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_YourLOCAL_CERT', null),
        'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_YourLOCAL_PK', null),
        'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_YourPASSPHRASE', null),
        'verify_peer' => false,
    ],
];

• 确保在 Laravel 应用程序中的所有域中添加跨域资源共享 (CORS)，配置

  cors.php

  文件以允许来自任何 origin 的请求。

配置/cors.php： 编辑

config/cors.php

文件：

return [
    'paths' => ['api/*'],  
    'allowed_methods' => ['*'], 
    'allowed_origins' => ['*'],  
    'allowed_origins_patterns' => [],  
    'allowed_headers' => ['*'], 
    'exposed_headers' => [], 
    'max_age' => 0, 
    'supports_credentials' => false,  
];

注册CORS中间件：

protected $middleware = [
    \Fruitcake\Cors\HandleCors::class,
    // Other middlewares...
];

我按照此链接使用 Laravel WebSockets构建实时应用程序。

公共频道事件类：

// app/Events/NewMessage.php
namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class NewMessage implements ShouldBroadcast
{
    use InteractsWithSockets;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new Channel('public-chat');
    }
}

use App\Events\NewMessage;
use App\Events\NewChatMessage;


broadcast(new NewMessage('Hello, world!'));


broadcast(new NewChatMessage(1, 'Test Message'))->toOthers();

• 我使用了下面的示例代码：

class TimeServer implements MessageComponentInterface {
    public function onOpen(ConnectionInterface $conn) {
        // Send initial message
        $conn->send("The time is: ");
        
        // Send time every second
        $conn->timeInterval = setInterval(function() use ($conn) {
            $time = date("H:i:s");
            $conn->send("The time is: " . $time);
        }, 1000);
    }

我按照此 SO 部署到 Azure Web 应用程序。

本地用Vue输出：

我按照这个so使用GitHub在azure服务器静态Web应用程序上部署React Vite。