精华内容
下载资源
问答
  • HTML5消息推送

    2012-11-05 10:14:54
    webSocket是html5新引入的技术,允许后台随时向前端发送文本或者二进制消息,WebSocket是一种全新的协议,不属于http无状态协议,协议名为“ws”,这意味着一个websocket连接地址会是这样的写法
  • 谁能提供一个html5消息推送的实例,服务端为asp.net,谢谢!
  • html5消息推送,要能实现心跳机制,并且服务端可用C#编写。
  • 基于HTML5的两款消息推送框架MQ
  • html5+ push-消息推送

    千次阅读 2018-10-08 15:17:11
    Push模块管理推送消息功能,可以实现在线、离线的消息推送,通过plus.push可获取推送消息管理对象。 方法: addEventListener: 添加推送消息事件监听器 clear: 清空所有推送消息 createMessage: 创建本地消息 ...

    push-消息推送

    Push模块管理推送消息功能,可以实现在线、离线的消息推送,通过plus.push可获取推送消息管理对象。

    方法:

    对象:

    回调方法:

    权限:

    permissions

    {
    // ...
    "permissions":{
    	// ...
    	"Push": {
    		"description": "消息推送"
    	}
    }
    }
    

    属性:

    • cover: 设定显示推送消息的模式

      可取值true或false,true表示推送消息覆盖模式显示,即仅显示最后接收到的推送消息;false表示在系统消息中心显示多条消息。 默认值为ture。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 4.3+ (不支持): 不支持覆盖消息,每条信息都在系统消息中心,忽略cover属性值。

    ClientInfo

    JSON对象,获取的客户端标识信息

    属性:

    • token: _(String 类型 )_设备令牌(iOS设备唯一标识),用于APNS服务推送中标识设备的身份

    • clientid: _(String 类型 )_推送服务令牌(设备唯一标识),用于标识推送信息接收者身份

      第三方推送服务器管理的设备唯一标识,在iOS平台此值通常与token不同;在其它平台此值通常与token值一致。 此值与设备及应用都相关,即不同的apk/ipa安装到同一台设备上的值都不相同。

    • appid: _(String 类型 )_第三方推送服务的应用标识

      第三方推送服务器管理的应用标识,通常需要在第三方推送服务器平台进行注册获取。

    • appkey: _(String 类型 )_第三方推送服务器的应用键值

      第三方推送服务器管理的应用键值,通常需要在第三方推送服务器平台进行注册获取。

    PushMessage

    JSON对象,推送消息对象

    属性:

    • title: _(String 类型 )_推送消息显示的标题

    • content: _(String 类型 )_推送消息显示的内容

    • payload: _(JSON 类型 )_推送消息承载的数据

      如果推送消息中传输的数据不符合JSON格式,则作为String类型数据保存。

    • aps: _(JSON 类型 )_Apple APNS推送协议数据

    MessageOptions

    JSON对象,获客户端创建本地消息的参数

    属性:

    • appid: _(String 类型 )_要启动流应用的appid

      默认值为当前流应用的appid。

    • title: _(String 类型 )_推送消息的标题

      在系统消息中心显示的通知消息标题,默认值为程序的名称。

    • sound: _(String 类型 )_推送消息的提示音

      显示消息时的播放的提示音,可取值: “system”-表示使用系统通知提示音; “none”-表示不使用提示音; 默认值为“system”。

    • cover: _(Boolean 类型 )_是否覆盖上一次提示的消息

      可取值true或false,true为覆盖,false不覆盖,默认为permission中设置的cover值。

    • when: _(Date 类型 )_消息上显示的提示时间

      默认为当前时间,如果延迟显示则使用延时后显示消息的时间。

    • delay: _(Number 类型 )_提示消息延迟显示的时间

      当设备接收到推送消息后,可不立即显示,而是延迟一段时间显示,延迟时间单位为s,默认为0s,立即显示。

    PushReceiveCallback

    客户端接收到推动消息的回调函数

    void onReceive( msg ) {
     	// Recieved push message code.
     }
    

    参数:

    • msg: ( String ) 必选 接收到的推送信息msg

    返回值:

    void : 无

    PushClickCallback

    用户点击推送消息事件的回调函数

    void onClick( msg ) {
    	// Clicked push message code. 
    }
    

    参数:

    • msg: ( String ) 必选 用户点击的推送信息msg

    返回值:

    void : 无

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<meta name="HandheldFriendly" content="true" />
    		<meta name="MobileOptimized" content="320" />
    		<title>Hello H5+</title>
    		<script type="text/javascript">
    			var pushServer = "http://demo.dcloud.net.cn/push/?";
    			var message = null;
    			// 监听plusready事件  
    			document.addEventListener("plusready", function () {
    				message = document.getElementById("message");
    				// 监听点击消息事件
    				plus.push.addEventListener("click", function (msg) {
    					// 判断是从本地创建还是离线推送的消息
    					switch (msg.payload) {
    						case "LocalMSG":
    							outSet("点击本地创建消息启动:");
    							break;
    						default:
    							outSet("点击离线推送消息启动:");
    							break;
    					}
    					// 提示点击的内容
    					plus.nativeUI.alert(msg.content);
    					// 处理其它数据
    					logoutPushMsg(msg);
    				}, false);
    				// 监听在线消息事件
    				plus.push.addEventListener("receive", function (msg) {
    					if (msg.aps) { // Apple APNS message
    						outSet("接收到在线APNS消息:");
    					} else {
    						outSet("接收到在线透传消息:");
    					}
    					logoutPushMsg(msg);
    				}, false);
    			}, false);
    
    			/**
    			 * 日志输入推送消息内容
    			 */
    			function logoutPushMsg(msg) {
    				console.log("title: " + msg.title);
    				console.log("content: " + msg.content);
    				if (msg.payload) {
    					if (typeof (msg.payload) == "string") {
    						console.log("payload(String): " + msg.payload);
    					} else {
    						console.log("payload(JSON): " + JSON.stringify(msg.payload));
    					}
    				} else {
    					console.log("payload: undefined");
    				}
    				if (msg.aps) {
    					console.log("aps: " + JSON.stringify(msg.aps));
    				}
    			}
    
    			/**
    			 * 获取本地推送标识信息
    			 */
    			function getPushInfo() {
    				var info = plus.push.getClientInfo();
    				outSet("获取客户端推送标识信息:");
    				console.log("id: " + info.id);
    				console.log("token: " + info.token);
    				console.log("clientid: " + info.clientid);
    				console.log("appid: " + info.appid);
    				console.log("appkey: " + info.appkey);
    			}
    			/**
    			 * 本地创建一条推动消息
    			 */
    			function createLocalPushMsg() {
    				var options = {
    					cover: false
    				};
    				var str = dateToStr(new Date());
    				str += ": 欢迎使用HTML5+创建本地消息!";
    				plus.push.createMessage(str, "LocalMSG", options);
    				outSet("创建本地消息成功!");
    				console.log("请到系统消息中心查看!");
    				if (plus.os.name == "iOS") {
    					console.log('*如果无法创建消息,请到"设置"->"通知"中配置应用在通知中心显示!');
    				}
    			}
    			/**
    			 * 读取所有推送消息
    			 */
    			function listAllPush() {
    				var msgs = null;
    				switch (plus.os.name) {
    					case "Android":
    						msgs = plus.push.getAllMessage();
    						break;
    					default:
    						break;
    				}
    				if (!msgs) {
    					outSet("此平台不支持枚举推送消息列表!");
    					return;
    				}
    				outSet("枚举消息列表(" + msgs.length + "):");
    				for (var i in msgs) {
    					var msg = msgs[i];
    					console.log(i + ": " + msg.title + " - " + msg.content);
    				}
    			}
    			/**
    			 * 清空所有推动消息
    			 */
    			function clearAllPush() {
    				plus.push.clear();
    				outSet("清空所有推送消息成功!");
    			}
    			/**
    			 * 请求‘简单通知’推送消息
    			 */
    			function requireNotiMsg() {
    				if (navigator.userAgent.indexOf('StreamApp') > 0) {
    					plus.nativeUI.toast('当前环境暂不支持发送推送消息');
    					return;
    				}
    				var inf = plus.push.getClientInfo();
    				var url = pushServer + 'type=noti&appid=' + encodeURIComponent(plus.runtime.appid);
    				inf.id && (url += '&id=' + inf.id);
    				url += ('&cid=' + encodeURIComponent(inf.clientid));
    				if (plus.os.name == 'iOS') {
    					url += ('&token=' + encodeURIComponent(inf.token));
    				}
    				url += ('&title=' + encodeURIComponent('Hello H5+'));
    				url += ('&content=' + encodeURIComponent('欢迎回来体验HTML5 plus应用!'));
    				url += ('&version=' + encodeURIComponent(plus.runtime.version));
    				plus.runtime.openURL(url);
    			}
    			/**
    			 * 请求‘打开网页’推送消息
    			 */
    			function requireLinkMsg() {
    				if (navigator.userAgent.indexOf('StreamApp') > 0) {
    					plus.nativeUI.toast('当前环境暂不支持发送推送消息');
    					return;
    				}
    				var inf = plus.push.getClientInfo();
    				var url = pushServer + "type=link&appid=" + encodeURIComponent(plus.runtime.appid);
    				inf.id && (url += '&id=' + inf.id);
    				url += ('&cid=' + encodeURIComponent(inf.clientid));
    				if (plus.os.name == 'iOS') {
    					url += ('&token=' + encodeURIComponent(inf.token));
    				}
    				url += ('&title=' + encodeURIComponent('HBuilder飞一样的编码'));
    				url += ('&content=' + encodeURIComponent('看HBuilder如何追求代码编写速度的极致!立即去瞧一瞧?'));
    				url += ('&url=' + encodeURIComponent('http://www.dcloud.io/'));
    				url += ('&version=' + encodeURIComponent(plus.runtime.version));
    				plus.runtime.openURL(url);
    			}
    			/**
    			 * 请求‘下载链接’推送消息
    			 */
    			function requireDownMsg() {
    				if (navigator.userAgent.indexOf('StreamApp') > 0) {
    					plus.nativeUI.toast('当前环境暂不支持发送推送消息');
    					return;
    				}
    				if (plus.os.name != "Android") {
    					plus.nativeUI.alert("此平台不支持!");
    					return;
    				}
    				var inf = plus.push.getClientInfo();
    				var url = pushServer + 'type=down&appid=' + encodeURIComponent(plus.runtime.appid);
    				inf.id && (url += '&id=' + inf.id);
    				url += ('&cid=' + encodeURIComponent(inf.clientid));
    				url += ('&title=' + encodeURIComponent('Hello H5+'));
    				url += ('&content=' + encodeURIComponent('新版本发布了!立即下载体验?'));
    				url += ('&ptitle=' + encodeURIComponent('Hello H5+'));
    				url += ('&pcontent=' + encodeURIComponent('1. 优化用户体验;\n2. 修复在Android2.3.x某些设备可能异常退出的问题.'));
    				url += ('&dtitle=' + encodeURIComponent('下载Hello H5+'));
    				url += ('&durl=' + encodeURIComponent('http://www.dcloud.io/helloh5/HelloH5.apk'));
    				url += ('&version=' + encodeURIComponent(plus.runtime.version));
    				plus.runtime.openURL(url);
    			}
    			/**
    			 * 请求‘透传数据’推送消息
    			 */
    			function requireTranMsg() {
    				if (navigator.userAgent.indexOf('StreamApp') > 0) {
    					plus.nativeUI.toast('当前环境暂不支持发送推送消息');
    					return;
    				}
    				var inf = plus.push.getClientInfo();
    				var url = pushServer + 'type=tran&appid=' + encodeURIComponent(plus.runtime.appid);
    				inf.id && (url += '&id=' + inf.id);
    				url += ('&cid=' + encodeURIComponent(inf.clientid));
    				if (plus.os.name == 'iOS') {
    					url += ('&token=' + encodeURIComponent(inf.token));
    				}
    				url += ('&title=' + encodeURIComponent('Hello H5+'));
    				url += ('&content=' + encodeURIComponent('带透传数据推送通知,可通过plus.push API获取数据并进行业务逻辑处理!'));
    				url += ('&payload=' + encodeURIComponent(
    					'{"title":"Hello H5+ Test","content":"test content","payload":"1234567890"}'));
    				url += ('&version=' + encodeURIComponent(plus.runtime.version));
    				plus.runtime.openURL(url);
    			}
    
    		</script>
    
    	</head>
    	<body>
    		<header id="header">
    			<div class="nvbt iback" onclick="back()"></div>
    			<div class="nvtt">Push</div>
    			<div class="nvbt idoc" onclick="openDoc('Push Document','/doc/push.html')"></div>
    		</header>
    		<div id="dcontent" class="dcontent">
    			<div class="button" onclick="requireNotiMsg()">发送"普通通知"消息</div>
    			<div class="button" onclick="requireLinkMsg()">发送"打开网页"消息</div>
    			<div class="button" onclick="requireDownMsg()">发送"下载链接"消息</div>
    			<div class="button" onclick="requireTranMsg()">发送"透传数据"消息</div>
    			<br />
    			<ul id="dlist" class="dlist">
    				<li class="ditem" onclick="getPushInfo()">获取客户端推送标识</li>
    				<li class="ditem" onclick="createLocalPushMsg()">创建本地消息</li>
    				<li class="ditem" onclick="listAllPush()">枚举推送消息</li>
    				<li class="ditem" onclick="clearAllPush()">清空推送消息</li>
    				<!--<li class="ditem" onclick="plus.push.setAutoNotification(false)">关闭自动显示消息</li>
    				<li class="ditem" onclick="plus.push.setAutoNotification(true)">开启自动显示消息</li>-->
    			</ul>
    		</div>
    		<div id="output">
    			Push模块管理推送消息功能,可以实现在线、离线的消息推送,通过plus.push可获取推送消息管理对象。
    		</div>
    	</body>
    </html>
    
    展开全文
  • HTML5 WebSocket与消息推送

    千次阅读 2017-07-05 19:24:59
    二、WebSocket简介与消息推送 三、WebSocket客户端 四、WebSocket服务器端 五、测试运行 六、小结与消息推送框架6.1、开源Java消息推送框架 Pushlet 6.2、开源DotNet消息推送框架SignalR七、代码下载7.1、Java实现的...

    B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为服务器不需要与客户端长时间建立一个通信链接,但不容易直接完成实时的消息推送功能,如聊天室、后台信息提示、实时更新数据等功能,但通过polling、Long polling、长连接、Flash Socket以及HTML5中定义的WebSocket能完成该功能需要。

    一、Socket简介

    Socket又称”套接字”,应用程序通常通过”套接字”向网络发出请求或者应答网络请求。Socket的英文原义是“孔”或“插座”,作为UNIX的进程通信机制。Socket可以实现应用程序间网络通信。

    Socket可以使用TCP/IP协议或UDP协议。

    TCP/IP协议

    TCP/IP协议是目前应用最为广泛的协议,是构成Internet国际互联网协议的最为基础的协议,由TCP和IP协议组成:
    TCP协议:面向连接的、可靠的、基于字节流的传输层通信协议,负责数据的可靠性传输的问题。

    IP协议:用于报文交换网络的一种面向数据的协议,主要负责给每台网络设备一个网络地址,保证数据传输到正确的目的地。

    UDP协议

    UDP特点:无连接、不可靠、基于报文的传输层协议,优点是发送后不用管,速度比TCP快。

    二、WebSocket简介与消息推送

    B/S架构的系统多使用HTTP协议,HTTP协议的特点:

    1 无状态协议
    2 用于通过 Internet 发送请求消息和响应消息
    3 使用端口接收和发送消息,默认为80端口
    底层通信还是使用Socket完成。

    HTTP协议决定了服务器与客户端之间的连接方式,无法直接实现消息推送(F5已坏),一些变相的解决办法:

    双向通信与消息推送

    轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。 优点:后端程序编写比较容易。 缺点:请求中有大半是无用,浪费带宽和服务器资源。 实例:适于小型应用。

    长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。 优点:在无消息的情况下不会频繁的请求,耗费资小。 缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。 Comet异步的ashx,实例:WebQQ、Hi网页版、Facebook IM。

    长连接:在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求,服务器端就能源源不断地往客户端输入数据。 优点:消息即时到达,不发无用请求;管理起来也相对便。 缺点:服务器维护一个长连接会增加开销。 实例:Gmail聊天

    Flash Socket:在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信,JavaScript在收到服务器端传送的信息后控制页面的显示。 优点:实现真正的即时通信,而不是伪即时。 缺点:客户端必须安装Flash插件;非HTTP协议,无法自动穿越防火墙。 实例:网络互动游戏。

    Websocket:
    WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信。
    特点:
    事件驱动
    异步
    使用ws或者wss协议的客户端socket

    能够实现真正意义上的推送功能

    缺点:

    少部分浏览器不支持,浏览器支持的程度与方式有区别。

    三、WebSocket客户端

    websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信。在websocket中有两个方法:  
        1、send() 向远程服务器发送数据
        2、close() 关闭该websocket链接
      websocket同时还定义了几个监听函数    
        1、onopen 当网络连接建立时触发该事件
        2、onerror 当网络发生错误时触发该事件
        3、onclose 当websocket被关闭时触发该事件
        4、onmessage 当websocket接收到服务器发来的消息的时触发的事件,也是通信中最重要的一个监听事件。msg.data
      websocket还定义了一个readyState属性,这个属性可以返回websocket所处的状态:
        1、CONNECTING(0) websocket正尝试与服务器建立连接
        2、OPEN(1) websocket与服务器已经建立连接
        3、CLOSING(2) websocket正在关闭与服务器的连接
        4、CLOSED(3) websocket已经关闭了与服务器的连接

      websocket的url开头是ws,如果需要ssl加密可以使用wss,当我们调用websocket的构造方法构建一个websocket对象(new WebSocket(url))的之后,就可以进行即时通信了。

    复制代码
    复制代码
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta name="viewport" content="width=device-width" />
            <title>WebSocket 客户端</title>
        </head>
    
        <body>
            <div>
                <input type="button" id="btnConnection" value="连接" />
                <input type="button" id="btnClose" value="关闭" />
                <input type="button" id="btnSend" value="发送" />
            </div>
            <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var socket;
                if(typeof(WebSocket) == "undefined") {
                    alert("您的浏览器不支持WebSocket");
                    return;
                }
    
                $("#btnConnection").click(function() {
                    //实现化WebSocket对象,指定要连接的服务器地址与端口
                    socket = new WebSocket("ws://127.0.0.1:8080/ProjectName/ws/张三");
                    //打开事件
                    socket.onopen = function() {
                        alert("Socket 已打开");
                        //socket.send("这是来自客户端的消息" + location.href + new Date());
                    };
                    //获得消息事件
                    socket.onmessage = function(msg) {
                        alert(msg.data);
                    };
                    //关闭事件
                    socket.onclose = function() {
                        alert("Socket已关闭");
                    };
                    //发生了错误事件
                    socket.onerror = function() {
                        alert("发生了错误");
                    }
                });
    
                //发送消息
                $("#btnSend").click(function() {
                    socket.send("这是来自客户端的消息" + location.href + new Date());
                });
    
                //关闭
                $("#btnClose").click(function() {
                    socket.close();
                });
            </script>
        </body>
    
    </html>
    复制代码
    复制代码

    四、WebSocket服务器端

    JSR356定义了WebSocket的规范,Tomcat7中实现了该标准。JSR356 的 WebSocket 规范使用 javax.websocket.*的 API,可以将一个普通 Java 对象(POJO)使用 @ServerEndpoint 注释作为 WebSocket 服务器的端点。

    复制代码
    复制代码
    @ServerEndpoint("/push")
     public class EchoEndpoint {
    
     @OnOpen
     public void onOpen(Session session) throws IOException {
     //以下代码省略...
     }
    
     @OnMessage
     public String onMessage(String message) {
     //以下代码省略...
     }
    
     @Message(maxMessageSize=6)
     public void receiveMessage(String s) {
     //以下代码省略...
     } 
    
     @OnError
     public void onError(Throwable t) {
     //以下代码省略...
     }
    
     @OnClose
     public void onClose(Session session, CloseReason reason) {
     //以下代码省略...
     } 
    
     }
    复制代码
    复制代码

    上面简洁代码即建立了一个WebSocket的服务端,@ServerEndpoint(“/push”)的annotation注释端点表示将WebSocket服务端运行在ws://[Server端IP或域名]:[Server端口]/项目/push的访问端点,客户端浏览器已经可以对WebSocket客户端API发起HTTP长连接了。
    使用ServerEndpoint注释的类必须有一个公共的无参数构造函数,@onMessage注解的Java方法用于接收传入的WebSocket信息,这个信息可以是文本格式,也可以是二进制格式。
    OnOpen在这个端点一个新的连接建立时被调用。参数提供了连接的另一端的更多细节。Session表明两个WebSocket端点对话连接的另一端,可以理解为类似HTTPSession的概念。
    OnClose在连接被终止时调用。参数closeReason可封装更多细节,如为什么一个WebSocket连接关闭。
    更高级的定制如@Message注释,MaxMessageSize属性可以被用来定义消息字节最大限制,在示例程序中,如果超过6个字节的信息被接收,就报告错误和连接关闭。

    复制代码
    复制代码
    package action;
    
    import javax.websocket.CloseReason;
    import javax.websocket.OnClose;
    import javax.websocket.OnError;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    
    //ws://127.0.0.1:8087/Demo1/ws/张三
    @ServerEndpoint("/ws/{user}")
    public class WSServer {
        private String currentUser;
    
        //连接打开时执行
        @OnOpen
        public void onOpen(@PathParam("user") String user, Session session) {
            currentUser = user;
            System.out.println("Connected ... " + session.getId());
        }
    
        //收到消息时执行
        @OnMessage
        public String onMessage(String message, Session session) {
            System.out.println(currentUser + ":" + message);
            return currentUser + ":" + message;
        }
    
        //连接关闭时执行
        @OnClose
        public void onClose(Session session, CloseReason closeReason) {
            System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason));
        }
    
        //连接错误时执行
        @OnError
        public void onError(Throwable t) {
            t.printStackTrace();
        }
    }
    复制代码
    复制代码

    url中的字符张三是的路径参数,响应请求的方法将自动映射。

    五、测试运行

    六、小结与消息推送框架

     Socket在应用程序间通信被广泛使用,如果需要兼容低版本的浏览器,建议使用反向ajax或长链接实现;如果纯移动端或不需考虑非现代浏览器则可以直接使用websocket。Flash实现推送消息的方法不建议使用,因为依赖插件且手机端支持不好。关于反向ajax也有一些封装好的插件如“Pushlet”

    6.1、开源Java消息推送框架 Pushlet

    Pushlet 是一个开源的 Comet 框架,Pushlet 使用了观察者模型:客户端发送请求,订阅感兴趣的事件;服务器端为每个客户端分配一个会话 ID 作为标记,事件源会把新产生的事件以多播的方式发送到订阅者的事件队列里。

    源码地址:https://github.com/wjw465150/Pushlet

    Pushlet是一种comet实现:在Servlet机制下,数据从server端的Java对象直接推送(push)到(动态)HTML页面,而无需任何Javaapplet或者插件的帮助。它使server端可以周期性地更新client的web页面,这与传统的request/response方式相悖。浏览器client为兼容JavaScript1.4版本以上的浏览器(如InternetExplorer、FireFox),并使用JavaScript/DynamicHTML特性。而底层实现使用一个servlet通过Http连接到JavaScript所在的浏览器,并将数据推送到后者。

    6.2、开源DotNet消息推送框架SignalR

    SignalR是一个ASP .NET下的类库,可以在ASP .NET的Web项目中实现实时通信。在Web网页与服务器端间建立Socket连接,当WebSockets可用时(即浏览器支持Html5)SignalR使用WebSockets,当不支持时SignalR将使用长轮询来保证达到相同效果。

    官网:http://signalr.net/

    源码:https://github.com/SignalR/SignalR

     

    七、代码下载

    7.1、Java实现的服务器端代码与客户端代码下载

    点击下载服务器端代码

    点击下载客户端代码

    7.2、DotNet服务器端手动连接实现代码下载

    点击下载DotNet服务器端手动连接实现代码

    7.3、DotNet下使用SuperWebSocket三方库实现代码下载

    点击下载DotNet下使用SuperWebSocket三方库实现代码

    展开全文
  • 接下来我演示一下如何在html5页面中利用websocket实现消息推送和接收。 websocket服务还是使用我之前介绍过的GoEasy。 1、集成GoEsay: 在需要使用GoEasy服务的html页面集成GoEasy的jssdk。 <script type="te...

    websocket是html5中新增的协议,websocket的特点是全双工,服务端和客户端可以互相发送消息。

    接下来我演示一下如何在html5页面中利用websocket实现消息推送和接收。

    websocket服务还是使用我之前介绍过的GoEasy。

    1、集成GoEsay:

    在需要使用GoEasy服务的html页面集成GoEasy的jssdk。

    <script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.0.3.js"></script>
    
    //如果需要支持低版本的IE6,IE7,IE8浏览器,请引入json2.js。
    <script type="text/javascript" src="https://cdn.goeasy.io/json2.js"></script>

    2、初始化GoEasy对象

    在初始化GoEasy的时候,需要填写你在GoEasy控制台获取到的appkey,没有注册的需要先注册并创建应用才可以获取。【GoEasy官网

    var goEasy = new GoEasy({
        host:'hangzhou.goeasy.io', //应用所在的区域地址: 【hangzhou.goeasy.io |singapore.goeasy.io】
        appkey: "my_appkey", //替换为您的应用appkey
    });
    //GoEasy-OTP可以对appkey进行有效保护,详情请参考​ ​ 
    //如果需要使用HTTPS/WSS,请在连接初始化GoEasy对象的时候传入参数forceTLS,并设置为true。

    3、接收消息

    goEasy.subscribe({
        channel: "my_channel", //替换为您自己的channel
        onMessage: function (message) {
            console.log("Channel:" + message.channel + " content:" + message.content);
        }
    });

    4、发送消息:

    goEasy.publish({
        channel: "my_channel", //替换为您自己的channel
        message: "Hello, GoEasy!" //替换为您想要发送的消息内容
    });

     通过上面的4个步骤,就基本实现了html5页面中的websocket消息推送功能。

    完整代码如下:

    <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>GoEasy publish</title>
     <!--[if lte IE 8]>//如果需要支持低版本的IE8及以下
    <script  type="text/javascript" src="https://cdn.goeasy.io/json2.js"></script>
    <![endif]-->
    
    <script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.0.3.js"></script>、
            <script type="text/javascript">
                var goEasy = new GoEasy({
                    host: "hangzhou.goeasy.io",//应用所在的区域地址: 【hangzhou.goeasy.io | singapore.goeasy.io】
                    appkey: "my_appkey" 
                });
                function publish() {
                    var message = document.getElementById("messageContent").value;
                    goEasy.publish({
                        channel: "my_channel",
                        message: message,
                        onSuccess: function () {
                            console.log("发送成功");
                        },
                        onFailed: function (error) {
                            console.log("发送失败: "+error.content);
                        }
                    });
                }
            </script>
        </head>
        <body>
            <textarea id="messageContent" rows="5" cols="50"></textarea>
            <button type="button" onclick="publish();">发送</button>、
    <!--订阅消息-->		
    		<script>
    		goEasy.subscribe({
        channel: "my_channel", //替换为您自己的channel
        onMessage: function (message) {
            alert("Channel:" + message.channel + " content:" + message.content);
        }
    });
    </script>
        </body>
        </html>

     

    展开全文
  • 消息推送 HTML5 + swoole websocket server

    千次阅读 2017-09-07 02:10:02
    消息推送范例
    <?php
    
    namespace app\index\controller;
    
    use swoole_websocket_server;
    
    /*
     * [root@contoso think]# cd /home/myth/www/think && php public/index.php index/Server/run
     * [root@contoso think]# ps -eaf | grep 'index/Server/run' | grep -v 'grep' | awk '{print $2}' | xargs kill -9
     * 
     * [root@contoso ~]# sed -i -- 's/^protected-mode yes/protected-mode no/g' /etc/redis.conf
     * [root@contoso ~]# systemctl restart redis
     * [root@contoso ~]# cat > onlines.sh
      #!/bin/bash
      for ((i = 1;i < 11;i++))
      do
      echo "redis-cli -h 192.168.10.20 -p 6379 sAdd chat:fd:sets $i"
      redis-cli -h 192.168.10.20 -p 6379 sAdd chat:fd:sets $i
      done
     * [root@contoso ~]# bash onlines.sh
     * 
     * [myth@contoso ~]$ ab -r -t 3600 -s 3600 -k -n 1800 -c 200 "http://contoso.org:9502/index/server/run?hi=welcome%20to%20china"
     */
    
    class Server {
    
        private $redis;
        private $serv;
    
        public function __construct() {
            ini_set('default_socket_timeout', -1);
        }
    
        public function run() {
            $this->redis = new \Redis;
            $this->redis->connect('127.0.0.1', 6379, 0);
            $this->serv = new swoole_websocket_server("0.0.0.0", 9502);
            $this->serv->set(array(
                'worker_num' => 4, //worker process num
                'backlog' => 128, //listen backlog
                'max_request' => 50,
                'dispatch_mode' => 1,
            ));
    
            $this->serv->on('Open', function ($server, $req) {
                $this->redis->sAdd('chat:fd:sets',$req->fd);
                echo "\n connection open: " . $req->fd . "\n";
            });
    
            $this->serv->on('Message', function ($server, $frame) {
                echo "\n message: " . $frame->data . "\n";
                $onlines = $this->redis->sMembers('chat:fd:sets');
                if (is_array($onlines)) {
                    foreach($onlines as $fd){
                        @$server->push($fd, $frame->data);
                    }
                }
            });
    
            // http://contoso.org:9502/index/server/run?hi=moxi,moxi
            $this->serv->on('Request', function ($req, $respone) {
                echo "\n fd: " . $respone->fd . "\n";
                if(isset($req->get['hi'])){  // 判断下是否有数据  
                    $onlines = $this->redis->sMembers('chat:fd:sets');
                    if(is_array($onlines)){
                        foreach($onlines as $fd){
                            @$this->serv->push($fd, $req->get['hi']);
                        }
                    }
                }  
                $respone->end("success");  
            });
    
            $this->serv->on('Close', function ($server, $fd) {
                echo "\n connection close: \n" . $fd;
            });
    
            $this->serv->start();
        }
    
    }
    


    <!DOCTYPE html>
    <html> 
        <head> 
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
            <title>WebSoketClient1</title> 
            <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
            <script type="text/JavaScript"> 
                //验证浏览器是否支持WebSocket协议
                if (!window.WebSocket) { 
                    alert("WebSocket not supported by this browser!"); 
                } 
                 var ws;
                function display() { 
                    ws=new WebSocket('ws://contoso.org:9502'); 
                    //监听消息
                    ws.onmessage = function(event) { 
                        log(event.data);
                    }; 
                    ws.onclose = function(event) { 
                      log("socket连接已断开");
                    }; 
                    // 打开WebSocket
                    ws.onopen = function(){
                        log("socket连接已打开");                    
                    };
                    ws.onerror =function(event){
                        log("ERROR:" + event.data);
                    };
                } 
                var log = function(s) {  
                    if (document.readyState !== "complete") {  
                        log.buffer.push(s);  
                    } else {  
                        document.getElementById("contentId").innerHTML += (s + "\n");  
                    }  
                 }  
                function sendMsg(){
                    var msg=document.getElementById("messageId");
                    ws.send(msg.value); 
                }
            </script> 
        </head> 
        <body οnlοad="display();" width="120px" height="220px"> 
            <textarea rows="20" cols="30" id="contentId"></textarea>
            <br/>
            <input name="message" id="messageId"/>
            <button id="sendButton" onClick="javascript:sendMsg()" >Send</button>
        </body> 
    </html> 


    展开全文
  • 二、WebSocket简介与消息推送 三、WebSocket客户端 四、WebSocket服务器端 五、测试运行 六、小结与消息推送框架 6.1、开源Java消息推送框架 Pushlet 6.2、开源DotNet消息推送框架SignalR 七、代码下载 ...
  • 消息推送-主要通过window.Notification.permission来判断 "denied" --- 为用户点击了禁用(拒绝打开推送功能) "default" ----推送功能默认关闭 "granted" ----推送功能为开启状态(用户点击允许后的状态) <!...
  • html5 API postMessage 实现消息跨域推送
  • 个推+mui+html5 +java完成消息推送

    千次阅读 2018-07-11 17:07:02
    几个月前写的,个推官方的例子真是难,找了好久才拼出来这几个方法,本文包含java调用个推SDK的消息推送和app方向的接收消息。package geti; import java.io.IOException; import java.util.ArrayList; import java....
  • HTML5服务器推送消息的各种解决办法,html5服务器 摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件、消息、待办事项等通知。 往BS架构本身存在的问题就是,...
  • HTML5服务器推送消息

    2017-03-10 14:45:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 前端代码(html5.html): <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">...消息推送</title> <script type="text/javascript"> var so...
  • WebSocket实现android消息推送WebSocket是HTML5出的协议,基于TCP。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。WebSocket协议之前,双工通信是通过多个http链接来实现,这...
  •  Web Notifications目前在w3c的协议中已经是“推荐”(REC:Recommendation)阶段,除了iE外,各大现代浏览器都对这个桌面推送有了基本的支持。这都代表我们现在可以很好的在应用中使用桌面推送的特性。在移动端浏览器...
  • 在各种BS架构的应用程序中,往往都希望服务端能够主动地向...随着HTML、浏览器等各项技术、标准的发展,依次生成了不同的手段与方法能够实现服务端主动推送消息,它们分别是:AJAX,Comet,ServerSent以及WebSocket。
  • 1、html页面basic_sse.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...数据推送</title> </head> <body> <pre i...
  • H5WebSocket消息推送

    2017-11-23 17:29:00
    WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以...
  • rabbitmq实例 包括: 基于java的websocket消息推送,以及spring boot集成方式的消息推送 ...基于html5的websocke协议实现,html直接与rabbitmq建立链接,进行消息推送和接收 技术学习交流:635278789
  • 最近在研究使用SignalR实现跨平台的消息中心,WebAPI+SignalR作为数据接口和消息中心,客户端包含WPF桌面应用、Web应用和Android移动应用。这其中关键的功能点在于接收到实时消息后的通知提醒,桌面应用和Web应用...
  • html页面basic_sse.html数据推送Initializing...if(typeof(EventSource)!=="undefined"){var source = new EventSource("/sjts/index.php");source.onmessage=function(event){document.getElementById("result")....
  • 消息推送技术

    2014-08-06 21:15:17
    消息推送技术    消息推送技术  消息推送  Web 层消息推送  套接字  HTTP 请求轮询  简单轮询 长轮询 HTTP 流  HTML 5 WebSocket 多客户端支持  APIs 多样  网络连接不稳定 最小化流量  服务...
  • HTML5+规范:Push(管理推送消息功能)

    万次阅读 2016-07-04 19:59:09
    Push模块管理推送消息功能,可以实现在线、离线的消息推送,通过plus.push可获取推送消息管理对象。 1、方法 1.1、addEventListener: 添加推送消息事件监听器  void plus.push.addEventListener( event, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 687
精华内容 274
关键字:

html5消息推送