apicloud 实现长连接

∥☆過路亽.° 提交于 2020-01-04 02:11:42

在制作app的时候,很多时候需要服务端推送消息给app。现在针对apicloud开放梳理几种解决方案

1.ajax轮询

ajax轮询的原理非常简单,让app隔个几秒就发送一次请求,询问服务器是否有新信息。但是轮训一般及时性比较差,而且网络消耗与电量销毁比较多,因此一般推送功能都是通过长连接实现的

场景再现:

客户端:啦啦啦,有没有新信息(Request)

服务端:没有(Response)

客户端:啦啦啦,有没有新信息(Request)

服务端:没有。。(Response)

客户端:啦啦啦,有没有新信息(Request)

服务端:你好烦啊,没有啊。。(Response)

客户端:啦啦啦,有没有新消息(Request)

服务端:好啦好啦,有啦给你。(Response)

客户端:啦啦啦,有没有新消息(Request)

服务端:。。。。。没。。。。没。。。没有(Response) —- loop

2.使用第三方推送服务

apicloud的push模块

官方也有自己开放的推送模块,亲测有效。

不懂的话可以看 https://docs.apicloud.com/Dev-Guide/push-guide

如果出现push.setListener无效    可以看https://community.apicloud.com/bbs/thread-112988-1-1.html

还有极光、融云可以选择,他们都有免费的模块。自己跟着文档操作即可

3.websocket

如果你不行是用第三方的推送服务,也可以使用websocket,websocket优化了http的请求方式,服务器每天都要接待太多客服了,一旦你的http请求结束,服务器变忘记你所有的信息,当你下次还有获取服务器数据时又要重新跟服务器建立连接,表明自己的身份。那websocket是如何访问的呢?

客户端:啦啦啦,我要建立Websocket协议,需要的服务:chat,Websocket协议版本:17(HTTP Request)

服务端:ok,确认,已升级为Websocket协议(HTTP Protocols Switched)

客户端:麻烦你有信息的时候推送给我噢。。

服务端:ok,有的时候会告诉你的。

服务端:balabalabalabala

服务端:balabalabalabala

服务端:新数据请查收

服务端:又有新数据

只需要经过一个http请求后,就可以和服务器建立长连接,等服务器有新数据时就可以通过该连接推送给客服端,不需要在重新建立连接,也不需要客服端干巴巴的等。

具体代码实现:

            isWebsocket: function() {
                vm.websocket = null;
                //判断当前浏览器是否支持WebSocket
                if ('WebSocket' in window) {
                    alert("浏览器支持Websocket")
                } else {
                    alert('当前浏览器 Not support websocket')
                }
            },
            //原生websocket连接
            websocket_open: function() {
                vm.websocket = new WebSocket(vm.url);
                vm.websocket.onerror = function() {  
                    alert("WebSocket连接发生错误");
                };
                //连接成功建立的回调方法
                vm.websocket.onopen = function() {  
                    alert("WebSocket连接成功");
                };
                //接收到消息的回调方法
                vm.websocket.onmessage = function(event) {
                    alert("这是后台推送的消息:" + event.data);  
                    // websocket.close();
                };
                //连接关闭的回调方法
                vm.websocket.onclose = function() {
                    alert("WebSocket断开连接");
                };
            },

4.MQTT

简介:轻量级的、基于代理的“发布/订阅”模式的消息传输协议。
优点:协议简洁、小巧、可扩展性强、省流量、省电,目前已经应用到企业领域。
 

传统的网络通信模式几乎都是基于客户端/服务器模式的:客户端直接和一个服务端建立连接,通信来获取数据,数据源和数据目的地双方直接连接。比如在Web应用程序中,浏览器直接和Web服务器通过HTTP协议通信,浏览器需要知道服务器的IP和端口号。

而发布/订阅模式解耦了客户端,客户端分为2种角色:发布者(Publisher)和订阅者(Subscriber)。每一个发布者(Publisher)可以发送不同类型的消息,我们把消息的类型叫做主题(topic),MQTT通信中的消息都属于某一个主题  ,而只有订阅了这个主题的订阅者(Subscriber)才能收到属于这个主题的消息。发布者和订阅者不需要在意和知道对方的存在(不需要知道对方的IP和端口),也不需要直接与对方建立连接。因为通信中存在着一个叫代理(MQTT broker)的第三种角色,也可以叫MQTT服务器(MQTT server)。 

发布者、订阅者只需要知道MQTT 服务器的IP和端口即可,并和它直接建立连接通信。MQTT代理作为消息的中转,它过滤所有接受到的消息,并按照一定的机制(MQTT标准规定是基于主题的消息过滤派发方式,而具体的MQTT服务器软件也提供了其他的派发方式)分发它们,使得所有注册到MQTT代理的订阅者只接收到他们订阅了的消息,而不会收到他不关心的消息。

当发布者发布一条消息的时候,他必须同时指定消息的主题和消息的负载。MQTT代理在收到发布者发过来的消息时,无需访问消息负载,他只是访问消息的主题信息,然后根据这主题派发给订阅者。需要注意的是,一个客户端可以同时既当发布者又当订阅者。比如一个开发板连接了一盏LED灯,它可以发布灯的暗/亮状态信息,也可以从其他节点订阅对灯的控制消息。

                    function connect() {
                        var client = null;
			clientId = 'example-507';
			var hostname = '47.97.253.77',
				port = 61614,
				clientId = 'example-507',
				userName = 'admin',
				password = 'admin';
			client = new Paho.MQTT.Client(hostname, port, clientId);
			//建立客户端实例
			var options = {
				invocationContext: {
					host: hostname,
					port: port,
					path: client.path,
					clientId: clientId
				},
				timeout: 5,
				keepAliveInterval: 10, //心跳间隔
				cleanSession: false, // 设置成持久连接需要 cleanSession: false、订阅的时候pos:1或2
				useSSL: false,
				userName: userName,
				password: password,
				onSuccess: onConnect,
				onFailure: function(e) {
					console.log("连接请求报1"+JSON.stringify(err));
				}
			};
			client.connect(options);
			//连接服务器并注册连接成功处理事件
			function onConnect(a) {
			    console.log('', "连接成功");	
			    client.subscribe('fangman', {
				qos: 1
			    }); //订阅
			    // #QoS=0时,报文最多发送一次,有可能丢失
			    // #QoS=1时,报文至少发送一次,有可能重复
			    // #QoS=2时,报文只发送一次,并且确保消息只到达一次。
			}
			client.onConnectionLost = onConnectionLost;
			//注册连接断开处理事件
			client.onMessageArrived = onMessageArrived;
		}

<script src="../../script/mqttws31.js" type="text/javascript"></script>

 

 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!