Web IM リモートインスタントチャット通信を構築するための JavaScript/jQuery、HTML、CSS 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按钮创建新会话

新しいメッセージを受信すると、ブラウザのタイトルバーに新しいメッセージプロンプト

が表示されます。

現在のチャットインターフェースのウィンドウが閉じている場合は、右下隅にメッセージプロンプトを含む点滅するアイコンが表示されます

本当にソースが必要な場合は、すべてのソースコードがここに掲載されています。コードを作成したら (ただし、ソースコードをコピーするプロジェクトを自分で作成できることを願っています。これが私が見たいことです)、次の方法で私に連絡してください。
メール: hoojo_@126.com
ブログ: http://blog.csdn.net/IBM_hoojo
http://hoojo.cnblogs.com/
http://hoojo.blogjava.net
注: コードを提供すると約束するものではありません初めてですが、暇なときにソースコードをお送りします

開発環境
システム: Windows
JavaEE サーバー: 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 です。コンパイルされたクラスを jar パッケージに入れます

JavaScript ライブラリ

jquery.easydrag.js ウィンドウドラッグ JavaScript ライブラリ
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 ライブラリ

1. 準備
jsjac JavaScript lib ダウンロード: https://github.com/sstrigler/JSJaC/
Openfire と通信するために jsjac JavaScript lib を使用したい場合は、使用できる jQuery プラグインがあります。ダウンロードアドレス
jQuery-XMPP-plugin https://github.com/maxpowel/jQuery-XMPP-プラグイン
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
画像素材: http://ダウンロード.csdn.net/detail/ibm_hoojo/4489439

プロジェクトのディレクトリ構造

2. コアコードのデモ
1. メインインターフェイス (ログイン、メッセージプロンプト、ログ、新しいチャットウィンドウの作成) コードindex.jsp

コードをコピーコードは次のとおりです:

<%@ page language="java" pageEncoding="UTF-8" %>
文字列パス = request.getContextPath();
StringbasePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() パス "/";
%>

<頭>

WebIM チャット

<フォーム名="userForm" style="背景色: #fcfcfc; 幅: 100%;">
ユーザー名：
パスワード：
登録:
sendTo：

ユーザー：
sendTo：

この段階のコードは重要であり、オープンファイアを送信するためのアドレスを設定するものです。この段階の暗号化は通信を許可しません。复制代码

代码如下:

$.WebIM メソッドはメイン関数であり、local.chat の基本設定をオーバーライドしてチャットウィンドウの作成を完了できます。 $.WebIM.newWebIM メソッドは新しいウィンドウを作成しますが、メッセージの受信者は新しいユーザーです。

コードをコピーコードは次のとおりです。

 
$.WebIM({ 
sender : userName, 
受信者: 受信者 
}); 
$.WebIM.newWebIM({ 
受信者: 受信者 
}); .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: "", // Password
timerval: 2000, // リクエストタイムアウトを設定
resource: "WebIM", // リンクリソース識別
register: true // 登録するかどうか

remote.jsjac.chat.logout(); はい openfire を終了して切断します

2. ローカルチャットアプリケーションのコアコード

コードをコピー

コードは次のとおりです:

