JavaScript/jQuery, HTML, CSS to build Web IM remote instant chat communication program

以及需要用到Http方式和Openfire通信的第三方库（JabberHTTPBind）。

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按钮创建新会话

If you receive a new message, there will be a new message prompt in the browser's title bar

If the windows of your current chat interface are closed, there will be a flashing icon with a message prompt in the lower right corner

All the source codes have been posted here, if you really need the source code (but I hope you can create a project yourself to copy the source code, this is what I want to see), then you can contact me through the following methods
Email: hoojo_@126.com
Blog: http: //blog.csdn.net/IBM_hoojo
http://hoojo.cnblogs.com/
http://hoojo.blogjava.net
Note: I will not promise to give you the code in the first time , but I will send you the source code in my free time

Development environment
System: Windows
JavaEE Server: Tomcat 5.0.28 /Tomcat 6
WebBrowser: IE6, Firefox3.5, Chrome is already compatible with browsers
JavaSDK: JDK 1.6
Openfire 3.7.1
IDE: eclipse 3.2, MyEclipse 6.5

Develop dependent libraries

jdk1.4

serializer.jar
xalan.jar
jhb-1.0.jar

log4j-1.2.16.jar

jhb-1.0.jar This is JabberHTTPBind, I put the compiled class into a jar package

JavaScript lib

jquery.easydrag.js window drag JavaScript lib
jquery-1.7.1.min.js jquery lib
jsjac.js communication core Library
local.chat-2.0.js Local session window send message JavaScript library
remote.jsjac.chat-2.0.js Remote session message JavaScript library
send.message.editor-1.0.js Window Editor JavaScript library

1. Preparation
jsjac JavaScript lib download: https://github.com/sstrigler/JSJaC/
If you don’t If you like to use jsjac JavaScript lib to communicate with Openfire, then there is a jQuery plugin for you to use. Download address
jQuery-XMPP-plugin https://github.com/maxpowel/jQuery-XMPP-plugin
Here are all third-party libraries that can support Openfire communication. If you are interested, you can study it http://xmpp.org/xmpp-software/libraries/
jquery.easydrag Download: http://fromvega.com/code/easydrag/jquery.easydrag.js
jquery download: http://code.jquery.com/jquery-1.7.1.min. js
JabberHTTPBind jhb.jar Download: http://download.csdn.net/detail/ibm_hoojo/4489188
images Picture material: http://download. csdn.net/detail/ibm_hoojo/4489439

Project directory structure

2. Core code demonstration
1. Main interface (login, message prompt, log, create new chat window) code index.jsp

Copy code The code is as follows:

<%@ page language="java" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>

WebIM Chat

下面这段代码尤为重要，它是设置你链接openfire的地址。这个地址一段错误你将无法进行通信！

复制代码代码如下:

$.WebIM method is the main function, which can override the basic configuration in local.chat and complete the creation of the chat window. The $.WebIM.newWebIM method creates a new window, but the recipient of the message is a new user.

Copy code The code is as follows:

 
$.WebIM({ 
sender: userName, 
receiver: receiver 
}); 
$.WebIM.newWebIM({ 
receiver: receiver 
}); 

remote.jsjac. chat.login(document.userForm); The method is for the user to log in to the Openfire server
The parameters are as follows:
httpbase: window.contextPath "/JHB/", //Request the background http-bind server url
domain: window["serverDomin"], //"192.168.5.231", // 192.168.5.231 Current valid domain name
username: "", // Login username
pass: "", // Password
timerval: 2000, // Set request timeout
resource: "WebIM", // Link resource identification
register: true // Whether to register

remote.jsjac.chat.logout(); Yes Exit and disconnect from openfire

2. Local chat application core code local.chat-2.0.js

Copy code The code is as follows:

