JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程式_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按钮创建新会话

如果你來了新消息，在瀏覽器的標題列會有新消息提示

如果你目前聊天介面的視窗都是關閉狀態，那麼在右下角會有訊息提示的閃爍圖示

這裡已經貼出了所有的原始碼了，如果你非常的需要來源程式碼（但我希望你能自己建立一個工程去複製原始碼，這是我希望看到的），那麼你可以透過以下方式聯絡我
Email：hoojo_@126.com
Blog：http: //blog.csdn.net/IBM_hoojo
http://hoojo.cnblogs.com/
http://hoojo.blogjava.net
註：我不會保證第一時間給你程式碼，但我會在空閒的時間寄給你原始碼

開發環境
System：Windows
JavaEE Server：Tomcat 5.0.28 /Tomcat 6
WebBrowser：IE6 、Firefox3.5 、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
jsc.js 通訊庫
local.chat-2.0.js 本機會話視窗傳送訊息JavaScript函式庫
remote.jsjac.chat-2.0.js 遠端會話訊息JavaScriptScriptScript庫
send.message.editor-1.0.js 視窗編輯器Script庫
send.message.editor-1.0.js 視窗編輯器Script庫
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 複製程式碼

程式碼如下:

字串路徑 = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() 路徑 "/";
%>
">








>

window.contextPath = "";
視窗["serverDomin"] = "192.168.8.22";
腳本>



腳本>




$(function () {
$("#login ") .click(function () {
var userName = $(":text[name='userName']").val() ;
var receive = $("*[name='to' ]" ).val(); // 建立一個聊天視窗應用，並設定發送者和訊息接收者
$.WebIM ({
sender: userName,
receiver: receive
}) ; 🎜>//登陸openfire伺服器
remote.jsjac.chat.login(document.userForm); ("label").text(userName);
$("form").hide(); > $("#newConn").show();
$ ("#logout").click(function () {
//退出openfire登陸，斷開連結
remote.jsjac.chat . logout();
$("form").show( );
$("#newConn").hide();
$("#chat").hide(800);
$("#newSession"); click(function () {
var receive = $("#sendTo").val();
//建立一個新的聊天窗口，並設定訊息接收者 (寄給誰？)
$ .WebIM.newWebIM({
接收者: 接收者
})
});
腳本>
頭>



使用者名稱：
密碼：
註冊：
sendTo： ；

表格>

使用者：
sendTo： ；
>
>

>