美文网首页
前端页面对接nats服务

前端页面对接nats服务

作者: ZZES_ZCDC | 来源:发表于2024-07-28 10:43 被阅读0次

最近需要对接后端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

相关文章

  • Go Micro(4)——基于消息队列NATS构建微服务

    Go Micro(4)——基于消息队列NATS构建微服务 这篇文章我们会讨论基于 NATS 使用 Micro。讨论...

  • nats安装与客户端连接

    1. 下载与安装服务端程序 下载地址:https://docs.nats.io/nats-server/insta...

  • ajax跨域访问,获取不到sessionid

    和前端对接前端在页面通过ajax请求我电脑上的后台数据,通过我的ip地址访问登录成功后,进入功能页面时后台取不到s...

  • 告别远程debug,用端口转发实现本地调试

    在web开发过程中,如果是前后端分离进行开发,前端资源发布到服务器后,访问前端页面,前端页面请求服务端资源,在这种...

  • angular部署服务器

    1前端展示数据静态页面:定义没有和服务器进行处理的页面静态页面:动画,

  • webstorm中的项目发布到tomcat中(踩坑记..)

    刚开始接触前端,用webstorm写了一个页面和后台对接,后台想在自己的电脑上访问我的页面。也就是想将这个界面发布...

  • JS

    一、公司开发模式 1.传统开发模式:JSP套页面2.前后端分离的模式:就是前端干前端的,后端干后端的,然后对接口,...

  • websocket简单试用

    今天遇到一个需求,需要对接第三方扫码跳转。一种方案是前端页面轮询后端服务,但是这种空轮询会虚耗资源,实时性比较差而...

  • BlockLang 页面(设计草稿)

    页面 一个完整的程序模块由一个前端页面和多个后端服务组成,然后使用后端服务的 URL 将前端和后端关联起来。我们将...

  • Vue、React前端项目打包部署

    前端单页面应用部署 前端打包上线部署方案之 hash路由模式 对于hash路由模式打包的单页面应用,直接发布到服务...

网友评论

      本文标题:前端页面对接nats服务

      本文链接:https://www.haomeiwen.com/subject/mjzbhjtx.html