JavaScript

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：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.jar

log4j-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:///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.js

jquery 下载：/jquery-1.7.1.min.js

JabberHTTPBind jhb.jar 下载：/detail/ibm_hoojo/4489188

images 图片素材：/detail/ibm_hoojo/4489439

工程目录结构

二、核心代码演示

1、主界面（登陆、消息提示、日志、建立新聊天窗口）代码index.jsp

1.<%@ page language="java"pageEncoding="UTF-8" %>

2.<% String path = request.getContextPath();

3.String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort(

)+path+"/"; %>

4.

5.

6.

7.