Site icon Soul & Shell Blog

使用 JQuery 實作 CometD Client 教學

SJ

CometD 介紹

CometD 為 Jetty Server (官方網站) 原生提供的 Message Servlet，當你下載 Jetty 之後可在 webapps 的目錄中看見 cometd.war 這支檔案。最早的 CometD Demo 頁面中提供了文字聊天室，底層是採用了 dojo (一項AJAX框架) 進行 CometD Client 實作，使用者可以透過 JavaScript 在網頁上進行訊息的交換。CometD 的底層是使用 Bayeux Protocol，Bayeux 提供了持續連線的方式來與 Server 溝通，提高訊息傳撥的即時性。此外 Bayeux 訊息傳送是採用 JSON 的格式，因次 JQuery 的實作上也用到了 jquery.json 這一個 Plugin。

最 近發現 Jetty 6.1.25 的版本中，CometD 的 Demo 除了原本的 dojo 之外，還提供了 JQuery 的版本。看過程式碼以後，發現最少僅需要四支檔案即可完成 CometD 的連線，官方主要提供了 JQuery CometD Plugin 與另一支需要用到的 JavaScript (cometd.js)。以下為需要的檔案，可自行將 cometd.war 解開 (war其實是zip壓縮檔) 後取得。

  • jquery-1.4.2-min.js （1.3.2也可以）
  • jquery.json-2.2.js
  • cometd.js
  • jquery.cometd.js

JQuery CometD Plugin 使用教學

  • 在 HTML 中引入上述四個檔案
<script type="text/javascript" src="jquery-1.4.2-min.js"></script>
<script type="text/javascript" src="jquery.json-2.2.js"></script>
<script type="text/javascript" src="cometd.js"></script>
<script type="text/javascript" src="jquery.cometd.js"></script>
$.cometd.configure({
    url: '../cometd/cometd',
    logLevel: 'debug'
});
$.cometd.handshake();
$.cometd.subscribe('/mychannel', function(message){
    alert(message.data);
});
$.cometd.publish('/mychannel', 'Hello!!');

安裝 CometD Server

上面介紹如何在 jQuery 使用 Cometd Plugin 連接 CometD Server，由於新版 Jetty 已經沒有預設內建 CometD，為了讓教學更完整，我們來實作一下如何建立 CometD Server，好嚐嚐 Long-Polling 的優勢。

    1. 安裝 Java JRE
    2. 下載 Jetty 8 解壓縮到磁碟中
    3. 設定 JETTY_HOME 目錄到上面解壓縮的目錄中，例如： set JETTY_HOME={YOUR_JETTY_HOME}
    4. 下載 CometD 2.8 進行解壓縮
    5. 將 Cometd 解壓縮目錄中的 /cometd-demo/target/cometd-demo-2.8.0.war 檔案複製到 Jetty 解壓縮目錄中的 {JETTY_HOME}/webapps 資料夾中
    6. 將 {JETTY_HOME}/webapps/cometd-demo-2.8.0.war 更名為 {JETTY_HOME}/webapps/cometd.war
    7. 用指令啟動 Jetty Server: /webapps/bin/jetty.sh start
    8. 打開網頁輸入「http://127.0.0.1:8080/cometd」，如果看到下面的畫面就表示成功囉

後記

經過五年有些作法已經改變，最近幫網友測試一下新版的 CometD 2.8，發現透過 jQuery Subcribe Channel 測試後只有 /chat/* 有效，目前並沒有找到原因？為了方便使用，我將程式碼放在 GitHub，有興趣的朋友們可以下載使用。

只要將 cometd 目錄放到您的 webapps 目錄下即可看到成果，下圖是四種瀏覽器 (Safari, FireFox, IE, Chrome) 的執行結果。

參考網址

Exit mobile version