/***
* 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: [
'',
'',
'',
''
].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;
},
/***
* Format template for sending messages
* flag = true means the current user is yourself, otherwise it is the other party
**/
receiveMessageTpl: function (userName, styleTpl, content, flag) {
var userCls = flag ? "me" : "you";
if (styleTpl && flag) {
content = [ "", content, "" ].join("");
}
return [
'

', _opts.getDatetime(), ' ', userName, ':

',
'

', content, '

'
].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;
}
},
// Write messages to the receive message iframe area
writeReceiveMessage: function (receiverId, userName, content, flag) {
if (content) {
// Style of sending messages
var styleTpl = _opts.sendMessageStyle.getStyleTpl();
var receiveMessageDoc = _opts.receiveMessageDoc(receiverId);
$.each(receiveMessageDoc, function () {
var $body = this.find("body" );
//Write the sent data to the receive message area
$body.append(_opts.receiveMessageTpl(userName, styleTpl, content, flag));
//Scroll the scroll bar to the bottom
this.scrollTop(this.height());
});
}
},
// Send message
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("
", "gm"), "");
// Get the content to be sent
if (content) {
var sender = $chatMain.attr("sender");
var receiverId = $chatMain.attr("id");
//Write message in the receiving area
_opts.writeReceiveMessage(receiverId, sender, content, true);
//############ XXX
var receiver = $chatMain.find("#to").val();
// var receiver = $chatMain.attr("receiver");
// Determine whether it is a mobile session, if so, send plain text, otherwise send html code
var flag = _opts.isMobileClient(receiver);
if (flag) {
var text = $(doc.body).text();
text = $.trim(text);
if (text) {
// Send messages remotely
remote.jsjac.chat.sendMessage(text, receiver);
}
} else { // Non-mobile communication can send html code
var styleTpl = _opts.sendMessageStyle.getStyleTpl ();
content = [ "", content, "" ].join("");
remote.jsjac. chat.sendMessage(content, receiver);
}
// Clear the sending area
$(doc).find("body").html("");
}
} ,
faceImagePath: "images/emotions/",
faceElTpl: function (i) {
return [
"

"
] .join("");
},
// Create expression 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("
}
}
$chat.find("#face").html(faces.join(""));
this.faceHandler($chat);
},
// Insert emoticon
faceHandler: function ($chat) {
$chat.find("#face img").click(function () {
$chat.find( "#face").hide(150);
var imgEL = "

";
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);
});
// Emoticon hiding
$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);
});
},
/***
* Send message toolbar button event method
** /
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());
}
}
// Set the style css of sendMessage iframe
_opts.writeSendStyle();
},
// Set the style of sendMessage iframe style css
writeSendStyle: function () {
var styleTpl = _opts.sendMessageStyle.getStyleTpl();
var styleEL = [''].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 [
'

',
'

',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'


', '', '		', ' ', ' 商品详情 ', ' ', ' ', ' ', product.name, ' ', ' 团购价：', product.price, '元 ', ' 市场价：~~', product.marketPrice, '~~元 ', ' 快递公司：', product.deliverOrgs, ' ', ' 仓库：', product.wareHouses, ' ', product.skuAttrs, ' ', '
', '', '', '', ' ', ' ', ' ', ' ', ' 消息记录 ', '
', '', '
', '

',
'

'
].join("");
},
initWebIM: function (userJID, receiver) {
var product = {
name: "Little Play Bear",
pic: "http://avatar.csdn.net/9/7/A/2_ibm_hoojo.jpg",
price: "198.00",
marketPrice: "899.90",
deliverOrgs: "EMS ",
wareHouses: "Library A",
skuAttrs: ""
};
var chatEl = $(_opts.chatLayoutTemplate(userJID, _opts.sender, receiver, product));
$("body").append(chatEl);
// Drag
$("#" userJID).easydrag();
// Initialize sendMessageEditor related information
sendMessageEditor.iframe = this.sendMessageIFrame(userJID);
sendMessageEditor.init(userJID);
_opts.setTitle(chatEl);
_opts.writeReceiveStyle(userJID);
_opts.writeSendStyle();
_opts.createFaceElement(chatEl);
// View more details
chatEl.find(".more").click(function () {
var $ul = $(this).parents(" ul");
$ul.find(".more").toggle();
$ul.find(".info").toggle();
$ul.find(". pic").toggle();
});
// Shrink details
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");
}) ;
// Tool class binding event 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) ;
});
// First cancel the event binding. When multiple messages are sent at once, multiple identical events will be bound at the same time
$(".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);
}
});
},
// Create a new chat window
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);
},
// Executed when sending a message remotely Function
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);
// First time Initial webIM
if (!$("#" userJID).get(0)) {
//Initial IM panel;
_opts.initWebIM(userJID, user);
}
// Set the name of the message recipient
$("#" userJID).find(remote.receiver).val(user);
if ($("#" userJID).get(0)) {
// Message prompt
if ($("div[id='" userJID "']:hidden").get(0)) {
var haveMessage = $(".have-msg" );
haveMessage.show();
$(".no-msg").hide();
}
_opts.messageTip("There is a new message in the flash chat, please check it! ");
// Write a message to the chat receiving information area
remote.jsjac.chat.writeMessage(userJID, userName, content);
}
},
// Message prompt
messageTip: function () {
if (count % 2 == 0) {
window.focus();
document.title = "You have a new message, please check it!";
} else {
document.title = "";
}
if (count > 4) {
document.title = "";
count = 0;
} else {
window.setTimeout(_opts.messageTip, 1000);
count ;
}
}
};
// Initialize remote chat program related methods
var initRemoteIM = function (settings) {
//Initialize remote message
remote.jsjac.chat.init();
//Set the client to write information method
remote.jsjac. chat.writeReceiveMessage = settings.writeReceiveMessage;
// Register event
$(window).bind({
unload: remote.jsjac.chat.unloadHandler,
error: remote.jsjac.chat. errorHandler,
beforeunload: remote.jsjac.chat.logout
});
}
$.extend({
WebIM: function (opts) {
opts = opts || {};
// Override the default configuration
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);

The method here is basically an application on the chat window, mainly the operation of js and HTML elements of the local chat program. Such as fonts, font sizes, colors, expressions, message sending, etc., do not involve the core code of sending chat messages, and there are methods of sending remote messages.
remote.jsjac.chat.sendMessage(text, receiver); This is a method for sending remote messages. Parameter 1 is the message content and parameter 2 is the receiver of the message.
If you have seen this articlehttp://www.cnblogs.com/hoojo/archive/2012/06/18/2553886.html It is a simple WebIM local chat interface.

3. Remote chat JavaScript core code, which is associated with the jsjac library.
remote.jsjac.chat-2.0.js

Copy code The code is as follows:

/**
* 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 = "

Error: " + e.message + "

";
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 = "

IN (raw): " + aIQ.xml().htmlEnc() + "

";
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 += "

消息来自 " + user + ":
";
html += content.htmlEnc() + "

";
remote.console.info(html);
$.WebIM.messageHandler(user, content);
},
handlePresence: function (aJSJaCPacket) {
var user = aJSJaCPacket.getFromJID();
var userName = user.toString().split("@")[0];
var html = "

";
if (!aJSJaCPacket.getType() && !aJSJaCPacket.getShow()) {
html += "" + userName + " 上线了.";
} else {
html += "" + userName + " 设置 presence 为： ";
if (aJSJaCPacket.getType()) {
html += aJSJaCPacket.getType() + ".";
} else {
html += aJSJaCPacket.getShow() + ".";
}
if (aJSJaCPacket.getStatus()) {
html += " (" + aJSJaCPacket.getStatus().htmlEnc() + ")";
}
}
html += "

";
remote.console.info(html);
// Write a message to the chat receiving information area
remote.jsjac.chat.writeMessage("", userName, html);
} ,
handleError: function (event) {
var e = event || window.event;
var html = "An error occured:
"
("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 = "Login verification failed! ";
break;
// When duplicate registration is found, it means that the user has already registered, then log in directly
case "409":
//content = "Registration failed! nPlease change your username! ";
remote.jsjac.chat.reconnection();
break;
case "503":
content = "Unable to connect to the IM server, please check the relevant configuration! ";
break;
case "500":
var contents = "Server internal error! nnThe connection is disconnected!
Reconnect";
remote.jsjac.chat.writeMessage ("", "System", contents);
break;
default:
break;
}
if (content) {
alert("WeIM: " content);
}
if (remote.connection.connected()) {
remote.connection.disconnect();
}
},
// Status change trigger event
handleStatusChanged: function (status) {
remote.console.info("

Current user status: " status "

");
remote.dbger.log("Current user status: " " status);
if (status == "disconnecting") {
var html = "You are offline! ";
// Write a message to the chat receiving information area
remote.jsjac.chat.writeMessage("", "System", html);
}
},
// Link establishment trigger event method
handleConnected: function () {
remote.console.clear("debug"); // reset
remote.connection.send(new JSJaCPresence());
},
// Disconnected link trigger event method
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;
}
};

The code of this file is the core code for establishing communication between the jsjac library and openfire. There are already comments in the code, so I won’t go into details here. If you don’t understand anything, please leave me a message.
4 , message area, editor code send.message.editor-1.0.js

Copy code The code is as follows:

 
/**
* 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 = { 
// Get the window object of the iframe 
 getWin: function () { 
return /*!/firefox/.test(agent)*/false ? sendMessageEditor.iframe.contentWindow : window.frames[sendMessageEditor.iframe.name]; 
}, 
 //Get the document object of iframe 
