mqtt

  1、什么是mqtt?

  MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议,轻量,高效,具体,请参考菜鸟教程 : https://www.runoob.com/w3cnote/mqtt-intro.html

  2、mqtt的几个重要概念

  • MQTT协议中有三种身份:发布者(Publish)、代理(Broker)(服务器)、订阅者(Subscribe)
  • MQTT传输的消息分为:主题(Topic)和负载(payload)

  3、mqtt的几个方法

  • (1)Connect。等待与服务器建立连接。
  • (2)Disconnect。等待MQTT客户端完成所做的工作,并与服务器断开TCP/IP会话。
  • (3)Subscribe。等待完成订阅。
  • (4)UnSubscribe。等待服务器取消客户端的一个或多个topics订阅。
  • (5)Publish。MQTT客户端发送消息请求,发送完成后返回应用程序线程。

开始

  1、地址https://github.com/Introvertuous/react_native_mqtt.git

  2、安装

yarn add react_native_mqtt

  3、使用

  

import init from 'react_native_mqtt';
import AsyncStorage from '@react-native-community/async-storage'; init({
size: 10000,
storageBackend: AsyncStorage,
defaultExpires: 1000 * 3600 * 24,
enableCache: true,
reconnect: true,
sync: {}
}); 第一步:创建
// 地址,端口,路径(这么写就行了),connectId(随便写) :地址和端口,都是后台给,或者你自己弄个mqtt的服务
let client = new Paho.MQTT.Client('192.168.0.63', 8083, '/mqtt', '/mqttjs_db6017d322') 第二步:连接,暂时有一个参数,2个方法:成功,失败
client.connect({
useSSL: false,
onSuccess: onConnect,
onFailure:(e)=>{ console.log('失败'); console.log(e); }
});
// 成功后需要发送主题 ,就是一个接口的路径类似
function onConnect(){
console.log('成功');
client.subscribe(‘/fangtao’);
}
第三步:断掉
client.onConnectionLost = onConnectionLost; function onConnectionLost (responseObject) {
if (responseObject.errorCode !== 0) {
console.log('onConnectionLost:' + responseObject.errorMessage);
}
} 第四步:接收消息
client.onMessageArrived = onMessageArrived; function onMessageArrived (message) {
console.log('消息:' + message.payloadString);
}

感受一下

run起来,连接成功

后台推送一个消息过来

看看前台接收到没?

成功!

MQTT在react-native中的运行的更多相关文章

  1. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  2. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  3. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  4. React Native中的远程调试是不可靠的

    一.原因 当您发现rn app在关闭远程调试后,一些功能无法正常工作时,这很可能是由于设备上的JavaScript执行环境与远程调试器之间的细微差别造成的. 例如,日期问题,Date构造函数似乎接受C ...

  5. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  6. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  7. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  8. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  9. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  10. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. JSX的替代方案(译文)

    原文链接:https://blog.bloomca.me/2019/02/23/alternatives-to-jsx.html JSX作为一种流行的模板语言,在各种框架都得到了广泛的应用.但是,如果 ...

  2. C#基于websocket-sharp实现简易httpserver(封装)

    一.背景 其实就是很简单的,公司会桌面开发的人员紧缺啊,项目又赶,而我们公司的前端人员人多还厉害(ps:吐槽下,后端的人真的少啊,会桌面开发的更少啊),所以萌生出了使用html+js来构建本地应用程序 ...

  3. 公设基础equals

    1#  覆盖equals方法的通用约定 1.自反性(reflexive) 自己跟自己的比较必须返回true 2.对称性(symmetric) x=y那么y=z 3.传递性(transitive) x= ...

  4. jq 操作表单中 checkbox 全选 单选

    知识点: Note: 1: .prop() 和 .attr() 方法的区别 .prop() 针对标签既有属性 .attr() 针对自定义属性 2: $('input:checked')即为选中元素. ...

  5. WPF使用CefSharp嵌入网页

    1.点击项目应用下的管理NuGet程序包 2.在浏览中输入cefsharp-->查找 CefSharp.Wpf-->点击安装,等待安装完成 3.如果遇到一下问题将解决方案和项目都改成64位 ...

  6. Centos安装Consul微服务

    一.简介 Consul([ˈkɒnsl],康搜)是注册中心,服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离.除了Consul之外,还有Eureka.Zoo ...

  7. brew本地安装包

    brew --cache # 输出本地缓存 一般位置 ~/Library/Caches/Homebrew # 将下载下来文件mv到缓存路径 download目录 # 重命名成没有下载下来的文件名 xx ...

  8. Semantic difference between object expressions and declarations

    object expressions are executed (and initialized) immediately, where they are used; object declarati ...

  9. Motrix for Mac(百度网盘加速/全能下载软件) v1.3.7最新版!

    Motrix for Mac最新版第一时间在本站上线!Mac上最强大实用百度网盘加速器Motrix for Mac分享给您!Motrix for Mac是一款非常优秀的下载工具,采用Aria 2作为核 ...

  10. 课堂小记---JavaScript(2)

    本阶段难点疑点梳理 1.关于switch中default的使用: default同case功能一样,区别在于并不匹配任何信息,只有当case中无任何匹配的时候才会执行default.需要注意的是,这是 ...