Web IM 원격 인스턴트 채팅 통신을 구축하기 위한 JavaScript/jQuery, HTML, CSS program_jquery

以及需要用到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 패키지에 넣었습니다

자바스크립트 라이브러리

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 라이브러리

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://download.csdn.net/detail/ibm_hoojo/4489439

프로젝트 디렉토리 구조

2. 핵심 코드 데모
1. 메인 인터페이스(로그인, 메시지 프롬프트, 로그, 새 채팅 창 생성) code index.jsp

코드 복사 코드는 다음과 같습니다.

<%@ 페이지 언어="java" pageEncoding="UTF-8" %>
<%
문자열 경로 = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() 경로 "/";
%>


<머리>




















<본문>

userName：
password：
등록:
sendTo：

사용자：
sendTo：

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

复代码码 代码如下:

$.WebIM 메소드가 주요 기능으로, local.chat의 기본 구성을 재정의하고 채팅 창 생성을 완료할 수 있습니다. $.WebIM.newWebIM 메소드는 새 창을 생성하지만 메시지 수신자는 새로운 사용자입니다.

코드 복사 코드는 다음과 같습니다.

$.WebIM({
sender : userName,
수신자: 수신자
})
$.WebIM.newWebIM({
수신자: 수신자
})

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: "", // 비밀번호
timeval: 2000, // 요청 시간 초과 설정
resource: "WebIM", // 링크 리소스 식별
register: true // 등록 여부

remote.jsjac.chat.logout(); 예 Openfire를 종료하고 연결을 끊습니다.

2. 로컬 채팅 애플리케이션 핵심 코드 local.chat-2.0.js

코드 복사 코드는 다음과 같습니다.

