Laravel WebSockets + Laravel Echo无法监听我的事件

3
我正在使用https://docs.beyondco.de/laravel-websockets/处理websockets。但是看起来在控制台(运行php artisan websocket:serve后,我可以在日志中看到我的api消息)和仪表板(http://localhost:8080/laravel-websockets),它显示我的api消息,但在我的应用程序Laravel Echo不侦听我的事件并且不在浏览器控制台中显示任何内容。enter image description here 以下是我的设置:config/broadcasting.php
    'connections' => [

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'encrypted' => false,
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'http'
        ],
    ],

.env

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=test
PUSHER_APP_KEY=test
PUSHER_APP_SECRET=test
PUSHER_APP_CLUSTER=eu

app/Order/Events/TestEvent.php

<?php

namespace Domain\Order\Events;

use Domain\Order\Model\Order;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class TestEvent implements ShouldBroadcast
{
    use SerializesModels, Dispatchable, InteractsWithSockets;

    /**
     * @var Order
     */
    public Order $order;

    /**
     * Create a new event instance.
     *
     * @param Order $order
     */
    public function __construct(Order $order)
    {
        $this->order = $order;
    }

    /**
     * @return Order
     */
    public function getOrder(): Order
    {
        return $this->order;
    }

    /**
     * @return array|\Illuminate\Broadcasting\Channel|\Illuminate\Broadcasting\Channel[]
     */
    public function broadcastOn()
    {
        return new Channel('order-created');
    }

}

resources/js/bootstrap.js

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'test',
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    encrypted: false
});

我的观点:

<script src="{{ asset('js/app.js') }}"></script>
<script>
    Echo.channel('orders-created')
        .listen('.Domain\\Order\\Events\\TestEvent', (e) => {
            console.log('works');
            console.log(e);
        });
</script>

也许它与我的Docker设置有交互作用,因此我将在此处放置我的Docker设置:
docker-compose.yml
version: '3.5'
services:
  nginx:
    container_name: myapp_nginx
    image: nginx:latest
    ports:
      - "8080:80"
      - "8180:443"
    volumes:
      - ./:/var/www/html
      - ./docker/conf/:/etc/nginx/conf.d/
      - ./docker/www_logs/nginx:/var/log/nginx
    links:
      - phpfpm
  phpfpm:
    ports:
      - "6001:6001"
    container_name: myapp_app
    build: docker/containers/php74-fpm
    command: bash -c "/etc/init.d/cron start && php-fpm -F"
    volumes:
      - ./:/var/www/html:cached
      - ./docker/php-custom.ini:/usr/local/etc/php/conf.d/php-custom.ini
  mysql:
    container_name: myapp_mysql
    image: mariadb:latest
    volumes:
      - ./docker/conf/mysql:/etc/mysql/conf.d
      - ./docker/mysql-data:/var/lib/mysql
    ports:
      - "3307:3306"
    environment:
      MYSQL_USERNAME: root
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: database
  phpmyadmin:
    container_name: myapp_phpmyadmin
    image: phpmyadmin/phpmyadmin
    depends_on:
      - mysql
    ports:
      - '8079:80'
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USERNAME: root
      PMA_HOST: mysql
  mailhog:
    container_name: myapp_mailhog
    image: mailhog/mailhog:latest
    ports:
      - 8025:8025
      - 1025:1025

docker/containers/php74-fpm/Dockerfile

FROM devilbox/php-fpm-7.4:latest

RUN apt-get update && \
    apt-get install libonig-dev libzip-dev libxml2-dev libfreetype6-dev libjpeg62-turbo-dev libmcrypt-dev cron zip vim libcurl4-openssl-dev pkg-config libssl-dev -y \
    && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
    && docker-php-ext-install -j$(nproc) iconv soap mysqli mbstring gd\
    && docker-php-ext-install pdo_mysql xml zip fileinfo\
    && docker-php-ext-configure intl\
    && docker-php-ext-install intl\
    && docker-php-ext-install exif\
    && docker-php-ext-install bcmath\
    && docker-php-ext-install sockets\
    && pecl install mongodb && docker-php-ext-enable mongodb



# composer
RUN curl --silent --show-error https://getcomposer.org/composer.phar > composer.phar \
    && mv composer.phar /usr/bin/composer
RUN chmod +x /usr/bin/composer

# phpunit
RUN composer global require "phpunit/phpunit"
ENV PATH /root/.composer/vendor/bin:$PATH
RUN ln -s /root/.composer/vendor/bin/phpunit /usr/bin/phpunit

# xdebug
RUN pecl install xdebug && docker-php-ext-enable xdebug

#RUN mv "$PHP_INI_DIR/php.ini-development" "$PHP_INI_DIR/php.ini"

# node
RUN apt-get install -y gnupg2
RUN curl -sL https://deb.nodesource.com/setup_11.x | bash -
RUN apt-get install -y nodejs
#RUN apt-get install -y npm

EXPOSE 9000
CMD ["php-fpm", "-F"]

docker/conf/site.conf

server {
 listen 8080;
 server_name localhost;
 return 301 https://$host$request_uri;
}

server {
    index index.php;
    server_name localhost;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;
    client_max_body_size 300M;

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass phpfpm:9000;
        fastcgi_index index.php;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffers 8 16k;
        fastcgi_buffer_size 32k;
        fastcgi_connect_timeout 300;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host      $http_host;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }

    location / {
        try_files $uri $uri/ /index.php?$query_string;

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-CSRF-Token';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }


    }

}

你的nginx配置中缺少处理ws连接的位置块。以下是您需要的示例:https://ma.ttias.be/deploying-laravel-websockets-with-nginx-reverse-proxy-and-supervisord/ - Brian Lee
@DigitalDrifter 我不确定如何正确配置它,我不是一个 ngnix/docker 大师。我按照以下方式进行了操作,但没有帮助:https://pastebin.com/QM5z95sH也许我在这个配置中犯了一些错误? - SakuragiRokurota
可能是因为你正在广播 order-created,而在监听 orders-created 上。 - Uzair Riaz
你能找到解决方法吗?我遇到了类似的问题。 - Caleb Oki
@ Caleb Oki 不幸的是,我没有使用Websockets,因为对于我的问题,服务器发送事件已经足够了。但是,如果您能找到解决方案来解决您的问题,如果您能在这里共享就太好了 :) - SakuragiRokurota
@SakuragiRokurota 如果我找到解决方案,我一定会分享的。我在StackOverflow上发布了一个类似的问题。 - Caleb Oki
2个回答

0
我曾经遇到过同样的问题,但是我解决了。你只需要暴露端口并在docker-compose.yml文件中添加端口即可。
在workspace/Dockerfile中添加:
EXPOSE 6001

在 docker-compose.yml 文件中添加:
services:
  workspace:
    port:
      - 6001:6001

在您的项目中,将config/broadcasting.php中的主机设置为“workspace”。
'pusher' => [
            ...
            'options' => [
               
                'host' => 'workspace',
               
            ],
        ],,

0

我也做了同样的事情,但是在我的Dockerfile中添加了EXPOSE 6001,它可以正常工作。

你试过吗?

...

EXPOSE 6001

...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接