pushlet实现服务端推送消息到浏览器

时间：2021-01-13 14:54:07

1.添加服务器推送功能

pushlet下载地址http://www.pushlets.com/，添加jar包pushlet.jar到项目的库中，需要用到的js文件ajax-pushlet-client.js,拷贝下载的压缩包中的文件pushlet.properties,sources.properties到项目的路径下

在web.xml中添加：

[html] view plaincopy
  1. <servlet>  
  2.    <servlet-name>pushlet</servlet-name>  
  3.    <servlet-class>nl.justobjects.pushlet.servlet.Pushlet</servlet-class>  
  4.    <load-on-startup>1</load-on-startup>  
  5.  </servlet>  
  6.  <servlet-mapping>  
  7.    <servlet-name>pushlet</servlet-name>  
  8.    <url-pattern>/pushlet.srv</url-pattern>  
  9.  </servlet-mapping>  

2.服务器定义发送信息到客户端的实现：

首先定义一个事件源，该事件源负责推送消息到客户端

[java] view plaincopy
  1. public class HelloWorldPushlet extends EventPullSource implements Serializable {  
  2.     private static final long serialVersionUID = -4378845831200885879L;  
  3.   
  4.     /** 
  5.      * 推送时间间隔 
  6.      */  
  7.     protected long getSleepTime() {  
  8.         return 1000;  
  9.     }  
  10.   
  11.     /** 
  12.      * 推送时所触发的方法 
  13.      */  
  14.     protected Event pullEvent() {  
  15.         //创建事件，并制定事件的主题  
  16.         Event event = Event.createDataEvent("/ynb/helloworld");  
  17.         String data = "hello world,microbingbing" + System.currentTimeMillis();  
  18.         try {  
  19.             data=new String(data.getBytes("UTF-8"),"ISO-8859-1");  
  20.         } catch (UnsupportedEncodingException e) {  
  21.             e.printStackTrace();  
  22.         }  
  23.         event.setField("message", data);  
  24.         return event;  
  25.     }  
  26. }  
 接下来我们需要注册该事件源,在sources.properties配置文件中添加

source7=com.ynb.servlet.HelloWorldPushlet

ajax形式 jsp页面：

[html] view plaincopy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. <title>pushlet测试页面</title>  
  7. <script type="text/javascript" src="/pushlet/js/ajax-pushlet-client.js"></script>  
  8. </head>  
  9. <body>  
  10.     <div id="target"></div>  
  11.     <script type="text/javascript">  
  12.         //PL._init(); 无需初始化 否则chrome下会报错  
  13.         PL.joinListen("/ynb/helloworld");//监听该主题的事件，如果发生该主题的事件，那么onData()方法会被调用  
  14.           
  15.         function onData(event){  
  16.             document.getElementById("target").innerText = event.get("message");  
  17.         }     
  18.     </script>  
  19. </body>  
  20. </html>  

iframe形式 jsp页面，需要调用 p_embed(),及载入另一个js-pushlet-client.js 文件，同时还需要 js-pushlet-net.html,

看下面源码：

 var pushletLayer = '<iframe id="pushletFrame" name="pushletFrame" src="' + pushletNetURI + '" style="visibility: hidden; width: 0px; height: 0px; border: 0px;"></iframe>';

self.document.write(pushletLayer);// 此处就是放入

可以修改源码 放入自定义的 div中 


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/pushletDemo/lib/js-pushlet-client.js"></script>
<title>Insert title here</title>
</head>
<body onload="init();">
<div id="target"></div>
<div id="zs"></div>
<input type="button" onclick="sendnews()" value="发送"/>
<script type="text/javascript">
function init() {
//initDHTML();
p_embed("/pushletDemo/");
p_join_listen('/ynb/helloworld');
}

function onData(event){
//alert(event.get("message"));
}


//点击发送按钮的时候触发事件的推送，p_publish()函数的第一个参数为触发事件的主题，其后的第2n个和2n+1个参数为事件对象中的属性
function sendnews(){
p_publish("/ynb/helloworld", "message", "message from other1111111111");
}
</script>
</body>
</html>


3.可控的消息推送，即由客户端控制推送消息的时间。

新建一个servlet处理消息的推送

[java] view plaincopy
  1. @WebServlet("/PushletServlet")  
  2. public class PushletServlet extends HttpServlet {  
  3.     private static final long serialVersionUID = 1L;  
  4.     public PushletServlet() {  
  5.         super();  
  6.     }  
  7.   
  8.     @Override  
  9.     protected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {  
  10.         Event event = Event.createDataEvent("/ynb/helloworld");  
  11.         event.setField("message", "message from service" + System.currentTimeMillis());  
  12.         Dispatcher.getInstance().multicast(event);//消息的推送有单播，组播，广播三种方式，对应不同的api调用  
  13.     }  
  14. }  
 每次调用该servlet都会触发主题为“/ynb/helloworld”的事件，如果监听了该事件的客户端就会收到推送的消息



4.在客户端触发消息的推送，而不需要自己编写servlet.

[html] view plaincopy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <script type="text/javascript" src="/pushlet/js/ajax-pushlet-client.js"></script>  
  8. <title>Insert title here</title>  
  9. </head>  
  10. <body>  
  11.     <div id="target"></div>  
  12.     <input type="button" onclick="sendnews()" value="发送"/>  
  13.     <script type="text/javascript">  
  14.         PL._init();  
  15.         PL.joinListen("/other/helloworld");  
  16.           
  17.         function onData(event){  
  18.             document.getElementById("target").innerText = event.get("message");  
  19.         }  
  20.         //点击发送按钮的时候触发事件的推送，p_publish()函数的第一个参数为触发事件的主题，其后的第2n个和2n+1个参数为事件对象中的属性  
  21.         function sendnews(){  
  22.             p_publish("/ynb/helloworld", "message", "message from other" + new Date());  
  23.         }  
  24.     </script>  
  25. </body>  
  26. </html>  

Event.setField(name, value)的时候value的值不能为null，否则接受不到信息。


标签：

相关文章