/***
* 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
* @requires jQuery v1.2.3 이상, send.message.editor-1.0.js
* Copyright (c) 2012 M.hoo
**/
;(함수 ($) {
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 = {
version: 2.0,
chat: "#chat",
chatEl : function () {
var $chat = _opts.chat;
if ((typeof _opts.chat) == "string") {
$chat = $(_opts.chat); } else if ((typeof _opts.chat) == "객체") {
if (!$chat.get(0)) {
$chat = $($chat)
}
}
return $chat;
},
sendMessageIFrame: function (receiverId) {
return $("iframe[name='sendMessage" receiveId "']").get(0). contentWindow;
},
receiveMessageDoc: function (receiverId) {
receiverId = receiveId || ""
var docs =
$("iframe[name ^='receiveMessage" receiveId "']"), function () {
docs.push($(this.contentWindow.document));
});
return docs;
// return $($("iframe[name^='receiveMessage" receiveId "']").get(0).contentWindow.document);
},
sender: "", // 发送者
receiver: "", // 接收者
setTitle: function (chatEl) {
var receive = this.getReceiver(chatEl );
chatEl.find(".title").html("화" 수신자 "聊天对话中");
},
getReceiver: function (chatEl) {
var receive = 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.getFullYear() "-" date.getMonth() "-" date.getDate();
datetime = " " _opts.datetimeFormat(date.getHours())
":" _opts.datetimeFormat(date.getMinutes())
":" _opts.datetimeFormat(date.getSeconds());
반환 날짜/시간;
},
/***
* 메시지 전송을 위한 형식 템플릿
* 플래그 = true는 현재 사용자가 본인임을 의미하고, 그렇지 않으면 상대방임을 의미합니다.
**/
receiveMessageTpl: function (userName, styleTpl, content, flag) {
var userCls = flag ? "나" : "당신";
if (styleTpl && 플래그) {
content = [ "", content, "" ].가입하다("");
}
return [
'

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

',
'

', 내용, '

'
].join("");
},
// 工具类按钮触发事件返回html模板
sendMessageStyle: {
cssStyle: {
bold: "font-weight:bold;",
underline: " 텍스트 장식: 밑줄;",
이탤릭체: "글꼴 스타일: 경사;"
},
setStyle: 함수(스타일, val) {
if(val) {
_opts.sendMessageStyle[style] = val;
} else {
var styleVal = _opts.sendMessageStyle[스타일];
if (styleVal === 정의되지 않음 || !styleVal) {
_opts.sendMessageStyle[style] = true;
} else {
_opts.sendMessageStyle[스타일] = false;
}
}
},
getStyleTpl: function () {
var tpl = "";
$.each(_opts.sendMessageStyle, function (스타일, 항목) {
//alert(style "#" item "#" (항목 유형));
if (item === true) {
tpl = _opts.sendMessageStyle.cssStyle[style];
} else if ((typeof item) === "string") {
//alert(style "------ ------" sendMessageStyle[스타일]);
tpl = style ":" 항목 ";";
}
});
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; Trim(content );
content = content.replace(new RegExp("
", "gm"), "")
// 전송할 콘텐츠 가져오기
if (content ) {
var sender = $chatMain.attr("sender");
var receiveId = $chatMain.attr("id")
//수신 영역에 메시지 쓰기
_opts. writeReceiveMessage(receiverId, sender, content, true);
//########### XXX
var receive = $chatMain.find("#to").val();
// var receive = $chatMain.attr("receiver");
// 모바일 세션인지 확인하고, 그렇다면 일반 텍스트를 보내고, 그렇지 않으면 html 코드를 보냅니다.
var flag = _opts. isMobileClient(수신자);
if (플래그) {
var text = $(doc.body).text()
text = $.trim(text)
if (text);
// 원격으로 메시지 보내기
remote.jsjac.chat.sendMessage(text, receive);
}
} else { // 비모바일 통신에서는 html 코드를 보낼 수 있습니다
var styleTpl = _opts.sendMessageStyle.getStyleTpl ();
content = [ "", content, "" ].join(""); >remote.jsjac.chat.sendMessage(content, receive);
}
// 전송 영역 지우기
$(doc).find("body").html(""); >}
} ,
faceImagePath: "images/emotions/",
faceElTpl: function (i) {
return [
"] .join("");
},
// 표현식 만들기 html 요소
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);
},
// 이모티콘 삽입
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)
});
// 이모티콘 숨기기
$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 ("클래스");
if (targetCls == "face") {
$chat.find("#face").show(150)
window.clearTimeout(faceTimed); >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 스타일 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: 함수(수신기) {
var moblieClients = ["iphone", "ipad", "ipod", "wp7", "android", "blackberry", "Spark", " 경고", "symbian"];
var flag = false
for (var i in moblieClients) {
if (~receiver.indexOf(moblieClients[i] )) {
참을 반환
}
}
거짓을 반환
},
// 聊天界面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, ' ', '
', '', '宋体', '黑体', '幼圆', '华文行楷', '华文楷体', '华文楷体', '华文彩云', '华文隶书', '微软雅黑', 'Fixedsys', '', '', '大小', '10', '12', '14', '16', '18', '20', '24', '28', '36', '42', '52', '', '', '颜色', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ' ', ' ', ' ', ' ', ' 消息记录 ', '
', '', '
', '

',
'

',
'

',
'

'
].join("");
},
initWebIM: 함수(userJID, 수신자) {
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, receive, product));
$("body").append(chatEl);
// 드래그
$("#" userJID).easydrag()
// sendMessageEditor 관련 정보 초기화
sendMessageEditor.iframe = this.sendMessageIFrame(userJID);
sendMessageEditor.init(userJID);
_opts.writeReceiveStyle(userJID)
_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);
}); .find("#close").click(function () {
var $chatMain = $(this).parents(".chat-main");
$chatMain.hide(500) ;
});// 먼저 이벤트 바인딩을 취소하세요. 여러 메시지가 동시에 전송되면 여러 개의 동일한 이벤트가 동시에 바인딩됩니다.
$(".have-msg, .no- msg, . chat-main").unbind("클릭");
$(".have-msg").bind("클릭", 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 = event || window.event;
var keyCode = e.which || e.keyCode;
if (keyCode == 13) {
var $chatMain = $("#" $(this).find("body" ).attr ("jid"));
_opts.sendHandler($chatMain);
}
})
},
// 새 채팅 창 만들기
newWebIM: 설정) {
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: 함수(사용자, 콘텐츠) {
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);
}
},
// 메시지 프롬프트
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); (설정);
settings.newWebIM(설정);
$.WebIM.settings = 설정
}
}); | _opts;
$.WebIM.initWebIM = _opts.initWebIM;
$.WebIM.newWebIM = _opts.newWebIM;
$.WebIM.messageHandler =
}) ;


