pushlet實現服務器端向客戶端推送信息

使用Pushlet來實現服務器端向客戶端推送信息javascript

1.   實現方式:

有兩種實現方式:html

1.         經過配置文件來實現定時的從服務器端向客戶端推送信息java

2.         經過API主動向另一端推送信息web

 

如下分別給予介紹。ajax

 

2.   特別注意

在開始測試以前,有三點很是重要,須要實現講明,不然程序將會沒法正常運行:服務器

2.1.     JSP頁面上的設定

JSP頁面上必須添加如下代碼以確保Pushlet可以正確的得到後臺服務的地址:app

<base href="<%=request.getContextPath()%>">eclipse

 

2.2.     Pushlet的JS文件的Bug修改

須要修改被引用的JS文件ajax-pushlet-client.js的內容,找到webapp

PL.pushletURL = PL._getWebRoot() + 'pushlet.srv';jsp

將其修改成

PL.pushletURL = 'pushlet.srv';

修改的緣由是Pushlet進行地址解析的方法在某些應用中會解析錯誤,致使請求的路徑是nullpushlet.srv?,最終致使沒法正確的請求到服務器的信息。

 

2.3.     中文問題

通常狀況下,若是不作特殊處理,中文問題將會致使Pushlet的客戶端中止響應,解決辦法是,在使用Pushlet的客戶端代碼發送消息以前,將其進行轉碼,代碼爲

encodeURIComponent( msg)

3.   正式開始

以上準備工做完畢,就能夠正式的開發測試樣例了。

 

3.1.     定時的從後臺向前臺push信息

(1)       在eclipse中建立一個動態的web工程

(2)       配置及庫文件文件:從http://www.pushlets.com/ 下載最新的pushlet的開發包,將其中的如下文件按照描述進行設定

序號

文件名

源位置

目標位置

備註

1.          

pushlet.jar

{pushlet-2.0.4}\lib

項目類路徑

若是使用的是applet的話,還須要將pushletclient.jar設置到項目的類路徑中去

2.          

log4j.properties

pushlet.properties

sources.properties

{pushlet-2.0.4}\webapps\pushlet\WEB-INF\classes

項目的src根路徑

注意稍後須要修改sources.properties,其餘兩個文件的內容不須要修改

3.          

ajax-pushlet-client.js

{pushlet-2.0.4}\webapps\pushlet\lib

項目的webroot\lib

須要按照以前的描述修改其中的內容

(3)       修改web.xml,將pushlet的自啓動servlet添加進去

  <servlet>

    <servlet-name>pushlet</servlet-name>

    <servlet-class>nl.justobjects.pushlet.servlet.Pushlet</servlet-class>

    <load-on-startup>1</load-on-startup>

  </servlet>

  <servlet-mapping>

    <servlet-name>pushlet</servlet-name>

    <url-pattern>/pushlet.srv</url-pattern>

  </servlet-mapping>

(4)       建立服務器端代碼,特別注意類和內部靜態類的名字

 

package com.guoguo;

 

import java.io.Serializable;

import java.io.UnsupportedEncodingException;

import sun.rmi.runtime.Log;

import nl.justobjects.pushlet.core.Event;

import nl.justobjects.pushlet.core.EventPullSource;

 

 

public class HelloWorldPushlet implements Serializable {

 

     

     private static final long serialVersionUID = -8940934044114406724L;

 

     public static class HWPushlet extends EventPullSource {

           Log log = Log.getLog(HWPushlet.class.getName(),

                      HWPushlet.class.getName(), true);

 

          

           @Override

          protected long getSleepTime() {

                return 1000;//每一秒鐘自動執行一次

           }

 

          

           @Override

          protected Event pullEvent() {

             //注意,一下是設定消息的主題/guoguo/helloworld,號稱主題是能夠繼承的

            //可是筆者的測試是失敗的,也許方法不對,呵呵

                 Event event = Event.createDataEvent("/guoguo/helloworld");

                 String data= "hello,world 郭強 "+System.currentTimeMillis();

                try {

                      data=new String(data.getBytes("UTF-8"),"ISO-8859-1");

                 } catch (UnsupportedEncodingException e) {

                      e.printStackTrace();

                 }

                 event.setField("hw",data);

                return event;

           }

 

      }

}

 

(5)       註冊服務器端代碼爲事件源,在sources.properties文件中,添加如下行

source7=com.guoguo.HelloWorldPushlet$HWPushlet

以上方式適用於有內部類的狀況,若是沒有內部類的話,使用如下的方式進行註冊(這時外部類必須繼承父類EventPullSource)

source7=com.guoguo.HelloWorldPushlet

(6)       頁面(能夠參考頁面內註釋信息)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

      pageEncoding="ISO-8859-1"%>

<!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=ISO-8859-1">

<title>Pushlet Test</title>

<meta http-equiv="pragma" content="no-cache"

<meta http-equiv="cache-control" content="no-cache">

