如何在Laravel Mix中修改BrowserSync的socketURL参数

环境信息 #

• Laravel Mix 版本：laravel-mix@6.0.49
• Node 版本：v14.17.4
• NPM 版本：6.14.14
• 操作系统：基于hp:8.1.12RC1-fpm-alpine3.16、node:14.17.4和nginx:1.19.2-alpine-perl构建的Docker Pod

问题描述 #

我在Docker Pod中运行Laravel项目，Pod部署在宿主机Nginx之后，且Pod内部自带另一台Nginx代理服务器。通过这种架构，我可以在同一宿主机上运行多个该Docker Pod实例，每个实例使用专属的端口范围。

由于所有实例都在同一宿主机上，无法为每个BrowserSync/Node实例都使用3000端口（Pod内部用3000端口，但WebSocket连接和客户端脚本获取需要使用外部端口）。目前我能通过自定义代理端口获取browser-sync-client.js，但脚本里似乎硬编码了默认的3000端口，导致WebSocket连接指向该端口，在代理自定义端口的场景下无法正常工作。

请问如何通过Webpack配置中的Mix选项修改socketUrl？

当前配置代码：

mix.browserSync({
    proxy: "http://node:3000", // docker-compose.yml中的服务名称，使用http是因为Web服务器处理加密
    host: "node", // 服务容器的IP
    open: false,
    port: 3000,
    logConnections: true, // 调试用，非必需
    logLevel: "info", // 调试用，非必需 可选值debug/info/silent
    // BrowserSync通过WebSocket同步点击、滚动和表单输入的功能
    ghostMode: {
        clicks: false,
        forms: false,
        scroll: false,
    },
});

解决方案 #

要修改BrowserSync的Socket连接地址，只需在browserSync配置中添加socket选项，指定外部访问的地址即可，有两种配置方式：

方式一：指定Socket的域名/IP和端口 #

直接设置socket.domain为宿主机的IP和映射的外部端口，BrowserSync会自动生成正确的Socket地址：

mix.browserSync({
    proxy: "http://node:3000",
    host: "node",
    open: false,
    port: 3000,
    logConnections: true,
    logLevel: "info",
    ghostMode: {
        clicks: false,
        forms: false,
        scroll: false,
    },
    // 配置Socket外部访问地址
    socket: {
        domain: "宿主机IP:外部映射端口" // 示例："192.168.1.10:8080"
    }
});

方式二：直接设置完整的Socket URL #

如果需要更精确的控制（比如使用HTTPS），可以直接指定Socket的完整URL：

mix.browserSync({
    proxy: "http://node:3000",
    host: "node",
    open: false,
    port: 3000,
    logConnections: true,
    logLevel: "info",
    ghostMode: {
        clicks: false,
        forms: false,
        scroll: false,
    },
    socket: {
        url: "wss://宿主机IP:外部映射端口/browser-sync/socket.io" // HTTPS场景用wss协议
    }
});

注意事项 #

• 替换配置中的宿主机IP和外部映射端口为实际的宿主机IP和Docker端口映射值，确保和你的端口转发规则一致。
• 若外部访问使用HTTPS，必须将协议从ws://改为wss://，否则WebSocket连接会失败。
• 修改配置后重启Mix开发服务，browser-sync-client.js中的Socket地址会自动更新为你指定的地址，解决端口不匹配的问题。

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