getDoc: function () { 
return !/firefox/.test(agent) ? sendMessageEditor.getWin().document : (sendMessageEditor.iframe.contentDocument || sendMessageEditor.getWin( ).document); 
}, 
init: function (userJID) { 
//Open the document object and write initialization content to it to be compatible with FireFox 
var doc = sendMessageEditor.getDoc() ; 
doc.open(); 
var html = [ 
'', 
'< /head>', 
'', 
''].join(""); 
doc.write(html); 
//Open document object editing mode 
doc.designMode = "on"; 
doc.close(); 
}, 
getContent: function ( ) { 
var doc = sendMessageEditor.getDoc(); 
//Get the editor’s body object 
var body = doc.body || doc.documentElement; 
//Get the editor’s content 
var content = body.innerHTML; 
//Process the content, such as replacing some special characters, etc.
//Some code 
//Return content
return content; 
}, 
//Uniform execution command method 
execCmd: function (cmd, value, d){ 
var doc = d || sendMessageEditor.getDoc(); 
//doc To obtain the object, refer to the code above 
 // Call the execCommand method to execute the command 
doc.execCommand(cmd, false, value === undefined ? null : value); 
}, 
getStyleState: function (cmd) { 
var doc = sendMessageEditor.getDoc(); 
//To obtain the doc object, refer to the opposite side above 
//Whether the cursor is in bold 
var state = doc.queryCommandState( cmd); 
if(state){ 
//Change button style
} 
return state; 
}, 
insertAtCursor: function (text, d, w){ 
var doc = d || sendMessageEditor.getDoc(); 
var win = w || sendMessageEditor.getWin(); 
//To obtain the win object, refer to the above code
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 style chat-2.0.css

Copy code The code is as follows:

 
/**
* 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配置

复制代码代码如下:

 
 
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"> 
<서블릿> 
Jabber HTTP 바인딩 서블릿 
org.jabber.JabberHTTPBind.JHBServlet 
 
 
<서블릿 매핑> 
Jabber HTTP 바인딩 서블릿 
/JHB/ 
 
<환영 파일 목록> 
index.jsp 
 
 