动手实验:基于 MNS, 0 基础轻松构建 Web Client|学习笔记(一)

简介: 快速学习动手实验:基于 MNS, 0 基础轻松构建 Web Client

开发者学堂课程消息队列 MNS (RocketMQ 轻量版)入门课程动手实验:基于 MNS, 0 基础轻松构建 Web Client 学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/1236/detail/18412


动手实验:基于 MNS,0基础轻松构建 Web Clinent

 

实际演示

 

本次课程重点讲解基于mns,0基础轻松构建 web clinent的一个类似于客户端,本次课程也是主要为大家去介绍现在的clan,怎么去使用以及他的流程是什么,他的一些类似核心操作有哪些,也可以帮助更好的梳理mns这款产品,主要是以实践课为依托,所以直接去看操作文档,这次主要是通过express,然后从0~1搭建一个具备消息收发,资源删除等能力的轻量的web的一个client端。

这个其实也是依托于现在诺基s的jdk,可以核心重点通过这个课程来掌握mns的基本的资源概念以及比较常用的一些操作,还有如何使用sdk去收发的一些消息,以及怎样去构建一个mns的一个client,这是现在主要的一个内容,背景知识是有两块,第一块其实是对模型的一些类型介绍,可能核心概念就会有q,可能会有生产者,消费者的以及现在的一些类似于朋友消息,延迟消息等一些高级特性,那主题队列就是一比一个模型,它其实主要是发布者,订阅者,还有包括具体的一个订阅来去组成的,以及现在的什么推送地址,这个其实都是现在调配的核心概念,这篇文档,也会放到这门课程的下方,如果大家感兴趣的话,可以持续去研究一下这篇文档上所写的一些内容。

 

现在开始一些现有的一些实践,因为本次课程也主要是以实践为主,那这里核心逻辑其实也是依然调用node js的一个组件库,第一步是要去安装一个的诺js,安装类似于苹果用户,就可以直接用第二开门,这个工具来去安装,安装也是比较简单的,其次其实也可以去访问他的Note的一些类型官方地址,这里会有比较编译好的包,比方说苹果的包,windows包,都是可行的。

image.png

这个也有比较多的一个方案,让大家去做一个选择,第一步,因为本身就是note js建的,所以说本文课程的话,可能要在本地去安装一个环境,那安装完之后怎么验证安装好了,可以直接打开client。

可以直接在目录去打开,打开类型民航工具,然后输入note,可以发现已经提示版本是多少,那这样的话其实就是已经安装好了,

image.png

安装完成之后,我们可以去新建一个目录,去测试,这块的js sdk那些内容,这不是现在这门课程的主要内容,假如感兴趣的话,可以跳到我们上一节课程里面去体验一下,现在sDK操作就是可以新建一个目录,然后去安装它的sdk。

去新建index的这种测试文件,这个其实是在上节课里面其实也有演示那运行完之后,然后查看到相关的一些访问信息,就代表我们现在的sdk是可以正常运行的,那这块儿其实就是sdk的内容

下面其实就是如何去把的client给构建出来,那第一步其实这块儿的话代码是已经写好了可以直接去调用s code,打开之前的一个测试文档,这个其实是空的,然后直接打开现在的命令行工具,他显示已经存在这个路径了,删除之后,然后get一下,就可以直接查看到已经把这个代码给下载下来了,然后download下来,就可以直接看到它里面的一些内容,就比方说可以先去看一下一些类似于使用说明,这类的话其实就是他的一些使用说明,比方说他使用多的js构建,他可能要先去替换一下阿里的simple的一个文件,才可以正常运行

运行的时候需要去APP js就是一个运行方式那这里其实是现在的一个概述,可以看一下它的一些包,这个就可以将它删除。他有一些调试代码,那这块儿其实就是现在整体包或者是client的一个代码的一个情况,然后呢在打开那个ctrl,这里有一个类似于fake,那这个读取完毕之后,生成内容,他应该解析的是阿里的一个文件。然后得先去安装一个依赖,那就可以按照现在的教程,安装一下现在的一些程序的依赖,而这可能要稍微久等一会,因为他是原端下载的,它有到一些外部的一些报名,所以说可能那构建起来没有那么快,上面显示我们已经构建成功了,LOGO那里面其实有核心,mns 就是我们现在本地的已经引用进去了,那这里的话其实就是已经构建成功了。然后第二步呢他显示一个sample要改为线下的,一个sample改成线上的一个环境,在这里的话,刚才其实就已经复制了一份,然后这一份的话就可能要去改成线上的一个环境,那为了这次演示方便,就不再单独去写出。

