最近需要对接后端nats接口，所以学习记录下

1. 启动nats服务端

1) 拉取nats服务端镜像

podman pull docker.1panel.live/library/nats

2) 运行nats服务端

需要配置websocket

在本机目录新建一个nats.conf文件，例如/home/xxx/nats.conf，文件内容如下

websocket 
{
     port: 8080
     no_tls: true
}

然后启动nats服务

podman run -it --rm  -v /Users/ren/container:/container -p 8080:8080 -p 4222:4222 -p 8222:8222 nats -c /container/nats.conf --http_port 8222

3）安装nats-cli工具

方便测试用， https://docs.nats.io/nats-concepts/what-is-nats/walkthrough_setup

我是mac，使用brew安装

brew tap nats-io/nats-tools
brew install nats-io/nats-tools/nats

4）nats-cli启动 回应监听 客户端

nats reply xhz.cnm '哎呦，你干嘛'

2. 浏览器接入nats的websocket服务

1）新建vite原生js项目

2）安装依赖

pnpm add nats.ws

3）代码编写

import { connect, StringCodec } from 'nats.ws'
export async function setupCounter(element: HTMLButtonElement) {
  const conn = await connect(
    {
      servers: ['ws://127.0.0.1:8080'],
    },
  );
  const res = await conn.request('xhz.cnm')
  const sc = StringCodec()
  console.log(sc.decode(res.data))
  conn.close()
}

3. 效果

image.png