How Symfony/Mecure works with docker?

Question

I'm trying to make a taskmanager app where each user on a page received an update if a new task is created, if a task is deleted or if a task is edited. So I try to use Mercure to do that. I'm using nginx as a webserver and php-fpm for the Symfony project thanks to docker. The problem is now that I'm following the symfony documentation about Mercure I have an error saying "Failed to send an update"

Here is all the code that I did until now:

docker-compose.yml

version: '3'
services:
  db-task:
    image: mariadb:10.6.13
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: 'db'
      MYSQL_USER: ${USER}
      MYSQL_PASSWORD: ${USER_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${ROOT_PASSWORD}
    ports:
      - 3306:3306
    expose:
      - 3306
    volumes:
      - my-db-task:/var/lib/mysql

  webserver-task:
    image: nginx:alpine
    container_name: webserver-task
    working_dir: /application
    volumes:
      - .:/application
      - ./phpdocker/nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "81:80"
  task-php-fpm:
    image: bitnami/php-fpm:8.2.4
    container_name: task-php-fpm
    working_dir: /application
    volumes:
      - .:/application
      - ./phpdocker/php-ini-override.ini:/opt/bitnami/php/etc/php.ini

###> symfony/mercure-bundle ###
  mercure:
    image: dunglas/mercure
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    environment:
      SERVER_NAME: ':80'
      MERCURE_PUBLISHER_JWT_KEY: '!ChangeThisMercureHubJWTSecretKey!'
      MERCURE_SUBSCRIBER_JWT_KEY: '!ChangeThisMercureHubJWTSecretKey!'
      # Set the URL of your Symfony project (without trailing slash!) as value of the cors_origins directive
      MERCURE_EXTRA_DIRECTIVES: |
        cors_origins *
    # Comment the following line to disable the development mode
    command: /usr/bin/caddy run --config /etc/caddy/Caddyfile.dev
    volumes:
      - mercure_data:/data
      - mercure_config:/config

The JS script

<script>
    const eventSource = new EventSource("{{ mercure('https://localhost/books/1')|escape('js') }}");
    eventSource.onmessage = event => {
        // Will be called every time an update is published by the server
        console.log(JSON.parse(event.data));
    }
</script>

.env

# The URL of the Mercure hub, used by the app to publish updates (can be a local URL)
MERCURE_URL=http://localhost/.well-known/mercure
# The public URL of the Mercure hub, used by the browser to connect
MERCURE_PUBLIC_URL=http://localhost/.well-known/mercure
# The secret used to sign the JWTs
MERCURE_JWT_SECRET="!ChangeThisMercureHubJWTSecretKey!"

Publish route code

#[Route('/publish', name: 'publish')]
    public function publish(HubInterface $hub): Response
    {
        $update = new Update(
            'https://localhost/books/1',
            json_encode(['status' => 'Hello World !'])
        );

        $hub->publish($update);

        return new Response('published!');
    }

Can someone please tell me what am I doing wrong ?

How Symfony/Mecure works with docker?

0 Answers0