前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端页面对接nats服务

前端页面对接nats服务

原创
作者头像
治电小白菜
发布2024-07-29 10:45:52
920
发布2024-07-29 10:45:52
举报
文章被收录于专栏:技术综合

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

1. 启动nats服务端

1) 拉取nats服务端镜像

代码语言:shell
复制
podman pull docker.1panel.live/library/nats

2) 运行nats服务端

需要配置websocket

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

代码语言:config
复制
websocket 
{
     port: 8080
     no_tls: true
}

然后启动nats服务

代码语言:shell
复制
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安装

代码语言:shell
复制
brew tap nats-io/nats-tools
brew install nats-io/nats-tools/nats

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

代码语言:shell
复制
nats reply xhz.cnm '哎呦,你干嘛'

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

1)新建vite原生js项目

2)安装依赖

代码语言:shell
复制
pnpm add nats.ws

3)代码编写

代码语言:typescript
复制
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. 效果

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 启动nats服务端
    • 1) 拉取nats服务端镜像
      • 2) 运行nats服务端
        • 3)安装nats-cli工具
          • 4)nats-cli启动 回应监听 客户端
          • 2. 浏览器接入nats的websocket服务
            • 1)新建vite原生js项目
              • 2)安装依赖
                • 3)代码编写
                • 3. 效果
                相关产品与服务
                容器服务
                腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档