/***
* jquery ローカルチャット
* @version v2.0
* @createDate -- 2012-5-28
* @author hoojo
* @email hoojo_@126.com
* @blog http://hoojo.cnblogs.com & http://blog.csdn.net/IBM_hoojo
* @jQuery v1.2.3 以降、send.message.editor-1.0.js が必要
* 著作権 (c) 2012 M.hoo
**/
;(function ($) {
if (/1.(0|1|2).(0|1|2)/.test ($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
alert('WebIM には jQuery v1.2.3 以降が必要です! v を使用しています' $.fn.jquery) ;
return;
}
var faceTimed, count = 0;
var _opts =defaultOptions = {
バージョン: 2.0,
チャット: "#chat",
chatEl : function () {
var $chat = _opts.chat;
if ((typeof _opts.chat) == "文字列") {
$chat = $(_opts.chat); } else if ((typeof _opts.chat) == "オブジェクト") {
if (!$chat.get(0)) {
$chat = $($chat)>} }
return $chat;
},
sendMessageIFrame: function (receiverId) {
return $("iframe[name='sendMessage" recruitId "']").get(0). contentWindow;
},
receiveMessageDoc: function (receiverId) {
receiverId = 受信者 ID ||
var docs = []($("iframe[名前] ^='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 recruiter = this.getReceiver(chatEl) );
chatEl.find(".title").html("和" レシーバー "聊天对话中");
},
getReceiver: function (chatEl) {
var レシーバー = chatEl.attr("receiver");
if (~receiver.indexOf("@")) {
receiver =receiver.split("@")[0];
}
受信機を返します。
},
// 受信メッセージ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.getFull Year() "-" date.getMonth() "-" date.getDate();
datetime = " " _opts.datetimeFormat(date.getHours())
":" _opts.datetimeFormat(date.getMinutes())
":" _opts.datetimeFormat(date.getSeconds());
日時を返します。
},
/***
* メッセージ送信用のフォーマットテンプレート
* flag = true は現在のユーザーが自分であることを意味し、それ以外の場合は相手
**/
receiveMessageTpl: function (userName, styleTpl, content, flag) {
var userCls = flag ? 「私」：「あなた」。
if (styleTpl && flag) {
content = [ "", content, "" ]。参加する（""）;
}
return [
'

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

',
'

'、コンテンツ、'

'
].join("");
},
// ツール类按钮触発イベント返回htmlモジュール
sendMessageStyle: {
cssStyle: {
太字: "font-weight: 太字;",
アンダーライン: " text-decoration: 下線;"、
斜体: "font-style: oblique;"
},
setStyle: function (style, val) {
if (val) {
_opts.sendMessageStyle[style] = val;
} else {
var styleVal = _opts.sendMessageStyle[style];
if (styleVal === 未定義 || !styleVal) {
_opts.sendMessageStyle[style] = true;
} else {
_opts.sendMessageStyle[スタイル] = 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 ";";
}
});
tpl を返します。
}
},
// 受信メッセージ iframe 領域にメッセージを書き込みます
writeReceiveMessage: function (receiverId, userName, content, flag) {
if (content) {
// メッセージ送信スタイル
var styleTpl = _opts.sendMessageStyle.getStyleTpl();
var acceptMessageDoc = _opts.receiveMessageDoc(receiverId);
$.each(receiveMessageDoc, function () {
var $body = this.find("body " );
//送信データを受信メッセージ領域に書き込みます
$body.append(_opts.receiveMessageTpl(userName, styleTpl, content, flag));
//スクロールバーをbottom
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("
", "gm"), "");
// 送信するコンテンツを取得します
if (content ) {
var sender = $chatMain.attr("sender");
var restartId = $chatMain.attr("id");
//受信領域にメッセージを書き込みます
_opts。 writeReceiveMessage(receiverId, sender, content, true);
//############ XXX
var register = $chatMain.find("#to").val();
// var restart = $chatMain.attr("receiver");
// モバイルセッションであるかどうかを判断し、モバイルセッションである場合はプレーンテキストを送信し、それ以外の場合は HTML コードを送信します
var flag = _opts。 isMobileClient(受信者);
if (フラグ) {
var text = $(doc.body).text();
if (text);
// メッセージをリモートで送信する
remote.jsjac.chat.sendMessage(text,Receiver);
}
} else { // モバイル以外の通信では HTML コードを送信できます
var styleTpl = _opts.sendMessageStyle.getStyleTpl ();
content = [ "", content, ""
remote.jsjac.chat.sendMessage(content,receiver);
}
// 送信領域をクリア
$(doc).find("body").html(""); >}
} ,
faceImagePath: "images/emotions/",
faceElTpl: function (i) {
return [
"

] .join("");
},
// 式 HTML 要素を作成
createFaceElement: function ($chat) {
varfaces = [];
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);
},
// 絵文字を挿入
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)
}); , #face img") .mouseover(function () {
window.clearTimeout(faceTimed);
}).mouseout(function () {
window.clearTimeout(faceTimed);
faceTimed = window.setTimeout(function ( ) {
$chat.find("#face").hide(150);
},
}); ***
* メッセージ送信ツールバーボタンイベントメソッド
** /
toolBarHandler: function () {
var $chat = $(this).parents(".chat-main");
var targetCls = $(this).attr ("クラス");
if (targetCls == "face") {
$chat.find("#face").show(150); >faceTimed = window.setTimeout (function () {
$chat.find("#face").hide(150);
},
} else if (this.tagName == "DIV") {
_opts.sendMessageStyle.setStyle(targetCls);
} else if (this.tagName == "SELECT") {
_opts.sendMessageStyle.setStyle($(this).attr( "名前"), $(this).val());
if ($(this).attr("名前") == "色") {
$(this).css("背景-color", $( this).val());
}
}
// sendMessage iframe のスタイル CSS を設定します
_opts.writeSendStyle();
},
// 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 (受信機) {
var moblieClients = ["iphone", "ipad", "ipod", "wp7", "android", 「blackberry」、「Spark」、「warning」、「symbian」];
var flag = false;
for (var i in moblieClients) {
if (~receiver.indexOf(moblieClients[i]) )) {
true を返す;
}
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, 受信者) {
var product = {
name: "リトルプレイベア",
画像: "http://avatar.csdn.net/9/7/A/2_ibm_hoojo.jpg"、
価格: "198.00"、
市場価格: "899.90"、
deliverOrgs: "EMS ",
wareHouses: "ライブラリ A",
skuAttrs: ""
};
var chatEl = $(_opts.chatLayoutTemplate(userJID, _opts.sender, 受信者, 製品));
$("body").append(chatEl);
// Drag
$("#" userJID).easydrag();
// sendMessageEditor 関連情報を初期化します
sendMessageEditor.iframe = this.sendMessageIFrame(userJID);
sendMessageEditor.setTitle(chatEl);
_opts.writeSendStyle(); .createFaceElement(chatEl);
// 詳細を表示
chatEl.find(".more").click(function () {
var $ul = $(this).parents(" ul" );
$ul.find(".more").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);
}); .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({上: 上, 左: 左})
}); .chat-main").click(function () {
$(".chat-main").css("z-index", 9999);
$(this).css( {"z -index": 10000});
});
$(this.sendMessageIFrame(userJID).document).keyup(function (event) {
var e = events || window.event;
var keyCode = e.that || e.keyCode;
if (keyCode == 13) {
var $chatMain = $("#" $(this).find("body" ).attr ("jid"));
_opts.sendHandler($chatMain);
}
// 新しいチャットウィンドウを作成します
newWebIM: function (設定) {
var chatUser = リモート.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("フラッシュチャットに新しいメッセージがあります、ぜひチェックしてみてください！ ");
// チャット受信情報領域にメッセージを書き込む
remote.jsjac.chat.writeMessage(userJID, userName, content);
}
},
// メッセージprompt
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); (設定);
$.WebIM.settings = 設定;
$.WebIM.settings | | _opts>$.WebIM.initWebIM = _opts.initWebIM;
$.WebIM.messageHandler = _opts.messageHandler; ;

