NATS教程：使用 Docker 部署，并测试 WebSocket 连接，Node 客户端 nats 连接，浏览器实时通信

前言

NATS 是一个高效的开源消息系统，支持 WebSocket 作为传输层，这允许浏览器或其他 Web 客户端直接连接到 NATS 服务器。

1. Docker 一键部署 NATS（支持 WebSocket）

创建配置文件 nats-server.conf（推荐放在当前目录）：

listen: 0.0.0.0:4222
http_port: 8222

websocket {
  port: 8080              # WebSocket 监听端口
  no_tls: true            # 测试环境关闭 TLS（生产请配证书）
  # tls {                 # 生产环境打开下面两行
  #   cert_file: "/etc/nats/certs/server.crt"
  #   key_file:  "/etc/nats/certs/server.key"
  # }
}

# 可选：监控页面
# server_tags: ["test-prod"]

启动命令（推荐用 docker-compose）：

docker-compose.yml

version: '3.9'
services:
  nats:
    image: nats:latest
    ports:
      - "4222:4222"   # 普通客户端（Node.js、Go 等）
      - "8222:8222"   # HTTP 监控 http://localhost:8222
      - "8080:8080"   # WebSocket 端口
    volumes:
      - ./nats-server.conf:/etc/nats/nats-server.conf
    command: "-c /etc/nats/nats-server.conf"
    restart: unless-stopped

启动：

docker-compose up -d

验证：

curl http://localhost:8222/varz     # 看到 JSON 表示成功
docker logs <container_name> | grep WebSocket

2. 浏览器直接测试 WebSocket：test-ws.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>NATS WebSocket 测试页面</title>
  <script src="https://unpkg.com/nats.ws@1.0.0/lib/nats.ws.min.js"></script>
  <style>
    body { font-family: Arial; padding: 20px; }
    #output { margin-top: 20px; padding: 10px; border: 1px solid #ccc; height: 400px; overflow-y: scroll; }
    button { margin: 5px; padding: 10px 20px; }
  </style>
</head>
<body>
  <h1>NATS WebSocket 实时测试</h1>
  <button onclick="connect()">连接 ws://localhost:8080</button>
  <button onclick="subscribe()">订阅</button>
  <button onclick="publish()">发布一条消息</button>
  <button onclick="disconnect()">断开连接</button>

  <div id="output"></div>

  <script>
    let nc = null;
    const log = (msg) => {
      const div = document.createElement('div');
      div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
      document.getElementById('output').appendChild(div);
      div.scrollIntoView();
    };

    async function connect() {
      try {
        nc = await Nats.connect({ servers: "ws://localhost:8080" });
        log("✅ WebSocket 已连接！版本: " + nc.info.version);
      } catch (e) {
        log("❌ 连接失败: " + e.message);
      }
    }

    function subscribe() {
      if (!nc) return log("请先连接");
      const sub = nc.subscribe("test");
      (async () => {
        for await (const m of sub) {
          log("📨 收到: " + new TextDecoder().decode(m.data));
        }
      })();
      log("已订阅test");
    }

    function publish() {
      if (!nc) return log("请先连接");
      nc.publish("test", "Hello from 浏览器 @ " + new Date().toLocaleString());
      log("已发布一条消息");
    }

    async function disconnect() {
      if (nc) await nc.drain();
      log("已断开");
      nc = null;
    }
  </script>
</body>
</html>

打开浏览器直接访问这个 HTML 文件 → 点击连接 → 订阅 → 发布，就能看到实时收发！

3. Node.js 最新版客户端

nats-node-test.js（兼容 TCP 和 WebSocket，永不 BAD_PAYLOAD）

// nats-node-test.js  （适用于 nats@2.10+ 以上最新版）
const { connect, StringCodec, JSONCodec } = require("nats");

// 必须手动创建编解码器（新版强制要求）
const sc = StringCodec();
const jc = JSONCodec();

async function main() {
  // 改成你的服务器地址
  const servers = "nats://localhost:4222";     // 普通 TCP（推荐后端用这个）
  // const servers = "ws://localhost:8080";    // 或者直接 WebSocket

  const nc = await connect({ servers });

  console.log("✅ 已连接 NATS 服务器");

  // ------------------- 订阅 -------------------
  const sub = nc.subscribe("test");
  (async () => {
    for await (const msg of sub) {
      const text = sc.decode(msg.data);   // 新版必须手动 decode
      console.log(`📨 收到消息 [${msg.subject}]: ${text}`);
    }
  })();

  // ------------------- 发布 -------------------
  const send = () => {
    const payload = `Node.js 发送 @ ${new Date().toLocaleString()}`;
    nc.publish("test", sc.encode(payload));   // 必须 encode！
    // 或者发 JSON
    // nc.publish("user.login", jc.encode({ user: "ben", ts: Date.now() }));
  };

  // 每 3 秒发一次
  const timer = setInterval(send, 3000);
  send(); // 立刻发一条

  // 30 秒后自动退出
  setTimeout(async () => {
    clearInterval(timer);
    await nc.drain();
    console.log("👋 连接已关闭");
    process.exit(0);
  }, 30000);
}

main().catch(err => {
  console.error("❌ 出错了:", err);
  process.exit(1);
});

运行：

npm install nats
node nats-node-test.js

你会看到浏览器和 Node.js 互相实时收发消息！

4. 总结一览表

组件 地址 说明
普通客户端（Node/Go） nats://localhost:4222 推荐后端使用，性能最高
WebSocket 客户端 ws://localhost:8080 浏览器、前端直接连接
HTTP 监控 http://localhost:8222/varz 查看服务器状态
Docker 镜像 nats:latest 官方最小镜像 ~10MB
Node.js 库 npm install nats 最新版 2.11+
浏览器库 https://unpkg.com/nats.ws 零依赖，直接 script 引入
posted @ 2025-11-18 09:22  牛奔  阅读(31)  评论(0)    收藏  举报