DDEV环境下如何建立WebSocket连接

核心问题分析 #

DDEV默认路由仅处理HTTP/HTTPS流量，WSS连接需要额外配置端口转发、Nginx代理规则，同时要确保Ratchet服务的绑定地址正确，单纯暴露端口无法完成完整的WSS请求路由。

具体解决步骤 #

1. 配置端口映射 #

在项目根目录新建.ddev/docker-compose.websocket.yaml文件，添加端口转发规则（假设Ratchet在web容器内监听8080端口，按需替换）：

version: '3.6'
services:
  web:
    ports:
      - "3000:8080"

2. 添加Nginx WSS代理规则 #

新建.ddev/nginx_full/websocket.conf文件，配置Nginx处理WSS请求的反向代理：

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 443 ssl;
    server_name websocket.ddev.site;

    ssl_certificate /etc/ssl/certs/master.crt;
    ssl_certificate_key /etc/ssl/certs/master.key;

    location / {
        proxy_pass http://web:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header Host $host;
    }
}

3. 调整Ratchet服务绑定地址 #

修改你的Ratchet启动代码，确保绑定到容器的所有网络接口（而非localhost）：

use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use YourApp\WebSocketHandler;

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new WebSocketHandler()
        )
    ),
    8080,
    '0.0.0.0' // 必须绑定到0.0.0.0，容器外部才能访问
);

$server->run();

4. 重启DDEV服务 #

执行命令让配置生效：

ddev restart

5. 修正前端连接地址 #

前端JS使用标准443端口的WSS地址（无需指定3000，Nginx会自动转发）：

const ws = new WebSocket('wss://websocket.ddev.site');
ws.onopen = () => console.log('连接成功');
ws.onerror = (err) => console.error('连接错误:', err);

常见排查点 #

• 检查Ratchet进程状态：执行ddev exec ps aux | grep php确认服务在容器内正常运行
• 排查端口占用：宿主机执行lsof -i :3000，若端口被占用则更换映射端口
• 查看Nginx日志：ddev logs -s nginx检查代理规则是否有错误

内容的提问来源于stack exchange，提问作者Marlinek