ここでの方法は基本的にチャットウィンドウ上のアプリケーションであり、主にローカルチャットプログラムのjsとHTML要素の操作です。フォント、フォントサイズ、色、表現、メッセージ送信などは、チャットメッセージ送信のコアコードには関与せず、リモートメッセージを送信する方法もあります。
remote.jsjac.chat.sendMessage(text, レシーバ); これは、パラメータ 1 がメッセージの内容、パラメータ 2 がメッセージの受信者です。
http://www.cnblogs.com/hoojo/archive/2012/06/18/2553886.html
これは、シンプルな WebIM ローカルチャットインターフェイスです。

3. jsjac ライブラリに関連付けられたリモートチャット JavaScript コアコード。
remote.jsjac.chat-2.0.js

コードをコピー
コードは次のとおりです:

/**
* IM チャット jsjac リモートメッセージ
* @author: hoojo
* @email: hoojo_@126.com
* @blog http://hoojo.cnblogs.com & http://blog .csdn.net/IBM_hoojo
* @createDate: 2012-5-24
* @version 2.0
* @jQuery v1.2.3 以降が必要
* Copyright (c) 2012 M. hoo
**/
var リモート = {
デバッグ: "情報、エラー"、
チャット: "本文"、
受信者: "#to" , // 受信者jquery式
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(" ＃情報"）;
} else {
return $("body").find("#info");
}
},
// デバッグ情報
info: function (html) {
if (~remote.debug.indexOf("info")) {
remote.console .infoEL().append(html);
remote.console.infoEL().get(0).lastChild.scrollIntoView();
}
},
// デバッグエラー
error: function (html) {
if (~remote.debug.indexOf("error")) {
remote.console .errorEL().append(html);
}
},
// 情報/デバッグコンソールをクリア
clear: function (s) {
if ("debug" == s) {
remote.console.errorEL ().html("");
} else {
remote.console.infoEL().html("");
}
}
},
userAddress: function (user) {
if (user) {
if (!~user.indexOf("@")) {
user = "@" リモート.jsjac.domain;// "/" リモート.jsjac.resource;
} else if (~user.indexOf("/")) {
user = user.substr(0, user.indexOf("/"));
}
}
ユーザーを返します。
},
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["利用不可"] = "离線";
remote.jsjac.chat.state = onlineStatus;
オンラインステータスを返します;
},
state: null,
init: function () {
// デバッガープラグイン
if (typeof (Debugger) == "function") {
remote.dbger = 新しいデバッガー(2,remote.jsjac.resource);
remote.dbger.start();
} else {
// firebug または safari を使用している場合は、これをデバッグに使用します
// oDbg = new JSJaCConsoleLogger(2);
// デバッグが必要ない場合は、上にコメントし、下のコメントを削除します。
remote.dbger = function () {
};
remote.dbger.log = function () {
};
}
try {
// セッションの再開を試みます
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);
} // Cookie の読み取りに失敗しました - 気にしないでください
remote.jsjac.chat.setState();
},
login: function (loginForm) {
remote.console.clear("debug"); // リセット
try {
// 链接パラメータ
var connectionConfig = Remote.jsjac;
// デバッガコンソール
if (typeof (oDbg) != "unknown") {
connectionConfig.oDbg = oDbg;
}
var connection = new JSJaCHttpBindingConnection(connectionConfig);
remote.connection = 接続;
// インストール（注册）接続イベントモデル
remote.jsjac.chat.setupEvent(connection);
// 接続メソッドの引数を設定します
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("利用可能", "オンライン", 1, "チャット");
} catch (e) {
remote.console.errorEL().html(e.toString());
} 最後に {
return false;
}
},
// 改用户状態态
changeStatus: function (type, status, priority, show) {
type = type || "利用できません";
ステータス = ステータス || "オンライン";
優先度 = 優先度 || "1";
表示 = 表示 || "チャット";
var present = new JSJaCPresence();
presence.setType(type); // 利用不可不可視
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);
// チャット受信情報領域にメッセージを書き込む
remote.jsjac.chat.writeMessage("", userName, html);
} ,
handleError: function (event) {
var e =event ||
var html = "エラーが発生しました:
" : " 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ユーザー名を変更してください。 ";
remote.jsjac.chat.reconnection();
break;
case "503":
content = "IM サーバーに接続できません。関連する設定を確認してください。 ";
break;
case "500":
var content = "サーバー内部エラー! nn接続が切断されました！
再接続";
remote.jsjac.chat.writeMessage (" ", "システム", コンテンツ);
break;
デフォルト:
break;
}
if (コンテンツ) {
alert("WeIM: " content);
}
if (remote.connection.connected()) {
remote.connection.disconnect();
}
},
// ステータス変更トリガーイベント
handleStatusChanged: function (status) {
remote.console.info("

現在のユーザーのステータス: " status "

");
remote.dbger.log("現在のユーザーのステータス: " " status);
if (status == "切断中") {
var html = "オフラインです。 ";
// チャット受信情報領域にメッセージを書き込む
remote.jsjac.chat.writeMessage("", "System", html);
}
} ,
// リンク確立トリガーイベントメソッド
handleConnected: function () {
remote.console.clear("debug"); // リセット
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(); send (iq.reply([
iq.buildNode("display", now.toLocaleString()),
iq.buildNode("utc", now.jabberDate()),
iq.buildNode( " tz", now.toLocaleString().substring(now.toLocaleString().lastIndexOf(" ") 1))
return
}
}; >

このファイルのコードは、jsjac ライブラリと openfire 間の通信を確立するためのコアコードです。コード内にすでにコメントがあるため、理解できない場合はここでは詳しく説明しません。何かあれば、メッセージを残してください。
4、メッセージエリア、エディターコード send.message.editor-1.0.js

コードをコピー

コードは次のとおりです:

 
/**
* IM チャット メッセージの送信 iframe エディター 
* @author: hoojo 
* @email: hoojo_@126.com 
* @blog: http://blog.csdn.net/IBM_hoojo 
* @createDate: 2012-5-24 
* @バージョン 1.0 
**/ 
var Agent = window.navigator.userAgent.toLowerCase(); 
var sendMessageEditor = { 
// iframe のウィンドウ オブジェクトを取得します 
 getWin: function () { 
return /*!/firefox/.test(agent)*/false ? sendMessageEditor.iframe.contentWindow : window.frames[sendMessageEditor.iframe.name]}, 
 //iframe のドキュメント オブジェクトを取得します。 
getDoc: function () { 
return !/firefox/.test(agent) ? sendMessageEditor.getWin().document : (sendMessageEditor.iframe.contentDocument || sendMessageEditor .getWin( ).document); 
}, 
init: function (userJID) { 
//ドキュメント オブジェクトを開き、FireFox と互換性を持たせるために初期化コンテンツを書き込みます 
var doc = sendMessageEditor .getDoc() ; 
doc.open(); 
var html = [ 
'', 
'< /head>', 
'', 
''].join("" ); 
doc.write(html); 
//ドキュメント オブジェクト編集モードを開く 
doc.close(); getContent: function ( ) { 
var doc = sendMessageEditor.getDoc(); 
//エディターの本体オブジェクトを取得します 
var body = doc.body || 
//エディタのコンテンツ 
var content = body.innerHTML; 
//一部の特殊文字の置換など、コンテンツを処理します。
//コード 
//コンテンツを返します
コンテンツを返します。 
}, 
//統一実行コマンドメソッド 
execCmd: function (cmd, value, d){ 
var doc = d || 
//doc Toオブジェクトを取得します。上記のコードを参照してください。 
 // execCommand メソッドを呼び出してコマンドを実行します。 
doc.execCommand(cmd, false, value === unknown ? 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 
//win オブジェクトを取得するには、以下を参照してください。上記のコード
if (/msie/ .test(agent)) { 
win.focus(); 
var r = doc.selection.createRange() { 
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 

コードをコピーします

コードは次のとおりです:

 
/**
* 機能: im Web チャット CSS 
* 作成者: hoojo 
* createDate: 2012-5-26 上午11:42:10 
*/ 
@CHARSET "UTF-8"; 
*, body { 
font-family: Courier,serif,monospace; 
フォントサイズ: 12px; 
パディング: 0; 
マージン: 0; 
} 
.chat-main { 
位置: 絶対; 
/*右: 80px;*/ 
左: 50px; 
トップ: 20px; 
z インデックス: 999; 
表示: なし。 
} 
.chat-main .radius { 
背景色: 白; 
ボーダー: 8px ソリッド #94CADF; 
境界半径: 1em; 
} 
#chat { 
位置: 相対; 
/*left: 150px;*/ 
padding: 0; 
マージン: 0; 
} 
#chat table { 
border-collapse: Collapse; 
幅: 435px; 
*幅: 460px; 
/*width: 410px;*/ 
/*width: 320px;*/ 
} 
#chat table .title { 
font-weight: 太字; 
色: 緑; 
パディング: 3px; 
背景色: #94CADF; 
} 
/* 收缩条 */ 
#チャットテーブル .split { 
背景色: #94CADF; 
カーソル: ポインタ; 
} 
/* ################## 製品情報 #################### * / 
#チャット テーブル .product-info { 
幅: 30%; 
/*表示: なし;*/ 
パディング: 0; 
マージン: 0; 
vertical-align: 上; 
} 
#chat table .product-info ul { 
margin: 0; 
パディング: 0; 
} 
#chat table .product-info ul div.header { 
background-color: #EBEFFE; 
行の高さ: 22px; 
フォントサイズ: 12px; 
色: 黒; 
} 
#chat table .product-info ul li { 
list-style: none 外側 none; 
背景色: 白; 
テキストオーバーフロー: 省略記号; 
空白: nowrap; 
オーバーフロー: 非表示; 
パディング左: 5px; 
行の高さ: 22px; 
フォントサイズ: 11px; 
色: #6F6F6F; 
幅: 140ピクセル; 
} 
#チャットテーブル .product-info ul li.pic { 
高さ: 200px; 
パディング: 0 5px 0 5px; 
ボーダー: 1px 破線 #ccc; 
text-align: 中央; 
} 
#チャット テーブル .product-info ul li.pic img { 
} 
#チャット テーブル .product-info ul li.product-name { 
フォントの太さ: 太字; 
色: 黒; 
} 
#chat table .product-info ul li.price range { 
font-family: Courier; 
フォントサイズ: 16px; 
フォントの太さ: 太字; 
カラー: #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 { 
表示: なし; 
} 
/*########### 受信メッセージ領域 ############ */ 
#chat table .receive-message { 
高さ: 250ピクセル; 
} 
#chat table .send-message { 
width: 100%; 
/*高さ: auto;*/ 
} 
#チャット テーブル td { 
/*ボーダー: 1px 無地の白;*/ 
} 
#チャット テーブル .bottom-bar { 
背景色: #94CADF; 
テキスト整列: 右; 
} 
/* ############## ツール条 ################# start */ 
#chat table .tool-bar { 
高さ: 25px; 
背景色: #94CADF; 
} 
#chat table .tool-bar select { 
float: left; 
} 
#チャットテーブル .tool-bar select.family { 
幅: 45px; 
*幅: 55px; 
} 
#chat table .tool-bar div { 
width: 17px; 
高さ: 16px; 
フロート: 左; 
カーソル: ポインタ; 
マージン右: 2px; 
マージントップ: 1px; 
*マージントップ: 2px; 
背景: 透明 url("../images/tb-sprite.gif") リピートなしスクロール 0 0; 
} 
#チャットテーブル .tool-bar .color { 
margin-left: 2px; 
背景位置: -159px 0; 
} 
#チャット テーブル .tool-bar .bold { 
/*background-position: 0 0;*/ 
} 
#チャット テーブル .tool-bar .italic { 
背景位置: -18px 0; 
} 
#チャットテーブル .tool-bar .underline { 
背景位置: -32px 0; 
} 
#chat table .tool-bar .face { 
margin: 2px 0 0 3px; 
背景画像: url("../images/facehappy.gif"); 
} 
#chat table .tool-bar .history { 
背景画像: なし; 
幅: 60px; 
フロート: 右; 
マージントップ: 3px; 
フォントサイズ: 12px; 
表示: なし。 
} 
/* ###### 表情 ###### */ 
#chat #face { 
border: 1px ソリッドブラック; 
幅: 275px; 
*幅: 277px; 
位置: 相対。 
左: 8px; 
トップ: -370px; 
_top: -359px; 
z インデックス: 3; 
表示: なし。 
} 
#chat #face img { 
border: 1px ソリッド #ccc; 
右境界線: なし。 
ボーダーボトム: なし; 
カーソル: ポインタ; 
} 
#send { 
幅: 90px; 
高さ: 25px; 
} 
#close { 
幅: 40px; 
高さ: 25px; 
} 
.chat-message { 
位置: 絶対; 
下: 0; 
左: 0; 
幅: 100%; 
高さ: 25px; 
背景色: #fcfcfc; 
} 
.no-msg, .have-msg { 
カーソル: ポインタ; 
フロート: 右; 
マージン: 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 Binding Servlet 
org.jabber.JabberHTTPBind.JHBServlet 
 
Jabber HTTP Binding Servlet 
/JHB/ 
 
index.jsp