如何将Cowboy(Erlang) WebSocket连接至webflow.io生成的网页

整套实现无额外第三方依赖，两端代码直接复制即可运行，不需要改造Webflow自动生成的原生页面结构。

第一步：部署最简Cowboy WebSocket服务 #

使用Cowboy原生WebSocket回调编写服务逻辑，代码如下：

-module(cowboy_ws_demo).
-export([start/0, init/2, websocket_init/1, websocket_handle/2, websocket_info/2]).

% 启动服务，监听8080端口
start() ->
    {ok, _} = cowboy:start_clear(
        ws_http_listener,
        [{port, 8080}],
        #{env => #{dispatch => cowboy_router:compile([{'_', [
            {"/ws", ?MODULE, []}
        ]}]}}
    ),
    ok.

% 处理HTTP协议升级到WebSocket的握手流程
init(Req, State) ->
    {cowboy_websocket, Req, State, #{
        idle_timeout => 60000 % 1分钟无消息自动断开连接
    }}.

% WebSocket连接建立完成触发
websocket_init(State) ->
    % 连接建立后主动给前端推送欢迎消息
    {[{text, <<"连接成功：Cowboy服务端已就绪">>}], State}.

% 处理前端推送过来的消息
websocket_handle({text, Msg}, State) ->
    % 服务端控制台打印收到的消息
    io:format("收到前端发送的消息: ~p~n", [Msg]),
    % 回传消息给前端
    {[{text, <<"服务端回执：已收到 -> ", Msg/binary>>}], State};
websocket_handle(_Unsupported, State) ->
    {[], State}.

% 处理服务端内部触发的异步消息
websocket_info(_Info, State) ->
    {[], State}.

运行方式：

• 提前在项目中引入cowboy依赖
• 编译模块后，在Erlang shell中执行c(cowboy_ws_demo), cowboy_ws_demo:start().即可启动服务，WebSocket监听路径为ws://<服务IP>:8080/ws

第二步：在Webflow页面嵌入交互JS #

进入Webflow项目的页面设置面板，找到「自定义代码」输入区域，将以下JS代码粘贴到页面底部代码块中，发布页面即可生效，不需要手动修改Webflow生成的HTML结构：

const WS_SERVER_URL = "ws://localhost:8080/ws"; // 生产环境替换为实际的服务地址
let webSocket;

function connectToServer() {
  // 初始化WebSocket连接
  webSocket = new WebSocket(WS_SERVER_URL);

  // 连接成功触发
  webSocket.onopen = () => {
    console.log("与Cowboy服务连接成功");
    // 绑定Webflow中的按钮点击事件：给元素设置id为`send-btn`即可
    document.querySelector("#send-btn")?.addEventListener("click", () => {
      // 读取Webflow输入框的内容：给输入框设置id为`msg-input`即可
      const inputContent = document.querySelector("#msg-input")?.value || "测试消息";
      webSocket.send(inputContent);
    });
  };

  // 收到服务端消息触发
  webSocket.onmessage = (event) => {
    console.log("收到服务端返回:", event.data);
    // 将消息渲染到Webflow的文本块中：给文本块设置id为`msg-display`即可
    const displayNode = document.querySelector("#msg-display");
    if (displayNode) displayNode.textContent = event.data;
  };

  // 连接断开触发
  webSocket.onclose = () => {
    console.log("连接断开，3秒后自动重连");
    setTimeout(connectToServer, 3000);
  };

  // 连接出错触发
  webSocket.onerror = (error) => {
    console.error("连接异常:", error);
  };
}

// 页面DOM加载完成后自动发起连接
window.addEventListener("DOMContentLoaded", connectToServer);

交互流程说明 #

• 页面发布后加载时，JS会自动向Cowboy服务发起WebSocket连接
• 连接建立后，Cowboy服务会主动推送欢迎消息，前端收到后自动更新页面文本块的展示内容
• 用户在Webflow的输入框输入内容，点击绑定的发送按钮，消息会实时推送到Cowboy服务端
• Cowboy服务端收到消息后会打印日志，并回传回执消息，前端收到后更新页面展示
• 连接意外断开时，前端会自动3秒重连，不需要用户手动刷新页面

落地注意事项 #

• HTTPS协议页面的要求：如果Webflow发布的页面使用HTTPS访问，WebSocket连接地址必须替换为wss://开头的加密协议，否则浏览器会拦截混合内容请求，导致连接失败
• 元素id绑定：JS代码中引用的send-btn、msg-input、msg-display，需要在Webflow的元素设置面板中手动为对应元素配置相同的自定义id，避免事件绑定失效
• 网络配置：公网部署时需要放开Cowboy服务监听端口的防火墙规则，确保WebSocket路径可以被外网访问

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