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

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

문자열 경로 = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() 경로 "/";
%>

userName：
password：
등록:
sendTo：

사용자：
sendTo：