여기서의 방법은 기본적으로 채팅 창에 대한 응용 프로그램이며 주로 로컬 채팅 프로그램의 js 및 HTML 요소 작업입니다. 글꼴, 글꼴 크기, 색상, 표현, 메시지 전송 등은 채팅 메시지를 보내는 핵심 코드를 포함하지 않으며 원격 메시지를 보내는 방법이 있습니다.
remote.jsjac.chat.sendMessage(text, receive); 매개변수 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
* @requires jQuery v1.2.3 이상
* Copyright (c) 2012 M. hoo
**/
var remote = {
debug: "info, error",
chat: "body",
receiver: "#to" , // 接受者jquery 표현식
console: {
errorEL: function () {
if ($(remote.chat).get(0)) {
return $(remote.chat) .find("#오류");
} 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();
}
},
// 디버그 오류
오류: 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: 함수(사용자) {
if(사용자) {
if (!~user.indexOf("@")) {
user = "@"remote.jsjac.domain;// "/"remote.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 当前有效域name
username: "",
pass: "",
timerval: 2000, // 设置请求超时
resource: "WebIM", / / 链接资源标识
등록: 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;
온라인 상태로 돌아가기;
},
상태: 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 = 함수() {
};
}
try {
// 세션 재개를 시도합니다
if (JSJaCCookie.read("btype").getValue() == "bind") {
remote.connection = new JSJaCHttpBindingConnection({ "oDbg": 원격.dbger});
rdbgerjac.chat.setupEvent(remote.connection);
if (remote.connection.resume()) {
remote.console.clear("debug");
}
}
} catch (e) {
remote.console.errorEL().html(e.name ":" e.message);
} // 쿠키 읽기 실패 - 신경쓰지 마세요
remote.jsjac.chat.setState();
},
로그인: function (loginForm) {
remote.console.clear("debug"); // 재설정
try {
// 链接参数
var ConnectionConfig = remote.jsjac;
// 디버거 콘솔
if (typeof (oDbg) != "undefine") {
connectionConfig.oDbg = oDbg;
}
var 연결 = new JSJaCHttpBindingConnection(connectionConfig);
remote.connection = 연결;
// 安装（注册）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("available", "online", 1, "chat");
} catch (e) {
remote.console.errorEL().html(e.toString());
} 마침내 {
false를 반환합니다.
}
},
// 改变用户状态
changeStatus: 함수(유형, 상태, 우선순위, 표시) {
유형 = 유형 || "없는";
상태 = 상태 || "온라인";
우선순위 = 우선순위 || "1";
표시 = 표시 || "채팅";
var 존재 = new JSJaCPresence();
presence.setType(유형); // 사용할 수 없음 보이지 않음
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 || window.event
var html = "오류가 발생했습니다:
" ("코드 : " e.getAttribute("코드")
"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":
varcontents = "서버 내부 오류입니다! nn연결이 끊어졌습니다!
다시 연결";
remote.jsjac.chat.writeMessage (" ", "시스템", 내용);
break;
기본값:
break;
}
if (content) {
alert("WeIM: " content);
}
if (remote.connection.connected()) {
remote.connection.disconnect();
}
},
// 상태 변경 트리거 이벤트
handlerStatusChanged: function (status) {
remote.console.info("

현재 사용자 상태: " status "

")
remote.dbger.log("현재 사용자 상태: " " status);
if (status == "disconnecting") {
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()
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 채팅 메시지 보내기 iframe 편집기
* @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의 창 객체 가져오기
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 = [
'',
'