本文介绍使用 websocket 替代 html 模板和 postmessage 实现 go 与浏览器的实时、低延迟双向通信，特别适用于 twitter 流式 api 等持续推送场景，兼容所有现代浏览器，无需插件或 chrome 专属技术。

在构建实时 Web 应用（如监听 Twitter 流式 API 并动态更新页面）时，传统 HTTP 轮询或服务端模板渲染（如 html/template）存在明显局限：前者造成冗余请求与延迟，后者需整页刷新或复杂 DOM 操作，且无法保持原有内容状态。此时，WebSocket 是最直接、高效且标准化的替代方案——它建立持久化全双工通道，允许 Go 后端主动向已连接的 HTML 页面推送新数据，前端则可即时响应并增量更新 DOM，完全保留历史内容。

✅ 推荐实现方案（Go + 浏览器原生 WebSocket）

Go 社区主流采用 github.com/gorilla/websocket（功能完备、生产就绪、文档完善），远优于已归档的 golang.org/x/net/websocket。以下为最小可行示例：

1. Go 后端（main.go）

fastgithub

提供本地代理服务器以加速 GitHub 访问，显著提升 Linux、macOS、Windows 下克隆、推送和下载的速度。

下载

package main

import (
    "log"
    "net/http"
    "time"

    "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool { return true }, // 生产环境请严格校验 Origin
}

func streamHandler(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println("Upgrade error:", err)
        return
    }
    defer conn.Close()

    // 模拟 Twitter 流：每 2 秒推送一条新推文
    ticker := time.NewTicker(2 * time.Second)
    defer ticker.Stop()

    for range ticker.C {
        msg := map[string]interface{}{
            "type": "tweet",
            "text": "实时推文 #" + time.Now().Format("15:04:05"),
            "ts":   time.Now().Unix(),
        }
        if err := conn.WriteJSON(msg); err != nil {
            log.Println("Write error:", err)
            return
        }
    }
}

func homeHandler(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "index.html")
}

func main() {
    http.HandleFunc("/", homeHandler)
    http.HandleFunc("/stream", streamHandler)
    log.Println("Server starting on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

2. HTML 前端（index.html）

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head><title>Twitter Stream</title></head>
<body>
  <h2>实时推文流</h2>
  <div id="tweets"></div>

  <script>
    const ws = new WebSocket("ws://localhost:8080/stream");

    ws.onopen = () => console.log("WebSocket connected");

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === "tweet") {
        const div = document.createElement("div");
        div.innerHTML = `<strong>[${new Date(data.ts * 1000).toLocaleTimeString()}]</strong> ${data.text}`;
        document.getElementById("tweets").appendChild(div);
        // 自动滚动到底部
        div.scrollIntoView({ behavior: "smooth" });
      }
    };

    ws.onerror = (err) => console.error("WebSocket error:", err);
    ws.onclose = () => console.log("WebSocket closed");
  </script>
</body>
</html>

⚠️ 关键注意事项

• 跨域处理：CheckOrigin 默认拒绝跨域连接，开发时可临时设为 return true，但生产环境务必校验 r.Header.Get("Origin")。
• 连接生命周期管理：前端需监听 onclose 并实现重连逻辑（如指数退避），后端应妥善处理 conn.ReadMessage() 超时或断连。
• 消息格式：推荐使用 WriteJSON()/ReadJSON() 传输结构化数据，避免手动序列化；若需二进制数据（如图片流），可用 WriteMessage(websocket.BinaryMessage, ...)。
• 性能与扩展性：单机可支撑数千并发连接；高并发场景建议结合 Redis Pub/Sub 或 Kafka 解耦后端业务逻辑与 WebSocket 连接管理。

✅ 总结：WebSocket 是 Go Web 实时通信的黄金标准——它不依赖浏览器插件（如 NaCl）、不限制浏览器厂商、无需轮询开销，且能完美满足“流式更新、保留旧内容”的核心需求。从 Gorilla WebSocket 入手，搭配浏览器原生 API，即可快速构建健壮、可扩展的实时 Web 应用。