Trouble Connecting Pimcore Frontend to a Dockerized WebSocket Server

I am trying to connect my Pimcore frontend to a Dockerized WebSocket server. The WebSocket server starts without issues, but the connection from the frontend fails, showing errors like:

JAVASCRIPTCopied
WebSocket connection to 'ws://localhost/ws' failed:

and

WebSocket error:

isTrusted
: 
true
bubbles
: 
false
cancelBubble
: 
false
cancelable
: 
false
composed
: 
false
currentTarget
: WebSocket {url: 'ws://localhost/ws', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
defaultPrevented
: false
eventPhase
: 0
returnValue
: true
srcElement
: WebSocket {url: 'ws://localhost/ws', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
target
: WebSocket {url: 'ws://localhost/ws', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
timeStamp
: 17080
type
: "error"

I have provided all the necessary configuration and code below:

.env

ENVCopied
# WebSocket
WEBSOCKET_HOST=0.0.0.0
WEBSOCKET_PORT=80

services.yaml

YAMLCopied
parameters:
    app.redis_host: '%env(REDIS_HOSTNAME)%'
    app.redis_port: 6379
    app.websocket_host: '%env(WEBSOCKET_HOST)%'
    app.websocket_port: '%env(WEBSOCKET_PORT)%'

docker-compose.yaml

YAMLCopied
x-environment: &localstack_environment
    REDIS_HOSTNAME: redis
    AWS_SNS_REGION: us-west-2
    AWS_SQS_REGION: us-west-2
    AWS_S3_REGION: us-west-2
    AWS_ACCESS_KEY_ID: foobar
    AWS_SECRET_ACCESS_KEY: foobar
    AWS_ENDPOINT: http://localstack:4566
    PIMCORE_GEM_S3_BUCKET_FOLDER: Yaml

services:
    redis:
        image: dockerhub.docker.artifactory.company.com/redis:alpine
        labels:
            compose_label: company-pimcore
        command: [
            # https://redis.io/docs/latest/operate/oss_and_stack/management/config-file/
            redis-server, --maxmemory 128mb, --maxmemory-policy volatile-lru, --loglevel warning, --save "",
        ]
        ports:
            - "6379:6379"
    nginx:
        image: dockerhub.docker.artifactory.company.com/nginx:stable-alpine
        labels:
            compose_label: company-pimcore
        environment:
            PIMCORE_HOSTNAME: php
        ports:
            - "80:80"
        volumes:
            - .:/var/www/html:ro
            - ./scripts/start_nginx.sh:/opt/company/start_nginx.sh:ro
        depends_on:
            - php
            - websocket
        command: ["/opt/company/start_nginx.sh"]

    php:
        build: .
        user: "${USER_ID}:${GROUP_ID}"
        image: "${COMPONENT_IMAGE_NAME}:${COMPONENT_IMAGE_TAG}"
        labels:
            compose_label: company-pimcore
        environment:
            <<: *localstack_environment
            COMPOSER_HOME: /var/www/html
            PHP_IDE_CONFIG: serverName=localhost
            PIMCORE_INSTALL_MYSQL_HOST_SOCKET: db
            PIMCORE_INSTALL_MYSQL_DATABASE: *******
            PIMCORE_INSTALL_MYSQL_USERNAME: *******
            PIMCORE_INSTALL_MYSQL_PASSWORD: *******
            PIMCORE_INSTALL_ADMIN_USERNAME: *****
            PIMCORE_INSTALL_ADMIN_PASSWORD: *****
            PYTHONUNBUFFERED: 1
            # always perform install when starting in dev mode so
            # the vendor dir matches the lock file.
            PIMCORE_RUN_INSTALL: "true"
            PIMCORE_RUN_MIGRATION: "true"
            OIDC_CLIENT_ID: oidc2
            OIDC_CLIENT_SECRET: ***************************
        depends_on:
            db:
                condition: service_healthy
            localstack:
                condition: service_healthy
        volumes:
            - .:/var/www/html
            - ./scripts/start_pimcore.py:/opt/company/start_pimcore.py
        command: ["/opt/company/start_pimcore.py"]
        healthcheck:
            # Use ss to check if php is listening on port 9000.
            test: ["CMD-SHELL", "ss --no-header --listening --tcp \"( sport = :9000 )\" | grep -q 9000"]
            interval: 5s
            timeout: 5s
            retries: 5
            # The first time the install happens can take a long time. Restarts are much faster.
            start_period: 10m
    websocket:
        image: "${COMPONENT_IMAGE_NAME}:${COMPONENT_IMAGE_TAG}"
        hostname: websocket
        environment:
            <<: *localstack_environment
        volumes:
            - .:/var/www/html  # Mount your application code
        working_dir: /var/www/html
        command: php bin/console app:dataobject-reload-websocket-server
        depends_on:
            php:
                condition: service_healthy   # Wait for PHP service to be healthy
            redis:
                condition: service_started   # Wait for Redis to start (or use healthy if defined)
        restart: always

nginx.cong

NGINXCopied
upstream php-pimcore10 {
    server php:9000;
}

map $args $static_page_root {
    default                                 /var/tmp/pages;
    "~*(^|&)pimcore_editmode=true(&|$)"     /var/nonexistent;
    "~*(^|&)pimcore_preview=true(&|$)"      /var/nonexistent;
    "~*(^|&)pimcore_version=[^&]+(&|$)"     /var/nonexistent;
}

map $uri $static_page_uri {
    default                                 $uri;
    "/"                                     /%home;
}
server {
    listen [::]:80 default_server;
    listen 80 default_server;
    
    #server_name pimcore.localhost;
    
    root /var/www/html/public;
    index index.php;

    client_max_body_size 100m;
    rewrite ^/cache-buster-(?:\d+)/(.*) /$1 last;

    location ~* /var/assets/.*\.php(/|$) {
        return 404;
    }

    location ~* \.(?!well-known/) {
        deny all;
        log_not_found off;
        access_log off;
    }
    location ~* (?:\.(?:bak|conf(ig)?|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$ {
        deny all;
    }

    location ~* ^/admin/external {
        rewrite .* /index.php$is_args$args last;
    }

    location ~* .*/(image|video)-thumb__\d+__.* {
        try_files /var/tmp/thumbnails$uri /index.php;
        expires 2w;
        access_log off;
        add_header Cache-Control "public";
    }

    location ~* ^(?!/admin)(.+?)\.((?:css|js)(?:\.map)?|jpe?g|gif|png|svgz?|eps|exe|gz|zip|mp\d|m4a|ogg|ogv|webm|pdf|docx?|xlsx?|pptx?)$ {
        try_files /var/assets$uri $uri =404;
        expires 2w;
        access_log off;
        log_not_found off;
        add_header Cache-Control "public";
    }

    location /ws {
        # Set the backend using a variable
        set $websocket_backend "websocket:80";

        proxy_pass http://$websocket_backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";

        proxy_read_timeout 86400;
        proxy_send_timeout 86400;
        send_timeout 86400;
    }

    location / {
        error_page 404 /meta/404;
        try_files $static_page_root$static_page_uri.html $uri /index.php$is_args$args;
    }

    location ~ ^/index\.php(/|$) {
        send_timeout 1800;
        fastcgi_read_timeout 1800;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        include fastcgi_params;
        set $path_info $fastcgi_path_info;
        fastcgi_param PATH_INFO $path_info;

        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;

        fastcgi_param HTTP_PROXY "";

        fastcgi_pass php-pimcore10;
        internal;
    }

    location /fpm- {
        access_log off;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        location /fpm-status {
            allow 127.0.0.1;
            # add additional IP's or Ranges
            deny all;
            fastcgi_pass php-pimcore10;
        }
        location /fpm-ping {
            fastcgi_pass php-pimcore10;
        }
    }
    location /nginx-status {
        allow 127.0.0.1;
        deny all;
        access_log off;
        stub_status;
    }
}

Below is the WebSocket server implementation:

WebSocketServer

PHPCopied
<?php

declare(strict_types=1);

namespace App\WebSocket;

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class CompanyDataObjectReloadServer implements MessageComponentInterface
{
    protected \SplObjectStorage $clients;

    protected $log;

    public function __construct(\Psr\Log\LoggerInterface $companyLogger)
    {
        $this->clients = new \SplObjectStorage();
        $this->log = $companyLogger;
        $this->log->info("Log from web socket server");
    }

    /**
     * Called when a new connection is opened.
     *
     * @param ConnectionInterface $conn The new connection.
     */
    public function onOpen(ConnectionInterface $conn): void
    {
        $this->log->info("Log from web socket server. Trying to connect to web socket");
        try{
            $this->clients->attach($conn);
        } catch(\Exception $e){
            $this->log->error("Log from web socket server. Error while trying to connect to web socket", ["exception" => $e]);
        }
        $this->log->info('Log from web socket server. WebSocket connection established.');
    }

    /**
     * Called when a message is received.
     *
     * @param ConnectionInterface $from The connection sending the message.
     * @param string $msg The received message.
     */
    public function onMessage(ConnectionInterface $from, $msg): void
    {
    }

    /**
     * Called when a connection is closed.
     *
     * @param ConnectionInterface $conn The closed connection.
     */
    public function onClose(ConnectionInterface $conn): void
    {
        $this->log->info('WebSocket connection closed.');
        $this->clients->detach($conn);
    }

    /**
     * Called when an error occurs on a connection.
     *
     * @param ConnectionInterface $conn The connection with an error.
     * @param \Exception $e The exception thrown.
     */
    public function onError(ConnectionInterface $conn, \Exception $e): void
    {
        $this->log->error('WebSocket error occurred', ['exception' => $e]);
        $conn->close();
    }

    /**
     * Broadcasts a reload event for a given DataObject to all connected clients.
     *
     * @param string $message JSON-encoded message describing the DataObject to reload.
     */
    public function broadcastObjectReload(string $message): void
    {
        $decodedData = json_decode($message, true, flags: JSON_THROW_ON_ERROR);

        if (
            !is_array($decodedData)
            || !isset($decodedData['objectId'], $decodedData['objectPath'], $decodedData['objectClassGroup'])
        ) {
            return;
        }

        $objectId = $decodedData['objectId'];
        $objectFullPath = '/Home' . $decodedData['objectPath'];
        $objectClassGroup = $decodedData['objectClassGroup'];

        $payload = [
            'type' => 'reloadObject',
            'objectId' => $objectId,
            'objectPath' => $objectFullPath,
            'objectClassGroup'  => $objectClassGroup
        ];

        $jsonPayload = json_encode($payload, flags: JSON_THROW_ON_ERROR);

        foreach ($this->clients as $client) {
            try {
                $client->send($jsonPayload);
            } catch (\Exception $e) {
                $this->log->error(
                    "Warning: Failed to send message to a WebSocket client. Exception: ",
                    ['exception' => $e]
                );
            }
        }
    }

    /**
     * Extracts a path up to and including a given substring.
     *
     * @param string $path   Full path (e.g., "/Products/SalesStrategyProduct/Promoted/").
     * @param string $needle Substring to locate (e.g., "SalesStrategyProduct").
     *
     * @return string The path up to and including $needle, or the original $path if $needle not found.
     */
    protected function getPathUpToIncludingNeedle(string $path, string $needle): string
    {
        if ($needle === '') {
            return $path;
        }

        $pos = strpos($path, $needle);
        if ($pos === false) {
            return $path;
        }

        $endPos = $pos + strlen($needle);
        return substr($path, 0, $endPos);
    }
}

Command

PHPCopied
<?php

declare(strict_types=1);

namespace App\Command;

use App\WebSocket\CompanyDataObjectReloadServer;
use Ratchet\Http\HttpServer;
use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;
use React\EventLoop\Loop;
use React\Socket\SocketServer;
use React\Socket\SecureServer;
use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;
use Clue\React\Redis\Factory as RedisFactory;
use Clue\React\Redis\Client as ReactRedisClient;
use Psr\Log\LoggerInterface;
use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;

class CompanyDataObjectReloadServerCommand extends Command
{
    private $log;
    private $parameterBag;

    public function __construct(
        LoggerInterface $companyLogger,
        ParameterBagInterface $parameterBag
    ) {
        parent::__construct();
        $this->log = $companyLogger;
        $this->parameterBag = $parameterBag;
    }

    protected static $defaultName = 'app:dataobject-reload-websocket-server';

    protected function configure()
    {
        $this
            ->setDescription('Starts the DataObject reload WebSocket server.')
            ->setHelp('This command launches a WebSocket server that broadcasts DataObject reload events.');
    }

    protected function execute(InputInterface $input, OutputInterface $output): int
    {
        $reloadServer = new CompanyDataObjectReloadServer($this->log);

        $loop = Loop::get();

        $useSecureWebSockets = false; // Set to true if SSL/TLS is configured.

        $host = $this->parameterBag->get('app.websocket_host');
        $port = $this->parameterBag->get('app.websocket_port');

        $listenAddress = sprintf('%s:%s', $host, $port);

        $secureWebSock = new SocketServer($listenAddress, [], $loop);

        // 4. Setup WebSocket server using the configured socket.
        $wsServer = new WsServer($reloadServer);
        $httpServer = new HttpServer($wsServer);
        $ioServer = new IoServer($httpServer, $secureWebSock, $loop);

        $output->writeln("WebSocket server started on {$listenAddress}");

        $redisHost = $this->parameterBag->get('app.redis_host');
        $redisPort = $this->parameterBag->get('app.redis_port');

        $redisFactory = new RedisFactory($loop);
        $redisFactory->createClient("redis://{$redisHost}:{$redisPort}")->then(
            function (ReactRedisClient $client) use ($reloadServer, $output) {
                $client->subscribe('pimcore-reload')->then(function () use ($output) {
                    $output->writeln('Subscribed to Redis channel "pimcore-reload"');
                });

                $client->on('message', function ($channel, $message) use ($reloadServer) {
                    // Convert message to integer if necessary
                    $reloadServer->broadcastObjectReload($message);
                });
            },
            function (\Exception $e) use ($output) {
                $this->log->error("Error in {$this->defaultName}" , ['exception' => $e]);
            }
        );

        // 6. Run the event loop.
        $loop->run();

        return Command::SUCCESS;
    }
}

adding CSP to response

PHPCopied
<?php

namespace App\EventListener;

use Symfony\Component\EventDispatcher\EventSubscriberInterface;

use Symfony\Component\HttpKernel\Event\ResponseEvent;

class CompanyContentSecurityPolicyListener implements EventSubscriberInterface
{
    public static function getSubscribedEvents(): array
    {
        // Use a high priority to ensure this runs after Pimcore sets its headers
        return [
            ResponseEvent::class => ['onKernelResponse', -1100],
        ];
    }

    public function onKernelResponse(ResponseEvent $event): void
    {
        $response = $event->getResponse();
        $request = $event->getRequest();

        // Retrieve existing CSP header value, if any
        $existingCsp = $response->headers->get('content-security-policy');

        $wsProtocol = $request->isSecure() ? 'wss://' : 'ws://';

        $host = $request->getHost();

        $additionalConnectSrc = "{$wsProtocol}{$host}";

        if ($existingCsp) {
            // Check if a connect-src directive already exists
            if (preg_match("/connect-src\s([^;]+)/i", $existingCsp, $matches)) {
                // Append our source if not already included
                $currentConnectSrc = $matches[1];
                if (strpos($currentConnectSrc, $additionalConnectSrc) === false) {
                    $updatedConnectSrc = trim($currentConnectSrc) . " " . $additionalConnectSrc;
                    // Replace the existing connect-src part in the CSP header
                    $newCsp = preg_replace(
                        "/connect-src\s[^;]+/i",
                        "connect-src " . $updatedConnectSrc,
                        $existingCsp
                    );
                } else {
                    // If the source is already present, keep the existing policy unchanged
                    $newCsp = $existingCsp;
                }
            } else {
                // If no connect-src directive exists, append one to the existing policy
                $newCsp = trim($existingCsp, " ;") . "; connect-src 'self' " . $additionalConnectSrc;
            }
        } else {
            // If there's no existing CSP, define a new one with required directives
            $newCsp = "default-src 'self'; 
                    style-src 'self' 'unsafe-inline'; 
                    script-src 'self' 'unsafe-eval' 'unsafe-inline'; 
                    connect-src 'self' $additionalConnectSrc blob: https://liveupdate.pimcore.org/ https://nominatim.openstreetmap.org/; 
                    img-src 'self' data:;";
        }

        $response->headers->set('content-security-policy', $newCsp);
    }
}

And finally, the ExtJS code for connecting the WebSocket:

ExtJS

JAVASCRIPTCopied
pimcore.registerNS("pimcore.plugin.DataObjectReloader");


pimcore.plugin.DataObjectReloader = Class.create({

    // Configurable constants
    RECONNECT_INTERVAL_MS: 3000,

    initialize: function () {
        this.socket = null;
        this.maxRetries = 3;
        this.retryCount = 0; // Current attempt count
        
        this.connectWebSocket();
        this.setupUnloadHandler();
    },

    connectWebSocket: function () {
        // Determine protocol based on current page.
        const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';

        const hostname = window.location.hostname;  // try replacing with your domain or IP
        const socketUrl = protocol + hostname + '/ws';
                
        try {
            this.socket = new WebSocket(socketUrl);

            // Attach event handlers
            this.socket.onopen = () => {
                this.onWebSocketOpen();
                console.log("Websocket connection done");
            };
            this.socket.onmessage = this.onWebSocketMessage.bind(this);
            this.socket.onerror = this.onWebSocketError.bind(this);
            this.socket.onclose = this.onWebSocketClose.bind(this);

        } catch (e) {
            console.error('WebSocket initialization error:', e);
        }
    },

    scheduleReconnect: function () {
        if (this.retryCount < this.maxRetries) {
            this.retryCount++;

            console.warn(`WebSocket reconnect attempt ${this.retryCount} of ${this.maxRetries} in ${this.RECONNECT_INTERVAL_MS} ms...`);
            
            setTimeout(() => {
                this.connectWebSocket();
            }, this.RECONNECT_INTERVAL_MS);
        } else {
            console.error(`Max WebSocket reconnection attempts (${this.maxRetries}) reached. No further attempts will be made.`);
        }
    },

    onWebSocketOpen: function () {
        // Reset retry counter because we're successfully connected
        this.retryCount = 0;
    },

    onWebSocketMessage: function (event) {
        try {
            const data = JSON.parse(event.data);

            if (data.type === 'reloadObject') {
                console.log(data);
                if (data.objectId) {
                    this.handleReloadObject(data.objectId);
                }
                if (data.objectPath) {
                    this.handleReloadObjectTree(data.objectClassGroup, data.objectPath, data.objectId);
                }
            }
        } catch (error) {
            console.error('Error parsing WebSocket message:', error);
        }
    },

    
    onWebSocketClose: function () {
        this.scheduleReconnect();
    },

    onWebSocketError: function (error) {
        console.error('WebSocket error:', error);
    },    

     setupUnloadHandler: function () {
        window.addEventListener('beforeunload', () => {
            if (this.socket) {
                // Make sure we don't reconnect if the user intentionally leaves the page
                this.maxRetries = 0;
                this.socket.close();
            }
        });
    },

    
    handleReloadObject: function (objectId) {

        const tabPanel = Ext.getCmp('pimcore_panel_tabs');
        if (!tabPanel) {
            return;
        }

        const tabs = tabPanel.items.items;

        Ext.each(tabs, function (tab) {

            if (tab.id !== 'object_' + objectId) {
                return;
            }

            if (tab.object && typeof tab.object.reload === 'function') {
                tab.object.reload();
            } else {
                console.warn('Reload method not found on tab for objectId:', objectId);
            }
        });
    },

    handleReloadObjectTree: function (parentFolderName, objectPath, objectId) {
        try {
            const layoutObjectTree = pimcore.globalmanager.get("layout_object_tree");
            if (!layoutObjectTree || !layoutObjectTree.tree) {
                console.warn("Tree panel not found.");
                return;
            }
            
            const treePanel = layoutObjectTree.tree;
            
            console.log("Attempting to expand path:", objectPath);
            treePanel.expandPath(
                objectPath,
                "text",
                "/",
                function(success, lastNode) {
                    if (!success) {

                        console.warn("Could not expand path:", objectPath);
                        if (objectId) {
                            console.log("Attempting to locate object by ID:", objectId);
                            const root = treePanel.getRootNode();
                            let foundNode = null;
    
                            function searchNode(node) {
                                if (node.id == objectId) {
                                    foundNode = node;
                                    return;
                                }
                                if (node.childNodes) {
                                    for (let child of node.childNodes) {
                                        searchNode(child);
                                        if (foundNode) return;
                                    }
                                }
                            }
    
                            searchNode(root);
    
                            if (foundNode) {
                                treePanel.getSelectionModel().select(foundNode);
                                if (typeof foundNode.scrollIntoView === 'function') {
                                    foundNode.scrollIntoView();
                                }
                                console.log("Found and selected object with ID:", objectId);
                            } else {
                                console.warn("Object not found by ID:", objectId);
                            }
                        }
                    } else {
                        console.log("Successfully expanded path:", objectPath);
                        // If objectId is provided and matches the expanded node, select it
                        if (objectId && lastNode && lastNode.id == objectId) {
                            treePanel.getSelectionModel().select(lastNode);
                            if (typeof lastNode.scrollIntoView === 'function') {
                                lastNode.scrollIntoView();
                            } else {
                                console.warn("scrollIntoView not found for ID:", objectId);
                            }
                        }
                    }
                },
                null,   // no explicit scope
                true,   // deep expansion along the given path
                false   // disable animation for performance
            );
        } catch (error) {
            console.error("Error expanding object path:", error);
        }
    }
});

// Instantiate the plugin when the Pimcore admin is ready.
Ext.onReady(function () {
    new pimcore.plugin.DataObjectReloader();
});

If anyone has suggestions or improvements to help resolve the connection issue (or enhance the setup), any help is highly appreciated.