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_@导读如果你对openfire还不是很了解或是不知道安装，建议你看看这2篇文章/hoojo/archive/2012/05/17/2506769.html/hoojo/archive/2012/05/13/2498151.html因为这里还用到了JabberHTTPBind 以及在使用它或是运行示例的时候会遇到些问题，那么你可以看看这篇文章/hoojo/archive/2012/05/17/2506845.html开发环境System：WindowsJavaEE Server：Tomcat 5.0.28+/Tomcat 6WebBrowser：IE6+、Firefox3.5+、Chrome 已经兼容浏览器JavaSDK：JDK 1.6+Openfire 3.7.1IDE：eclipse 3.2、MyEclipse 6.5开发依赖库jdk1.4+serializer.jarxalan.jarjhb-1.0.jarlog4j-1.2.16.jarjhb-1.0.jar 这个就是JabberHTTPBind，我把编译的class打成jar包了JavaScript libjquery.easydrag.js窗口拖拽JavaScript libjquery-1.7.1.min.js jquery libjsjac.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:///sstrigler/JSJaC/如果你不喜欢用jsjac JavaScript lib和Openfire通信，那么有一款jQuery的plugin可以供你使用，下载地址jQuery-XMPP-plugin https:///maxpowel/jQuery-XMPP-plugin这里有所以能支持Openfire通信的第三方库，有兴趣的可以研究下/xmpp-software/libraries/jquery.easydrag 下载：/code/easydrag/jquery.easydrag.jsjquery 下载：/jquery-1.7.1.min.jsJabberHTTPBind jhb.jar 下载：/detail/ibm_hoojo/4489188images 图片素材：/detail/ibm_hoojo/4489439工程目录结构二、核心代码演示1、主界面（登陆、消息提示、日志、建立新聊天窗口）代码index.jsp1.<%@ page language="java"pageEncoding="UTF-8" %>2.<% String path = request.getContextPath();3.String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>4.5.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">6.<html>7.<head>8.<base href="<%=basePath%>">9.10.<title>WebIM Chat</title>11.<meta http-equiv="pragma"content="no-cache">12.<meta http-equiv="cache-control"content="no-cache">13.<meta http-equiv="expires"content="0">14.<meta http-equiv="author"content="hoojo">15.<meta http-equiv="email"content="hoojo_@">16.<meta http-equiv="blog"content="/IBM_hoojo">17.<meta http-equiv="blog"content="">18.<link rel="stylesheet"type="text/css"href="css/chat-2.0.css"/>19.<script type="text/javascript">20.window.contextPath = "<%=path%>";21. window["serverDomin"] = "192.168.8.22";22.</script>23.<script type="text/javascript"src="jslib/jquery-1.7.1.min.js"></script>24.<script type="text/javascript"src="jslib/jsjac.js"></script>25. <!-- script type="text/javascript" src="debugger/Debugger.js"></script-->26.<script type="text/javascript"src="jslib/send.message.editor-1.0.js"></script>27.<script type="text/javascript"src="jslib/jquery.easydrag.js"></script>28.<script type="text/javascript"src="jslib/remote.jsjac.chat-2.0.js"></script>29.<script type="text/javascript"src="jslib/local.chat-2.0.js"></script>30.<script type="text/javascript">31. $(function () {32.33. $("#login").click(function () {34. var userName = $(":text[name='userName']").val();35. var receiver = $("*[name='to']").val();36. // 建立一个聊天窗口应用，并设置发送者和消息接收者37. $.WebIM({38. sender: userName,39. receiver: receiver40. });41. // 登陆到openfire服务器42. remote.jsjac.chat.login(erForm);43. $("label").text(userName);44. $("form").hide();45. $("#newConn").show();46. });47.48. $("#logout").click(function () {49. // 退出openfire登陆，断开链接50. remote.jsjac.chat.logout();51. $("form").show();52. $("#newConn").hide();53. $("#chat").hide(800);54. });55.56. $("#newSession").click(function () {57. var receiver = $("#sendTo").val();58. // 建立一个新聊天窗口，并设置消息接收者（发送给谁？）59. $.WebIM.newWebIM({60. receiver: receiver61. });62. });63. });64.</script>65.</head>66.67.<body>68. <!-- 登陆表单 -->69.<form name="userForm"style="background-color: #fcfcfc; width: 100%;">70. userName：<input type="text"name="userName"value="boy"/>71. password：<input type="password"name="password"value="boy"/>72.73. register: <input type="checkbox"name="register"/>74. sendTo：<input type="text"id="to"name="to"value="hoojo"width="10"/>75.<input type="button"value="Login"id="login"/>76.</form>77. <!-- 新窗口聊天 -->78.<div id="newConn"style="display: none; background-color: #fcfcfc; width: 100%;">79. User：<label></label>80. sendTo：<input type="text"id="sendTo"value="hoojo"width="10"/>81.<input type="button"value="new Chat"id="newSession"/>82.<input type="button"value="Logout"id="logout"/>83.</div>84. <!-- 日志信息 -->85.<div id="error"style="display: ; background-color: red;"></div>86.<div id="info"style="display: ; background-color: #999999;"></div>87. <!-- 聊天来消息提示 -->88.<div class="chat-message">89.<img src="images/write_icon.png"class="no-msg"/>90.<img src="images/write_icon.gif"class="have-msg"style="display: none;"/>91.</div>92.</body>93.</html>下面这段代码尤为重要，它是设置你链接openfire的地址。