JabberHTTPBind是jabber提供的XMPP協議通信的Http bind發送的形式，它可以完成WebBrowser和Openfire建立長連接通信。
主要通信流程如下圖所示：
用戶A通過JavaScript jsjac.js庫發送一條消息到JabberHTTPBind這個Servlet容器，然後JabberHTTPBind的Servlet容器會向Openfire發送XMPP協議的XML報文。Openfire Server接收到報文後解析，然後發送給指定的用戶B。JabberHTTPBind獲取到Openfire Server發送的數據後，解析報文向當前Servlet容器中的鏈接的Session中找到指定的用戶再發送數據給用戶B。
WebBrowser端用的是jsjac和JabberHTTPBind建立的連接，所有數據都要經過JabberHTTPBind解析/轉換發送給Openfire。
先上張圖看看效果，呵呵~這裡是用戶hoojo和girl的聊天畫面，雙方在進行互聊……
可以發送表情、改變字體樣式（對方界面也可以看到你的字體樣式），同時右側是顯示/收縮詳情的信息
收縮詳情
聊天界面部分截圖
用戶登錄、注冊，sendTo表示你登錄後向誰發送聊天消息、並且建立一個聊天窗口
登錄成功後，你可以在日志控制台看到你的登陸狀態、或是在firebug控制台中看到你的連接請求狀態
登陸失敗
只有connecting，就沒有下文了
登陸成功後，你就可以給指定用戶發送消息，且設置你想發送消息的新用戶點擊new Chat按鈕創建新會話
如果你來了新消息，在浏覽器的標題欄會有新消息提示
如果你當前聊天界面的窗口都是關閉狀態，那麼在右下角會有消息提示的閃動圖標
這裡已經貼出了所有的源代碼了，如果你非常的需要源代碼（但我希望你能自己創建一個工程去復制源代碼，這是我希望看到的），那麼你可以通過以下方式聯系我
Email：hoojo_@126.com
Blog：http://blog.csdn.net/IBM_hoojo
http://hoojo.cnblogs.com/
http://hoojo.blogjava.net
注：我不會保證在第一時間給你代碼，但我會在空閒的時間給你發送源碼
開發環境
System：Windows
JavaEE Server：Tomcat 5.0.28+/Tomcat 6
WebBrowser：IE6+、Firefox3.5+、Chrome 已經兼容浏覽器
JavaSDK：JDK 1.6+
Openfire 3.7.1
IDE：eclipse 3.2、MyEclipse 6.5
開發依賴庫
jdk1.4+
serializer.jar
xalan.jar
jhb-1.0.jar
log4j-1.2.16.jar
jhb-1.0.jar 這個就是JabberHTTPBind，我把編譯的class打成jar包了
JavaScript lib
jquery.easydrag.js 窗口拖拽JavaScript lib
jquery-1.7.1.min.js jquery lib
jsjac.js 通信核心庫
local.chat-2.0.js 本地會話窗口發送消息JavaScript庫
remote.jsjac.chat-2.0.js 遠程會話消息JavaScript庫
send.message.editor-1.0.js 窗口編輯器JavaScript庫
一、准備工作
jsjac JavaScript lib下載：https://github.com/sstrigler/JSJaC/
如果你不喜歡用jsjac JavaScript lib和Openfire通信，那麼有一款jQuery的plugin可以供你使用，下載地址
jQuery-XMPP-plugin https://github.com/maxpowel/jQuery-XMPP-plugin
這裡有所以能支持Openfire通信的第三方庫，有興趣的可以研究下 http://xmpp.org/xmpp-software/libraries/
jquery.easydrag 下載：http://fromvega.com/code/easydrag/jquery.easydrag.js
jquery 下載：http://code.jquery.com/jquery-1.7.1.min.js
JabberHTTPBind jhb.jar 下載：http://download.csdn.net/detail/ibm_hoojo/4489188
images 圖片素材：http://download.csdn.net/detail/ibm_hoojo/4489439
工程目錄結構
二、核心代碼演示
1、主界面（登陸、消息提示、日志、建立新聊天窗口）代碼 index.jsp
. 代碼如下:
<%@ page language="java" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>WebIM Chat</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="author" content="hoojo">
<meta http-equiv="email" content="hoojo_@126.com">
<meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
<meta http-equiv="blog" content="http://hoojo.cnblogs.com">
<link rel="stylesheet" type="text/css" href="css/chat-2.0.css" />
<script type="text/javascript">
window.contextPath = "<%=path%>";
window["serverDomin"] = "192.168.8.22";
</script>
<script type="text/javascript" src="jslib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jslib/jsjac.js"></script>
<!-- script type="text/javascript" src="debugger/Debugger.js"></script-->
<script type="text/javascript" src="jslib/send.message.editor-1.0.js"></script>
<script type="text/javascript" src="jslib/jquery.easydrag.js"></script>
<script type="text/javascript" src="jslib/remote.jsjac.chat-2.0.js"></script>
<script type="text/javascript" src="jslib/local.chat-2.0.js"></script>
<script type="text/javascript">
$(function () {
$("#login").click(function () {
var userName = $(":text[name='userName']").val();
var receiver = $("*[name='to']").val();
// 建立一個聊天窗口應用，並設置發送者和消息接收者
$.WebIM({
sender: userName,
receiver: receiver
});
// 登陸到openfire服務器
remote.jsjac.chat.login(document.userForm);
$("label").text(userName);
$("form").hide();
$("#newConn").show();
});
$("#logout").click(function () {
// 退出openfire登陸，斷開鏈接
remote.jsjac.chat.logout();
$("form").show();
$("#newConn").hide();
$("#chat").hide(800);
});
$("#newSession").click(function () {
var receiver = $("#sendTo").val();
// 建立一個新聊天窗口，並設置消息接收者（發送給誰？）
$.WebIM.newWebIM({
receiver: receiver
});
});
});
</script>
</head>
<body>
<!-- 登陸表單 -->
<form name="userForm" style="background-color: #fcfcfc; width: 100%;">
userName：<input type="text" name="userName" value="boy"/>
password：<input type="password" name="password" value="boy"/>
register: <input type="checkbox" name="register"/>
sendTo： <input type="text" id="to" name="to" value="hoojo" width="10"/>
<input type="button" value="Login" id="login"/>
</form>
<!-- 新窗口聊天 -->
<div id="newConn" style="display: none; background-color: #fcfcfc; width: 100%;">
User：<label></label>
sendTo： <input type="text" id="sendTo" value="hoojo" width="10"/>
<input type="button" value="new Chat" id="newSession"/>
<input type="button" value="Logout" id="logout"/>
</div>
<!-- 日志信息 -->
<div id="error" style="display: ; background-color: red;"></div>
<div id="info" style="display: ; background-color: #999999;"></div>
<!-- 聊天來消息提示 -->
<div class="chat-message">
<img src="images/write_icon.png" class="no-msg"/>
<img src="images/write_icon.gif" class="have-msg" style="display: none;"/>
</div>
</body>
</html>
下面這段代碼尤為重要，它是設置你鏈接openfire的地址。這個地址一段錯誤你將無法進行通信！
. 代碼如下:
<script type="text/javascript">
window.contextPath = "<%=path%>";
window["serverDomin"] = "192.168.8.22";
</script>
$.WebIM方法是主函數，用它可以覆蓋local.chat中的基本配置，它可以完成聊天窗口的創建。$.WebIM.newWebIM方法是新創建一個窗口，只是消息的接收者是一個新用戶。
. 代碼如下:
$.WebIM({
sender: userName,
receiver: receiver
});
$.WebIM.newWebIM({
receiver: receiver
});
remote.jsjac.chat.login(document.userForm);方法是用戶登錄到Openfire服務器
參數如下：
httpbase: window.contextPath + "/JHB/", //請求後台http-bind服務器url
domain: window["serverDomin"], //"192.168.5.231", // 192.168.5.231 當前有效域名
username: "", // 登錄用戶名
pass: "", // 密碼
timerval: 2000, // 設置請求超時
resource: "WebIM", // 鏈接資源標識
register: true // 是否注冊
remote.jsjac.chat.logout();是退出、斷開openfire的鏈接
2、本地聊天應用核心代碼 local.chat-2.0.js
. 代碼如下:
/***
* jquery local chat
* @version v2.0
* @createDate -- 2012-5-28
* @author hoojo
* @email hoojo_@126.com
* @blog http://hoojo.cnblogs.com & http://blog.csdn.net/IBM_hoojo
* @requires jQuery v1.2.3 or later, send.message.editor-1.0.js
* Copyright (c) 2012 M. hoo
**/
;(function ($) {
if (/1\.(0|1|2)\.(0|1|2)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
alert('WebIM requires jQuery v1.2.3 or later! You are using v' + $.fn.jquery);
return;
}
var faceTimed, count = 0;
var _opts = defaultOptions = {
version: 2.0,
chat: "#chat",
chatEl: function () {
var $chat = _opts.chat;
if ((typeof _opts.chat) == "string") {
$chat = $(_opts.chat);
} else if ((typeof _opts.chat) == "object") {
if (!$chat.get(0)) {
$chat = $($chat);
}
}
return $chat;
},
sendMessageIFrame: function (receiverId) {
return $("iframe[name='sendMessage" + receiverId + "']").get(0).contentWindow;
},
receiveMessageDoc: function (receiverId) {
receiverId = receiverId || "";
var docs = [];
$.each($("iframe[name^='receiveMessage" + receiverId + "']"), function () {
docs.push($(this.contentWindow.document));
});
return docs;
//return $($("iframe[name^='receiveMessage" + receiverId + "']").get(0).contentWindow.document);
},
sender: "", // 發送者
receiver: "", // 接收者
setTitle: function (chatEl) {
var receiver = this.getReceiver(chatEl);
chatEl.find(".title").html("和" + receiver + "聊天對話中");
},
getReceiver: function (chatEl) {
var receiver = chatEl.attr("receiver");
if (~receiver.indexOf("@")) {
receiver = receiver.split("@")[0];
}
return receiver;
},
// 接收消息iframe樣式
receiveStyle: [
'<html>',
'<head><style type="text/css">',
'body{border:0;margin:0;padding:3px;height:98%;cursor:text;background-color:white;font-size:12px;font-family:Courier,serif,monospace;}',
'.msg{margin-left: 1em;}p{margin:0;padding:0;}.me{color: blue;}.you{color:green;}',
'</style></head>',
'<body></body>',
'</html>'
].join(""),
writeReceiveStyle: function (receiverId) {
this.receiveMessageDoc(receiverId)[0].get(0).write(this.receiveStyle);
},
datetimeFormat: function (v) {
if (~~v < 10) {
return "0" + v;
}
return v;
},
getDatetime: function () {
// 設置當前發送日前
var date = new Date();
var datetime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
datetime = " " + _opts.datetimeFormat(date.getHours())
+ ":" + _opts.datetimeFormat(date.getMinutes())
+ ":" + _opts.datetimeFormat(date.getSeconds());
return datetime;
},
/***
* 發送消息的格式模板
* flag = true 表示當前user是自己，否則就是對方
**/
receiveMessageTpl: function (userName, styleTpl, content, flag) {
var userCls = flag ? "me" : "you";
if (styleTpl && flag) {
content = [ "<span style='", styleTpl, "'>", content, "</span>" ].join("");
}
return [
'<p class="', userCls, '">', _opts.getDatetime(), ' ', userName, ':</p>',
'<p class="msg">', content, '</p>'
].join("");
},
// 工具類按鈕觸發事件返回html模板
sendMessageStyle: {
cssStyle: {
bold: "font-weight: bold;",
underline: "text-decoration: underline;",
italic: "font-style: oblique;"
},
setStyle: function (style, val) {
if (val) {
_opts.sendMessageStyle[style] = val;
} else {
var styleVal = _opts.sendMessageStyle[style];
if (styleVal === undefined || !styleVal) {
_opts.sendMessageStyle[style] = true;
} else {
_opts.sendMessageStyle[style] = false;
}
}
},
getStyleTpl: function () {
var tpl = "";
$.each(_opts.sendMessageStyle, function (style, item) {
//alert(style + "#" + item + "#" + (typeof item));
if (item === true) {
tpl += _opts.sendMessageStyle.cssStyle[style];
} else if ((typeof item) === "string") {
//alert(style + "-------------" + sendMessageStyle[style]);
tpl += style + ":" + item + ";";
}
});
return tpl;
}
},
// 向接收消息iframe區域寫消息
writeReceiveMessage: function (receiverId, userName, content, flag) {
if (content) {
// 發送消息的樣式
var styleTpl = _opts.sendMessageStyle.getStyleTpl();
var receiveMessageDoc = _opts.receiveMessageDoc(receiverId);
$.each(receiveMessageDoc, function () {
var $body = this.find("body");
// 向接收信息區域寫入發送的數據
$body.append(_opts.receiveMessageTpl(userName, styleTpl, content, flag));
// 滾動條滾到底部
this.scrollTop(this.height());
});
}
},
// 發送消息
sendHandler: function ($chatMain) {
var doc = $chatMain.find("iframe[name^='sendMessage']").get(0).contentWindow.document;
var content = doc.body.innerHTML;
content = $.trim(content);
content = content.replace(new RegExp("<br>", "gm"), "");
// 獲取即將發送的內容
if (content) {
var sender = $chatMain.attr("sender");
var receiverId = $chatMain.attr("id");
// 接收區域寫消息
_opts.writeReceiveMessage(receiverId, sender, content, true);
//############# XXX
var receiver = $chatMain.find("#to").val();
//var receiver = $chatMain.attr("receiver");
// 判斷是否是手機端會話，如果是就發送純text，否則就發送html代碼
var flag = _opts.isMobileClient(receiver);
if (flag) {
var text = $(doc.body).text();
text = $.trim(text);
if (text) {
// 遠程發送消息
remote.jsjac.chat.sendMessage(text, receiver);
}
} else { // 非手機端通信 可以發送html代碼
var styleTpl = _opts.sendMessageStyle.getStyleTpl();
content = [ "<span style='", styleTpl, "'>", content, "</span>" ].join("");
remote.jsjac.chat.sendMessage(content, receiver);
}
// 清空發送區域
$(doc).find("body").html("");
}
},
faceImagePath: "images/emotions/",
faceElTpl: function (i) {
return [
"<img src='",
this.faceImagePath,
(i - 1),
"fixed.bmp' gif='",
this.faceImagePath,
(i - 1),
".gif'/>"
].join("");
},
// 創建表情html elements
createFaceElement: function ($chat) {
var faces = [];
for (var i = 1; i < 100; i++) {
faces.push(this.faceElTpl(i));
if (i % 11 == 0) {
faces.push("<br/>");
}
}
$chat.find("#face").html(faces.join(""));
this.faceHandler($chat);
},
// 插入表情
faceHandler: function ($chat) {
$chat.find("#face img").click(function () {
$chat.find("#face").hide(150);
var imgEL = "<img src='" + $(this).attr("gif") + "'/>";
var $chatMain = $(this).parents(".chat-main");
var win = $chatMain.find("iframe[name^='sendMessage']").get(0).contentWindow;
var doc = win.document;
sendMessageEditor.insertAtCursor(imgEL, doc, win);
});
// 表情隱藏
$chat.find("#face, #face img").mouseover(function () {
window.clearTimeout(faceTimed);
}).mouseout(function () {
window.clearTimeout(faceTimed);
faceTimed = window.setTimeout(function () {
$chat.find("#face").hide(150);
}, 700);
});
},
/***
* 發送消息工具欄按鈕事件方法
**/
toolBarHandler: function () {
var $chat = $(this).parents(".chat-main");
var targetCls = $(this).attr("class");
if (targetCls == "face") {
$chat.find("#face").show(150);
window.clearTimeout(faceTimed);
faceTimed = window.setTimeout(function () {
$chat.find("#face").hide(150);
}, 1000);
} else if (this.tagName == "DIV") {
_opts.sendMessageStyle.setStyle(targetCls);
} else if (this.tagName == "SELECT") {
_opts.sendMessageStyle.setStyle($(this).attr("name"), $(this).val());
if ($(this).attr("name") == "color") {
$(this).css("background-color", $(this).val());
}
}
// 設置sendMessage iframe的style css
_opts.writeSendStyle();
},
// 設置sendMessage iframe的style css
writeSendStyle: function () {
var styleTpl = _opts.sendMessageStyle.getStyleTpl();
var styleEL = ['<style type="text/css">body{', styleTpl,'}</style>'].join("");
$("body").find("iframe[name^='sendMessage']").each(function () {
var $head = $(this.contentWindow.document).find("head");
if ($head.find("style").size() > 1) {
$head.find("style:gt(0)").remove();
}
if (styleTpl) {
$head.append(styleEL);
}
});
},
isMobileClient: function (receiver) {
var moblieClients = ["iphone", "ipad", "ipod", "wp7", "android", "blackberry", "Spark", "warning", "symbian"];
var flag = false;
for (var i in moblieClients) {
if (~receiver.indexOf(moblieClients[i])) {
return true;
}
}
return false;
},
// 聊天界面html元素
chatLayoutTemplate: function (userJID, sender, receiver, product, flag) {
var display = "";
if (flag) {
display = "style='display: none;'";
}
return [
'<div class="chat-main" id="', userJID,
'" sender="', sender, '" receiver="', receiver, '">',
'<div id="chat"><div class="radius">',
'<table>',
'<tr>',
'<td colspan="3" class="title"></td>',
'</tr>',
'<tr>',
'<td class="receive-message">',
'<iframe name="receiveMessage', userJID,'" frameborder="0" width="100%" height="100%"></iframe>',
'</td>',
'<td rowspan="4" class="split" ', display, '></td>',
'<td rowspan="4" class="product-info" ', display, '>',
'<ul>',
'<div class="header">商品詳情</div>',
'<li class="pic">',
'<img src="', product.pic, '"/></li>',
'<li class="product-name">', product.name, '</li>',
'<li class="price">團購價：<span>', product.price, '</span>元</li>',
'<li class="market-price">市場價：<s><i>', product.marketPrice, '</i></s>元</li>',
'<li>快遞公司：', product.deliverOrgs, '</li>',
'<li>倉庫：', product.wareHouses, '</li>',
product.skuAttrs,
'</ul>',
'</td>',
'</tr>',
'<tr class="tool-bar">',
'<td>',
'<select name="font-family" class="family">',
'<option>宋體</option>',
'<option>黑體</option>',
'<option>幼圓</option>',
'<option>華文行楷</option>',
'<option>華文楷體</option>',
'<option>華文楷體</option>',
'<option>華文彩雲</option>',
'<option>華文隸書</option>',
'<option>微軟雅黑</option>',
'<option>Fixedsys</option>',
'</select>',
'<select name="font-size">',
'<option value="12px">大小</option>',
'<option value="10px">10</option>',
'<option value="12px">12</option>',
'<option value="14px">14</option>',
'<option value="16px">16</option>',
'<option value="18px">18</option>',
'<option value="20px">20</option>',
'<option value="24px">24</option>',
'<option value="28px">28</option>',
'<option value="36px">36</option>',
'<option value="42px">42</option>',
'<option value="52px">52</option>',
'</select>',
'<select name="color">',
'<option value="" selected="selected">顏色</option>',
'<option value="#000000" style="background-color:#000000"></option>',
'<option value="#FFFFFF" style="background-color:#FFFFFF"></option>',
'<option value="#008000" style="background-color:#008000"></option>',
'<option value="#800000" style="background-color:#800000"></option>',
'<option value="#808000" style="background-color:#808000"></option>',
'<option value="#000080" style="background-color:#000080"></option>',
'<option value="#800080" style="background-color:#800080"></option>',
'<option value="#808080" style="background-color:#808080"></option>',
'<option value="#FFFF00" style="background-color:#FFFF00"></option>',
'<option value="#00FF00" style="background-color:#00FF00"></option>',
'<option value="#00FFFF" style="background-color:#00FFFF"></option>',
'<option value="#FF00FF" style="background-color:#FF00FF"></option>',
'<option value="#FF0000" style="background-color:#FF0000"></option>',
'<option value="#0000FF" style="background-color:#0000FF"></option>',
'<option value="#008080" style="background-color:#008080"></option>',
'</select>',
'<div class="bold"></div>',
'<div class="underline"></div>',
'<div class="italic"></div>',
'<div class="face"></div>',
'<div class="history">消息記錄</div>',
'</td>',
'</tr>',
'<tr class="send-message">',
'<td>',
'<iframe name="sendMessage', userJID,'" width="100%" height="80px" frameborder="0"></iframe>',
'</td>',
'</tr>',
'<tr class="bottom-bar">',
'<td><input type="text" id="to" name="to" value="hoojo" style="width: 100px; display: none;"/><input type="button" value="關閉" id="close"/>',
'<input type="button" value="發送(Enter)" id="send"/> </td>',
'</tr>',
'</table></div>',
'<div id="face"></div>',
'</div>',
'</div>'
].join("");
},
initWebIM: function (userJID, receiver) {
var product = {
name: "小玩熊",
pic: "http://avatar.csdn.net/9/7/A/2_ibm_hoojo.jpg",
price: "198.00",
marketPrice: "899.90",
deliverOrgs: "EMS",
wareHouses: "A庫",
skuAttrs: ""
};
var chatEl = $(_opts.chatLayoutTemplate(userJID, _opts.sender, receiver, product));
$("body").append(chatEl);
// 拖拽
$("#" + userJID).easydrag();
// 初始化sendMessageEditor相關信息
sendMessageEditor.iframe = this.sendMessageIFrame(userJID);
sendMessageEditor.init(userJID);
_opts.setTitle(chatEl);
_opts.writeReceiveStyle(userJID);
_opts.writeSendStyle();
_opts.createFaceElement(chatEl);
// 查看更多詳情
chatEl.find(".more").click(function () {
var $ul = $(this).parents("ul");
$ul.find(".more").toggle();
$ul.find(".info").toggle();
$ul.find(".pic").toggle();
});
// 收縮詳情
chatEl.find(".split").toggle(function () {
$(".product-info").hide();
$(this).parents(".radius").css("border-right-width", "0");
}, function () {
$(".product-info").show();
$(this).parents(".radius").css("border-right-width", "8px");
});
// 工具類綁定事件 settings.toolBarHandler
chatEl.find(".tool-bar td").children().click(this.toolBarHandler);
chatEl.find("#send").click(function () {
var $chatMain = $(this).parents(".chat-main");
_opts.sendHandler($chatMain);
});
chatEl.find("#close").click(function () {
var $chatMain = $(this).parents(".chat-main");
$chatMain.hide(500);
});
// 首先取消事件綁定，當一次性發多條消息的情況下會同時綁定多個相同事件
$(".have-msg, .no-msg, .chat-main").unbind("click");
$(".have-msg").bind("click", function () {
$(this).hide();
$(".no-msg").show();
$(".chat-main:hidden").show(150);
});
$(".no-msg").click(function () {
$(".chat-main:hidden").each(function (i, item) {
var top = i * 10 + 50;
var left = i * 20 + 50;
$(this).show(500).css({top: top, left: left});
});
});
$(".chat-main").click(function () {
$(".chat-main").css("z-index", 9999);
$(this).css({"z-index": 10000});
});
$(this.sendMessageIFrame(userJID).document).keyup(function (event) {
var e = event || window.event;
var keyCode = e.which || e.keyCode;
if (keyCode == 13) {
var $chatMain = $("#" + $(this).find("body").attr("jid"));
_opts.sendHandler($chatMain);
}
});
},
// 建立新聊天窗口
newWebIM: function (settings) {
var chatUser = remote.userAddress(settings.receiver);
var userJID = "u" + hex_md5(chatUser);
_opts.initWebIM(userJID, chatUser);
$("#" + userJID).find(remote.receiver).val(chatUser);
$("#" + userJID).show(220);
},
// 遠程發送消息時執行函數
messageHandler: function (user, content) {
var userName = user.split("@")[0];
var tempUser = user;
if (~tempUser.indexOf("/")) {
tempUser = tempUser.substr(0, tempUser.indexOf("/"));
}
var userJID = "u" + hex_md5(tempUser);
// 首次初始webIM
if (!$("#" + userJID).get(0)) {
// 初始IM面板；
_opts.initWebIM(userJID, user);
}
// 設置消息接受者的名稱
$("#" + userJID).find(remote.receiver).val(user);
if ($("#" + userJID).get(0)) {
// 消息提示
if ($("div[id='" + userJID + "']:hidden").get(0)) {
var haveMessage = $(".have-msg");
haveMessage.show();
$(".no-msg").hide();
}
_opts.messageTip("閃聊有了新消息，請查收！");
// 向chat接收信息區域寫消息
remote.jsjac.chat.writeMessage(userJID, userName, content);
}
},
// 消息提示
messageTip: function () {
if (count % 2 == 0) {
window.focus();
document.title = "你來了新消息，請查收！";
} else {
document.title = "";
}
if (count > 4) {
document.title = "";
count = 0;
} else {
window.setTimeout(_opts.messageTip, 1000);
count ++;
}
}
};
// 初始化遠程聊天程序相關方法
var initRemoteIM = function (settings) {
// 初始化遠程消息
remote.jsjac.chat.init();
// 設置客戶端寫入信息方法
remote.jsjac.chat.writeReceiveMessage = settings.writeReceiveMessage;
// 注冊事件
$(window).bind({
unload: remote.jsjac.chat.unloadHandler,
error: remote.jsjac.chat.errorHandler,
beforeunload: remote.jsjac.chat.logout
});
}
$.extend({
WebIM: function (opts) {
opts = opts || {};
// 覆蓋默認配置
defaultOptions = $.extend(defaultOptions, defaultOptions, opts);
var settings = $.extend({}, defaultOptions, opts);
initRemoteIM(settings);
settings.newWebIM(settings);
$.WebIM.settings = settings;
}
});
$.WebIM.settings = $.WebIM.settings || _opts;
$.WebIM.initWebIM = _opts.initWebIM;
$.WebIM.newWebIM = _opts.newWebIM;
$.WebIM.messageHandler = _opts.messageHandler;
})(jQuery);
這裡的方法基本上是聊天窗口上的應用，主要是本地聊天程序的js、HTML元素的操作。如字體、字體大小、顏色、表情、消息的發送等，不涉及到聊天消息發送的核心代碼，其中有用到發送遠程消息的方法。
remote.jsjac.chat.sendMessage(text, receiver); 這個是發送遠程消息的方法，參數1是消息內容、參數2是消息的接收者
如果你有看到這篇文章http://www.cnblogs.com/hoojo/archive/2012/06/18/2553886.html 它是一個單純的WebIM本地的聊天界面。
3、遠程聊天JavaScript核心代碼，它是和jsjac庫關聯的。
remote.jsjac.chat-2.0.js
. 代碼如下:
/**
* IM chat jsjac remote message
* @author: hoojo
* @email: hoojo_@126.com
* @blog http://hoojo.cnblogs.com & http://blog.csdn.net/IBM_hoojo
* @createDate: 2012-5-24
* @version 2.0
* @requires jQuery v1.2.3 or later
* Copyright (c) 2012 M. hoo
**/
var remote = {
debug: "info, error",
chat: "body",
receiver: "#to", // 接受者jquery expression
console: {
errorEL: function () {
if ($(remote.chat).get(0)) {
return $(remote.chat).find("#error");
} else {
return $("body").find("#error");
}
},
infoEL: function () {
if ($(remote.chat).get(0)) {
return $(remote.chat).find("#info");
} else {
return $("body").find("#info");
}
},
// debug info
info: function (html) {
if (~remote.debug.indexOf("info")) {
remote.console.infoEL().append(html);
remote.console.infoEL().get(0).lastChild.scrollIntoView();
}
},
// debug error
error: function (html) {
if (~remote.debug.indexOf("error")) {
remote.console.errorEL().append(html);
}
},
// clear info/debug console
clear: function (s) {
if ("debug" == s) {
remote.console.errorEL().html("");
} else {
remote.console.infoEL().html("");
}
}
},
userAddress: function (user) {
if (user) {
if (!~user.indexOf("@")) {
user += "@" + remote.jsjac.domain;// + "/" + remote.jsjac.resource;
} else if (~user.indexOf("/")) {
user = user.substr(0, user.indexOf("/"));
}
}
return user;
},
jsjac: {
httpbase: window.contextPath + "/JHB/", //請求後台http-bind服務器url
domain: window["serverDomin"], //"192.168.5.231", // 192.168.5.231 當前有效域名
username: "",
pass: "",
timerval: 2000, // 設置請求超時
resource: "WebIM", // 鏈接資源標識
register: true // 是否注冊
}
};
remote.jsjac.chat = {
writeReceiveMessage: function () {
},
setState: function () {
var onlineStatus = new Object();
onlineStatus["available"] = "在線";
onlineStatus["chat"] = "歡迎聊天";
onlineStatus["away"] = "離開";
onlineStatus["xa"] = "不可用";
onlineStatus["dnd"] = "請勿打擾";
onlineStatus["invisible"] = "隱身";
onlineStatus["unavailable"] = "離線";
remote.jsjac.chat.state = onlineStatus;
return onlineStatus;
},
state: null,
init: function () {
// Debugger plugin
if (typeof (Debugger) == "function") {
remote.dbger = new Debugger(2, remote.jsjac.resource);
remote.dbger.start();
} else {
// if you're using firebug or safari, use this for debugging
// oDbg = new JSJaCConsoleLogger(2);
// comment in above and remove comments below if you don't need debugging
remote.dbger = function () {
};
remote.dbger.log = function () {
};
}
try {
// try to resume a session
if (JSJaCCookie.read("btype").getValue() == "binding") {
remote.connection = new JSJaCHttpBindingConnection({ "oDbg": remote.dbger});
rdbgerjac.chat.setupEvent(remote.connection);
if (remote.connection.resume()) {
remote.console.clear("debug");
}
}
} catch (e) {
remote.console.errorEL().html(e.name + ":" + e.message);
} // reading cookie failed - never mind
remote.jsjac.chat.setState();
},
login: function (loginForm) {
remote.console.clear("debug"); // reset
try {
// 鏈接參數
var connectionConfig = remote.jsjac;
// Debugger console
if (typeof (oDbg) != "undefined") {
connectionConfig.oDbg = oDbg;
}
var connection = new JSJaCHttpBindingConnection(connectionConfig);
remote.connection = connection;
// 安裝（注冊）Connection事件模型
remote.jsjac.chat.setupEvent(connection);
// setup args for connect method
if (loginForm) {
//connectionConfig = new Object();
//connectionConfig.domain = loginForm.domain.value;
connectionConfig.username = loginForm.userName.value;
connectionConfig.pass = loginForm.password.value;
connectionConfig.register = loginForm.register.checked;
}
// 連接服務器
connection.connect(connectionConfig);
//remote.jsjac.chat.changeStatus("available", "online", 1, "chat");
} catch (e) {
remote.console.errorEL().html(e.toString());
} finally {
return false;
}
},
// 改變用戶狀態
changeStatus: function (type, status, priority, show) {
type = type || "unavailable";
status = status || "online";
priority = priority || "1";
show = show || "chat";
var presence = new JSJaCPresence();
presence.setType(type); // unavailable invisible
if (remote.connection) {
//remote.connection.send(presence);
}
//presence = new JSJaCPresence();
presence.setStatus(status); // online
presence.setPriority(priority); // 1
presence.setShow(show); // chat
if (remote.connection) {
remote.connection.send(presence);
}
},
// 為Connection注冊事件
setupEvent: function (con) {
var remoteChat = remote.jsjac.chat;
con.registerHandler('message', remoteChat.handleMessage);
con.registerHandler('presence', remoteChat.handlePresence);
con.registerHandler('iq', remoteChat.handleIQ);
con.registerHandler('onconnect', remoteChat.handleConnected);
con.registerHandler('onerror', remoteChat.handleError);
con.registerHandler('status_changed', remoteChat.handleStatusChanged);
con.registerHandler('ondisconnect', remoteChat.handleDisconnected);
con.registerIQGet('query', NS_VERSION, remoteChat.handleIqVersion);
con.registerIQGet('query', NS_TIME, remoteChat.handleIqTime);
},
// 發送遠程消息
sendMessage: function (msg, to) {
try {
if (msg == "") {
return false;
}
var user = "";
if (to) {
if (!~to.indexOf("@")) {
user += "@" + remote.jsjac.domain;
to += "/" + remote.jsjac.resource;
} else if (~to.indexOf("/")) {
user = to.substr(0, to.indexOf("/"));
}
} else {
// 向chat接收信息區域寫消息
if (remote.jsjac.chat.writeReceiveMessage) {
var html = "你沒有指定發送者的名稱";
alert(html);
//remote.jsjac.chat.writeReceiveMessage(receiverId, "server", html, false);
}
return false;
}
var userJID = "u" + hex_md5(user);
$("#" + userJID).find(remote.receiver).val(to);
// 構建jsjac的message對象
var message = new JSJaCMessage();
message.setTo(new JSJaCJID(to));
message.setType("chat"); // 單獨聊天，默認為廣播模式
message.setBody(msg);
// 發送消息
remote.connection.send(message);
return false;
} catch (e) {
var html = "<div class='msg error''>Error: " + e.message + "</div>";
remote.console.info(html);
return false;
}
},
// 退出、斷開鏈接
logout: function () {
var presence = new JSJaCPresence();
presence.setType("unavailable");
if (remote.connection) {
remote.connection.send(presence);
remote.connection.disconnect();
}
},
errorHandler: function (event) {
var e = event || window.event;
remote.console.errorEL().html(e);
if (remote.connection && remote.connection.connected()) {
remote.connection.disconnect();
}
return false;
},
unloadHandler: function () {
var con = remote.connection;
if (typeof con != "undefined" && con && con.connected()) {
// save backend type
if (con._hold) { // must be binding
(new JSJaCCookie("btype", "binding")).write();
}
if (con.suspend) {
con.suspend();
}
}
},
writeMessage: function (userJID, userName, content) {
// 向chat接收信息區域寫消息
if (remote.jsjac.chat.writeReceiveMessage && !!content) {
remote.jsjac.chat.writeReceiveMessage(userJID, userName, content, false);
}
},
// 重新連接服務器
reconnection: function () {
remote.jsjac.register = false;
if (remote.connection.connected()) {
remote.connection.disconnect();
}
remote.jsjac.chat.login();
},
/* ########################### Handler Event ############################# */
handleIQ: function (aIQ) {
var html = "<div class='msg'>IN (raw): " + aIQ.xml().htmlEnc() + "</div>";
remote.console.info(html);
remote.connection.send(aIQ.errorReply(ERR_FEATURE_NOT_IMPLEMENTED));
},
handleMessage: function (aJSJaCPacket) {
var user = aJSJaCPacket.getFromJID().toString();
//var userName = user.split("@")[0];
//var userJID = "u" + hex_md5(user);
var content = aJSJaCPacket.getBody();
var html = "";
html += "<div class=\"msg\"><b>消息來自 " + user + ":</b><br/>";
html += content.htmlEnc() + "</div>";
remote.console.info(html);
$.WebIM.messageHandler(user, content);
},
handlePresence: function (aJSJaCPacket) {
var user = aJSJaCPacket.getFromJID();
var userName = user.toString().split("@")[0];
var html = "<div class=\"msg\">";
if (!aJSJaCPacket.getType() && !aJSJaCPacket.getShow()) {
html += "<b>" + userName + " 上線了.</b>";
} else {
html += "<b>" + userName + " 設置 presence 為： ";
if (aJSJaCPacket.getType()) {
html += aJSJaCPacket.getType() + ".</b>";
} else {
html += aJSJaCPacket.getShow() + ".</b>";
}
if (aJSJaCPacket.getStatus()) {
html += " (" + aJSJaCPacket.getStatus().htmlEnc() + ")";
}
}
html += "</div>";
remote.console.info(html);
// 向chat接收信息區域寫消息
remote.jsjac.chat.writeMessage("", userName, html);
},
handleError: function (event) {
var e = event || window.event;
var html = "An error occured:<br />"
+ ("Code: " + e.getAttribute("code")
+ "\nType: " + e.getAttribute("type")
+ "\nCondition: " + e.firstChild.nodeName).htmlEnc();
remote.error(html);
var content = "";
switch (e.getAttribute("code")) {
case "401":
content = "登陸驗證失敗！";
break;
// 當注冊發現重復，表明該用戶已經注冊，那麼直接進行登陸操作
case "409":
//content = "注冊失敗！\n\n請換一個用戶名！";
remote.jsjac.chat.reconnection();
break;
case "503":
content = "無法連接到IM服務器，請檢查相關配置！";
break;
case "500":
var contents = "服務器內部錯誤！\n\n連接斷開！<br/><a href='javascript: self.parent.remote.jsjac.chat.reconnection();'>重新連接</a>";
remote.jsjac.chat.writeMessage("", "系統", contents);
break;
default:
break;
}
if (content) {
alert("WeIM: " + content);
}
if (remote.connection.connected()) {
remote.connection.disconnect();
}
},
// 狀態變化觸發事件
handleStatusChanged: function (status) {
remote.console.info("<div>當前用戶狀態: " + status + "</div>");
remote.dbger.log("當前用戶狀態: " + status);
if (status == "disconnecting") {
var html = "<b style='color:red;'>你離線了！</b>";
// 向chat接收信息區域寫消息
remote.jsjac.chat.writeMessage("", "系統", html);
}
},
// 建立鏈接觸發事件方法
handleConnected: function () {
remote.console.clear("debug"); // reset
remote.connection.send(new JSJaCPresence());
},
// 斷開鏈接觸發事件方法
handleDisconnected: function () {
},
handleIqVersion: function (iq) {
remote.connection.send(iq.reply([
iq.buildNode("name", remote.jsjac.resource),
iq.buildNode("version", JSJaC.Version),
iq.buildNode("os", navigator.userAgent)
]));
return true;
},
handleIqTime: function (iq) {
var now = new Date();
remote.connection.send(iq.reply([
iq.buildNode("display", now.toLocaleString()),
iq.buildNode("utc", now.jabberDate()),
iq.buildNode("tz", now.toLocaleString().substring(now.toLocaleString().lastIndexOf(" ") + 1))
]));
return true;
}
};
這個文件的代碼就是用jsjac庫和openfire建立通信的核心代碼，代碼中已經有注釋，這裡我就不再贅述。如果有什麼不懂的可以給我留言。
4、消息區域、編輯器代碼 send.message.editor-1.0.js
. 代碼如下:
/**
* IM chat Send Message iframe editor
* @author: hoojo
* @email: hoojo_@126.com
* @blog: http://blog.csdn.net/IBM_hoojo
* @createDate: 2012-5-24
* @version 1.0
**/
var agent = window.navigator.userAgent.toLowerCase();
var sendMessageEditor = {
// 獲取iframe的window對象
getWin: function () {
return /*!/firefox/.test(agent)*/false ? sendMessageEditor.iframe.contentWindow : window.frames[sendMessageEditor.iframe.name];
},
//獲取iframe的document對象
getDoc: function () {
return !/firefox/.test(agent) ? sendMessageEditor.getWin().document : (sendMessageEditor.iframe.contentDocument || sendMessageEditor.getWin().document);
},
init: function (userJID) {
//打開document對象，向其寫入初始化內容，以兼容FireFox
var doc = sendMessageEditor.getDoc();
doc.open();
var html = [
'<html>',
'<head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;background-color:white;font-size:12px;font-family:Courier,serif,monospace;}</style></head>',
'<body jid="', userJID, '"></body>',
'</html>'].join("");
doc.write(html);
//打開document對象編輯模式
doc.designMode = "on";
doc.close();
},
getContent: function () {
var doc = sendMessageEditor.getDoc();
//獲取編輯器的body對象
var body = doc.body || doc.documentElement;
//獲取編輯器的內容
var content = body.innerHTML;
//對內容進行處理，例如替換其中的某些特殊字符等等
//Some code
//返回內容
return content;
},
//統一的執行命令方法
execCmd: function (cmd, value, d){
var doc = d || sendMessageEditor.getDoc();
//doc對象的獲取參照上面的代碼
//調用execCommand方法執行命令
doc.execCommand(cmd, false, value === undefined ? null : value);
},
getStyleState: function (cmd) {
var doc = sendMessageEditor.getDoc();
//doc對象的獲取參考上面的對面
//光標處是否是粗體
var state = doc.queryCommandState(cmd);
if(state){
//改變按鈕的樣式
}
return state;
},
insertAtCursor: function (text, d, w){
var doc = d || sendMessageEditor.getDoc();
var win = w || sendMessageEditor.getWin();
//win對象的獲取參考上面的代碼
if (/msie/.test(agent)) {
win.focus();
var r = doc.selection.createRange();
if (r) {
r.collapse(true);
r.pasteHTML(text);
}
} else if (/gecko/.test(agent) || /opera/.test(agent)) {
win.focus();
sendMessageEditor.execCmd('InsertHTML', text, doc);
} else if (/safari/.test(agent)) {
sendMessageEditor.execCmd('InsertText', text, doc);
}
}
};
5、css樣式 chat-2.0.css
. 代碼如下:
/**
* function: im web chat css
* author: hoojo
* createDate: 2012-5-26 上午11:42:10
*/
@CHARSET "UTF-8";
*, body {
font-family: Courier,serif,monospace;
font-size: 12px;
padding: 0;
margin: 0;
}
.chat-main {
position: absolute;
/*right: 80px;*/
left: 50px;
top: 20px;
z-index: 999;
display: none;
}
.chat-main .radius {
background-color: white;
border: 8px solid #94CADF;
border-radius: 1em;
}
#chat {
position: relative;
/*left: 150px;*/
padding: 0;
margin: 0;
}
#chat table {
border-collapse: collapse;
width: 435px;
*width: 460px;
/*width: 410px;*/
/*width: 320px;*/
}
#chat table .title {
font-weight: bold;
color: green;
padding: 3px;
background-color: #94CADF;
}
/* 收縮條 */
#chat table .split {
background-color: #94CADF;
cursor: pointer;
}
/* ################## product info #################### */
#chat table .product-info {
width: 30%;
/*display: none;*/
padding: 0;
margin: 0;
vertical-align: top;
}
#chat table .product-info ul {
margin: 0;
padding: 0;
}
#chat table .product-info ul div.header {
background-color: #EBEFFE;
line-height: 22px;
font-size: 12px;
color: black;
}
#chat table .product-info ul li {
list-style: none outside none;
background-color: white;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-left: 5px;
line-height: 22px;
font-size: 11px;
color: #6F6F6F;
width: 140px;
}
#chat table .product-info ul li.pic {
height: 200px;
padding: 0 5px 0 5px;
border: 1px dashed #ccc;
text-align: center;
}
#chat table .product-info ul li.pic img {
}
#chat table .product-info ul li.product-name {
font-weight: bold;
color: black;
}
#chat table .product-info ul li.price span {
font-family: Courier;
font-size: 16px;
font-weight: bold;
color: #ED4E08;
}
#chat table .product-info ul li.market-price s {
color: black;
}
#chat table .product-info ul li a {
float: right;
}
#chat table .product-info ul li.info {
display: none;
}
/*########### 接收消息區域 ############ */
#chat table .receive-message {
height: 250px;
}
#chat table .send-message {
width: 100%;
/*height: auto;*/
}
#chat table td {
/*border: 1px solid white;*/
}
#chat table .bottom-bar {
background-color: #94CADF;
text-align: right;
}
/* ############## 工具條 ################# start */
#chat table .tool-bar {
height: 25px;
background-color: #94CADF;
}
#chat table .tool-bar select {
float: left;
}
#chat table .tool-bar select.family {
width: 45px;
*width: 55px;
}
#chat table .tool-bar div {
width: 17px;
height: 16px;
float: left;
cursor: pointer;
margin-right: 2px;
margin-top: 1px;
*margin-top: 2px;
background: transparent url("../images/tb-sprite.gif") no-repeat scroll 0 0;
}
#chat table .tool-bar .color {
margin-left: 2px;
background-position: -159px 0;
}
#chat table .tool-bar .bold {
/*background-position: 0 0;*/
}
#chat table .tool-bar .italic {
background-position: -18px 0;
}
#chat table .tool-bar .underline {
background-position: -32px 0;
}
#chat table .tool-bar .face {
margin: 2px 0 0 3px;
background-image: url("../images/facehappy.gif");
}
#chat table .tool-bar .history {
background-image: none;
width: 60px;
float: right;
margin-top: 3px;
font-size: 12px;
display: none;
}
/* ###### 表情 ###### */
#chat #face {
border: 1px solid black;
width: 275px;
*width: 277px;
position: relative;
left: 8px;
top: -370px;
_top: -359px;
z-index: 3;
display: none;
}
#chat #face img {
border: 1px solid #ccc;
border-right: none;
border-bottom: none;
cursor: pointer;
}
#send {
width: 90px;
height: 25px;
}
#close {
width: 40px;
height: 25px;
}
.chat-message {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25px;
background-color: #fcfcfc;
}
.no-msg, .have-msg {
cursor: pointer;
float: right;
margin: 5px 5px 0 0;
}
6、web.xml配置
. 代碼如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>Jabber HTTP Binding Servlet</servlet-name>
<servlet-class>org.jabber.JabberHTTPBind.JHBServlet</servlet-class>
<!--
<init-param>
<param-name>debug</param-name>
<param-value>1</param-value>
</init-param>
-->
</servlet>
<servlet-mapping>
<servlet-name>Jabber HTTP Binding Servlet</servlet-name>
<url-pattern>/JHB/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
至此，這個應用的全部代碼已經貼出來，如果你按照我這邊的結構形式應該是可以完成這個聊天應用的。如果你有什麼問題或想法，歡迎你給我留言或評論！