首頁 > php教程 > PHP开发 > JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

高洛峰
發布: 2016-11-26 13:57:36
原創
1360 人瀏覽過

這篇文章主要介紹用JavaScript和jQuery、HTML、CSS以及用第三方聊天JavaScript(jsjac)框架建立一個BS Web的聊天應用程式。此程式可以和所有連接到Openfire伺服器的應用程式進行通訊、傳送訊息。如果要執行本程式還需要一個聊天伺服器Openfire,

以及需要用到Http方式和Openfire通訊的第三方函式庫(JabberHTTPBind)。

JabberHTTPBind是jabber提供的XMPP協定通訊的Http bind發送的形式,它可以完成WebBrowser和Openfire建立長連線通訊。

主要通訊流程如下圖所示:

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

用戶A透過JavaScript jsjac.js庫發送一則訊息到JabberHTTPBind這個Servlet容器,然後JabberHTTPBind的Servlet容器會傳送一封訊息到Opent; Openfire Server接收到封包後解析,然後傳送給指定的使用者B。 JabberHTTPBind取得到Openfire Server傳送的資料後,解析封包向目前Servlet容器中的連結的Session中找到指定的使用者再傳送資料給使用者B。

WebBrowser端用的是jsjac和JabberHTTPBind建立的連接,所有資料都要經過JabberHTTPBind解析/轉換發送給Openfire。

 

先上張圖看看效果,呵呵~這裡是用戶hoojo和girl的聊天畫面,雙方在進行互聊……

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

可以發送表情、改變字體樣式(對方也可以看到對方

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序可以發送表情、改變字體樣式(對方也可以看到對方

可以發送表情、改變字體樣式(對方也能看到對方你的字體樣式),同時右邊是顯示/收縮詳情的訊息

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

收縮詳情

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

聊天介面部分截圖

用戶登入、註冊,sendTo

聊天介面部分截圖JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

用戶登入、註冊,sendTo

聊天介面並且建立一個聊天視窗

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

登入成功後,你可以在日誌控制台看到你的登陸狀態、或是在firebug控制台中看到你的連線請求狀態

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

登陸失敗

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

登陸失敗

JavaScript/jQuery、HTML、CSS 建置 Web IM 遠端及時聊天通訊程序

🎜登陸失敗🎜🎜🎜🎜🎜🎜登陸🎜🎜只有connecting,就沒有下文了🎜🎜🎜🎜🎜登陸成功後,你就可以給指定用戶發送訊息,且設定你想發送訊息的新用戶點擊new Chat按鈕創建新會話🎜🎜🎜🎜🎜來了新消息,在瀏覽器的標題列會有新訊息提示🎜🎜🎜🎜🎜如果你目前聊天介面的視窗都是關閉狀態,那麼在右下角會有訊息提示的閃爍圖示🎜
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板