<base href="<%=request.getContextPath()%>">

</head>

<body>

      <script type="text/javascript" src="lib/ajax-pushlet-client.js"></script>

      <div id="guoguo"></div>

      <script type="text/javascript">

          //初始化pushlet客戶端

           PL._init();

        //設定運行時顯示調試信息,不須要時,直接刪掉便可

           PL.setDebug(true);

        //設定監聽主題:/guoguo/helloworld,與服務器端的主題徹底一致

           PL.joinListen('/guoguo/helloworld');

        //接收到事件後,顯示服務器信息

          function onData(event) {

                 guoguo.innerText=(event.get("hw"));

           }

      </script>

      <p1>Pushlet Test</p1>

</body>

</html>

(7)       啓動服務器,便可看到頁面上的信息每秒鐘一次,進行定時的更新

3.2.     主動控制發送消息

3.2.1.   有刷新的提交信息(服務器端主動發送消息)

(1)       建立一個servlet,而且註冊到web.xml中

Servlet代碼

package com.guoguo;

 

import java.io.IOException;

 

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import nl.justobjects.pushlet.core.Dispatcher;

import nl.justobjects.pushlet.core.Event;

import nl.justobjects.pushlet.core.SessionManager;

 

 

public class ChatServlet extends HttpServlet {

         private static final long serialVersionUID = 1L;

 

        

         public ChatServlet() {

                   super();

         }

 

        

         protected void service(HttpServletRequest request,

                            HttpServletResponse response) throws ServletException, IOException {

                   // myUnicast();

                   myMulticast();

                   // myBroadcast();

                   request.getRequestDispatcher("chat.jsp").forward(request, response);

         }

 

         private void myUnicast() {

 

                   Event event = Event.createDataEvent("/guoguo/myevent1");

                   event.setField("key1", "Unicast msg");

                   Dispatcher.getInstance().unicast(event, "piero"); // 向ID爲piero的用戶推送

                   System.out.println("success....");

         }

 

         private void myMulticast() {

                   Event event = Event.createDataEvent("/guoguo/myevent1");

                   //Event event = Event.createDataEvent("/guoguo");

                   event.setField("key1", "Multicast msg");

                   Dispatcher.getInstance().multicast(event); // 向全部和myevent1名稱匹配的事件推送

 

                   System.out.println("wa success....");

 

         }

 

         private void myBroadcast() {

                   Event event = Event.createDataEvent("/guoguo/myevent1"); // 向全部的事件推送,不要求和這兒的myevent1名稱匹配

                   event.setField("key1", "Broadcast msg");

                   Dispatcher.getInstance().broadcast(event);

 

                   System.out.println("asw success....");

         }

 

}

 

Web.xml

  <servlet>

    <display-name>ChatServlet</display-name>

    <servlet-name>ChatServlet</servlet-name>

    <servlet-class>com.guoguo.ChatServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>ChatServlet</servlet-name>

    <url-pattern>/ChatServlet</url-pattern>

  </servlet-mapping>

 

(2)       頁面端代碼

發送端

<base href="<%=request.getContextPath()%>">

<form action="<%=request.getContextPath()%>/ChatServlet">

      <input type="submit">

</form>

接收端

<base href="<%=request.getContextPath()%>">

<script type="text/javascript" src="lib/ajax-pushlet-client.js"></script>

<div id="guoguo"></div>

<script type="text/javascript">

           PL._init();

           PL.joinListen('/guoguo/myevent1');

          function onData(event) {

                 guoguo.innerText = (event.get("key1"));

           }

</script>

 

啓動服務器,從發送端提交信息,內容會在接收端顯示出來

 

3.2.2.   無刷新的提交信息(從客戶端發送消息)

發送端

<base href="<%=request.getContextPath()%>">

<script type="text/javascript" src="lib/ajax-pushlet-client.js"></script>

<script type="text/javascript">

           PL._init();

          function sendnews(msg) {

                 p_publish('/guoguo/myevent1', 'key1',encodeURIComponent(msg),’key2’,’msg2’);

           }

</script>

<input type="text" name="mymsg">

<input type = "button" value="發消息" onclick="sendnews(mymsg.value)"/>

 

接收端

<base href="<%=request.getContextPath()%>">

<script type="text/javascript" src="lib/ajax-pushlet-client.js"></script>

<div id="guoguo"></div>

<script type="text/javascript">

           PL._init();

           PL.joinListen('/guoguo/myevent1');

          function onData(event) {

                 guoguo.innerText = (event.get("key1"));

           }

</script>

 

啓動服務器,從發送端提交信息,內容會在接收端顯示出來

 

 

注意:Pushlet目前僅對IE支持良好,通過筆者的測試,FireFox,Chrome均沒法實現無刷新的客戶端信息提交。

 

摘自--http://blog.sina.com.cn/s/blog_58b9cb3a01014l71.html

相關文章
相關標籤/搜索