JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
这篇文章主要介绍用JavaScript和jQuery、HTML、CSS以及用第三方聊天JavaScript（jsjac）框架构建一个BS Web的聊天应用程序。此程序可以和所有连接到Openfire服务器的应用进行通信、发送消息。如果要运行本程序还需要一个聊天服务器Openfire，
以及需要用到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按钮创建新会话
如果你来了新消息，在浏览器的标题栏会有新消息提示
如果你当前聊天界面的窗口都是关闭状态，那么在右下角会有消息提示的闪动图标
这里已经贴出了所有的源代码了，如果你非常的需要源代码（但我希望你能自己创建一个工程去复制源代码，这是我希望看到的），那么你可以通过以下方式联系我
Email：hoojo_@126.com
Blog：http://blog.csdn.net/IBM_hoojo
http://hoojo.cnblogs.com/
http://hoojo.blogjava.net
注：我不会保证在第一时间给你代码，但我会在空闲的时间给你发送源码
导读
如果你对openfire还不是很了解或是不知道安装，建议你看看这2篇文章
http://www.cnblogs.com/hoojo/archive/2012/05/17/2506769.html
http://www.cnblogs.com/hoojo/archive/2012/05/13/2498151.html
因为这里还用到了JabberHTTPBind 以及在使用它或是运行示例的时候会遇到些问题，那么你可以看看这篇文章
http://www.cnblogs.com/hoojo/archive/2012/05/17/2506845.html
开发环境
System：Windows
JavaEE Server：Tomcat 5.0.28+/Tomcat 6
WebBrowser：IE6+、Firefox3.5+、Chrome 已经兼容浏览器
JavaSDK：JDK 1.6+
Openfire 3.7.1
IDE：eclipse 3.2、MyEclipse 6.5
开发依赖库
jdk1.4+
serializer.jar
xalan.jar
jhb-1.0.jarlog4j-1.2.16.jar
jhb-1.0.jar 这个就是JabberHTTPBind，我把编译的class打成jar包了
JavaScript lib
jquery.easydrag.js 窗口拖拽JavaScript lib
jquery-1.7.1.min.js jquery lib
jsjac.js 通信核心库
local.chat-2.0.js 本地会话窗口发送消息JavaScript库
remote.jsjac.chat-2.0.js 远程会话消息JavaScript库
send.message.editor-1.0.js 窗口编辑器JavaScript库
一、准备工作
jsjac JavaScript lib下载：https://github.com/sstrigler/JSJaC/
如果你不喜欢用jsjac JavaScript lib和Openfire通信，那么有一款jQuery的plugin可以供你使用，下载地址
jQuery-XMPP-plugin https://github.com/maxpowel/jQuery-XMPP-plugin
这里有所以能支持Openfire通信的第三方库，有兴趣的可以研究下 http://xmpp.org/xmpp-software/libraries/
jquery.easydrag 下载：http://fromvega.com/code/easydrag/jquery.easydrag.js
jquery 下载：http://code.jquery.com/jquery-1.7.1.min.js
JabberHTTPBind jhb.jar 下载：http://download.csdn.net/detail/ibm_hoojo/4489188
images 图片素材：http://download.csdn.net/detail/ibm_hoojo/4489439
工程目录结构
二、核心代码演示
1、主界面（登陆、消息提示、日志、建立新聊天窗口）代码 index.jsp
<script type="text/javascript">window.contextPath = "<%=path%>";window["serverDomin"] = "192.168.8.22";</script>
$.WebIM方法是主函数，用它可以覆盖local.chat中的基本配置，它可以完成聊天窗口的创建。$.WebIM.newWebIM方法是新创建一个窗口，只是消息的接收者是一个新用户。
$.WebIM({sender: userName,receiver: receiver});$.WebIM.newWebIM({receiver: receiver});
remote.jsjac.chat.login(document.userForm);方法是用户登录到Openfire服务器
参数如下：
httpbase: window.contextPath + "/JHB/", //请求后台http-bind服务器urldomain: window["serverDomin"], //"192.168.5.231", // 192.168.5.231 当前有效域名username: "", // 登录用户名pass: "", // 密码timerval: 2000, // 设置请求超时resource: "WebIM", // 链接资源标识register: true // 是否注册
remote.jsjac.chat.logout();是退出、断开openfire的链接
2、本地聊天应用核心代码 local.chat-2.0.js
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><servlet><servlet-name>Jabber HTTP Binding Servlet</servlet-name><servlet-class>org.jabber.JabberHTTPBind.JHBServlet</servlet-class><!-- <init-param><param-name>debug</param-name><param-value>1</param-value></init-param> --></servlet><servlet-mapping><servlet-name>Jabber HTTP Binding Servlet</servlet-name><url-pattern>/JHB/</url-pattern></servlet-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list></web-app>至此，这个应用的全部代码已经贴出来，如果你按照我这边的结构形式应该是可以完成这个聊天应用的。如果你有什么问题或想法，欢迎你给我留言或评论！