输入之后,大家应该就可以直接在官网里面去找到这些信息,那这里的话为了sdk的一些安全,因为之前其实也有做过一些类似测试,所以这里的话就直接用之前测试的一个,然后给他替换掉就可以了,那这里的话其实已经替换好了,视频我已经经过了一些剪辑和加快,那这样的话,可以直接去验证一下现在的效果,那这里其实fake的ctrl已经替换完成,然后可以按照教程,去把这个替换掉,然后去直接sit down根目录进行这个APP到js,我们现在在根目录,我看一下,那这边也就提示我现在其实已经可以访问我的一个端了,然后直接去访问一下我们local3000的一个端口,然后这里他其实有几个类型,第一个类型是create就是说去创建,第二个就是现在的一些q的一些情况,然后第三个其实就是现在的一个属性值,发送的消息拿消息删除,消息删除q等一些,原子操作这边,贝壳有创建淘贝壳发送消息然后列出,现在列出一些情况以及一些逃避的属性,先看一下第一步,第一步可能它上面写的是创建,为了给大家更直观的去展示,这里我也其实打开了一个空台的一个地址,我们可以去对照着去看他现在创建的一个效果,因为这个微信是在青岛,所以说这块的话,就选到青岛,然后比方说呢我这个微信的一个client端,新增一个类似于q,他就会返回已经成功创建了,这个是怎么用的呢,其实这里其实是有那个代码的一些类似于详细的一些梳理,它的主要核心逻辑其实它这个其实是他的IP的s,然后他其实是引了两个东西,之前是create,所以他这里的逻辑写的非常简单,就是说直接去调我们CK,因为本身来讲,我们现在在前面去声明了一个mns的client,引入了一个包装,然后这里是有一些类似说实话,比方说我去在本地的jason里面,然后去拿到类似于信息,然后我去生成一个config的一个类似于mns的一个类似于方法,然后我这里去掉的话,比方说直接就去掉方法Q,我再从前端去拿到这个q  name的值,这个前端是一点js去写的,在这里你比方说这里的ID就是q点,我这里的话就可以直接拿到这个值,然后通过post请求,给他发送过来,那这样的话其实就非常明确,我就传值进来。然后现在的create的一个方法,然后把内部给拿到,拿到之后呢,然后我再把他拿到一些信息,渲染到我们的前端,这其实就是我们现在的返回结果。

现在到我们前端,我们就完成了现在整体的一个操作了,那也是出来的话,就是我刚刚去产生的一个效果,这其实是非常简单的一个create一个操作,然后我们可以再去看一下还有什么能力,我们也是post,去发送一条消息,看一下我们刚刚创建的q,在控制台刷新的话,应该也是可以看到看到我们刚刚去产生的一个值,然后呢我在这里面去发送一条消息,比方说我要发什么呢,我要发test 123321我发送完,他告诉我我已经发送成功了,然后就可以直接我然然后md五包的md 5只是这个,然后呢我们其实就可以直接在我们控台去把它消费出来,但其实消费的话,其实这也是有一个代码的。

相关实践学习
消息队列RocketMQ版:基础消息收发功能体验
本实验场景介绍消息队列RocketMQ版的基础消息收发功能,涵盖实例创建、Topic、Group资源创建以及消息收发体验等基础功能模块。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
相关文章
|
7月前
|
Java API 网络架构
关于 Spring Integration 你知道多少,包含集成MQTT案例讲述及源码3
关于 Spring Integration 你知道多少,包含集成MQTT案例讲述及源码
1134 0
关于 Spring Integration 你知道多少,包含集成MQTT案例讲述及源码3
|
2月前
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
326 0
|
2月前
|
网络协议 安全 JavaScript
Web实时通信的学习之旅:WebSocket入门指南及示例演示
Web实时通信的学习之旅:WebSocket入门指南及示例演示
202 0
|
4月前
|
C# 开发者
全面提升开发效率:详解如何使用Blazor Server与SignalR打造实时Web应用,从零开始构建聊天室示例并掌握实时通信核心技术
【8月更文挑战第31天】提高生产力不仅关乎效率提升,更在于用更少时间完成更多任务。本文将通过具体代码示例,介绍如何结合 Blazor Server 和 SignalR 构建实时 Web 应用。从创建 Blazor 项目到添加 SignalR 支持,再到实现客户端与服务器间的实时通信,每个步骤都详细讲解。通过这一组合,C# 开发者能获得前后端一致的编程体验,轻松打造高效、响应迅速的实时应用。实时通信功能已在社交、协作等多个领域发挥重要作用,本文将助你掌握这一强大技术组合。
112 0
|
7月前
|
消息中间件 Java Docker
关于 Spring Integration 你知道多少,包含集成MQTT案例讲述及源码1
关于 Spring Integration 你知道多少,包含集成MQTT案例讲述及源码
581 0
|
7月前
|
XML Java API
关于 Spring Integration 你知道多少,包含集成MQTT案例讲述及源码2
关于 Spring Integration 你知道多少,包含集成MQTT案例讲述及源码
651 0
|
存储 缓存 监控
Sentry Web 前端监控 - 最佳实践(官方教程)
Sentry Web 前端监控 - 最佳实践(官方教程)
1228 0
Sentry Web 前端监控 - 最佳实践(官方教程)
|
人工智能 Serverless
课时8:典型案例1:一键迁移 Web 应用
典型案例1:一键迁移 Web 应用
|
JSON 监控 Serverless
课时10:典型案例3:十分钟搭建弹性可扩展的 Web API
课时10:典型案例3:十分钟搭建弹性可扩展的 Web API
|
人工智能 监控 Serverless
课时10:典型案例3:十分钟搭建弹性可扩展的 Web API(一)
典型案例3:十分钟搭建弹性可扩展的 Web API