如何開發一個仿微信的 Web IM?
- Company: Yappam
- Date: 20150325
- Author: Yuewen Hao
序
在這個開源盛行的年代, 想要做出一些功能性開發, 一般來說只要找對了方向, 用對了工具, 都會簡單的讓你自己都覺得不可思議.
當然, 更重要的是, 我們可以有更多的精力去陪身邊的人, 做自己喜歡的事情. 想想就覺得很高興.
回到主題. 今天, 我們就來看看怎麼可以做出一款仿微信客戶端聊天的Web IM.
注: IM (Instant Message) 即時性訊息, 就比如 QQ, 它就屬於客戶端的即時性聊天軟體.
效果如圖:
基礎概念
為了實現這個效果, 我們首先需要知道幾個簡單的概念.
XMPP 協議
簡單來說, 就是我們需要通過一種規則來聊天.
就像摩斯密碼那樣. 通過不同長短和個數的 “滴(Di)” “嗒(Da-)”, 對應著協議規則翻譯成不同的字母.
就比如, “Di” “Da-” 就是”A”, 而 “Di” “Di” “Di” “Di” 就代表著 “H”.
如圖:
而在XMPP 協議中, 它的規則是 XML 檔案來定義的.
它通過三種基本的XML 節：IQ Stanza（IQ 節）, Presence Stanza（Presence 節）, Message Stanza（Message 節）, 從而形成了一個基本的即時通訊協議平臺.
注: Stanza 代表XML訊息節
它們分別代表 IQ(Infomation Query 資訊查詢), Presence(使用者出席狀態), Message(訊息).
就比如,
使用者可以傳送 IQ Stanza 到伺服器, 就可以查詢使用者的相關資訊;
傳送Message Stanza 就可以傳送聊天訊息;
當客戶端接受到Presence Stanza 時, 可能就表明有使用者發生了離線或者上線.
在整個Session 的生命週期中, 我們就是通過雙向傳輸這些 Stanzas 來實現客戶端與伺服器的互動的.有了一種用於聊天的規則, 我們就需要兩個來聊天的人. 不然, 總不能指望著兩團空氣擱那兒乾瞪眼兒吧.
也就是說, 我們需要兩個懂XMPP 這個規則的”人” – 兩個實現了XMPP 協議的客戶端.有了XMPP 協議, 有了客戶端, 為了更好的使用和管理所有的客戶端使用者, 我們就需要一臺懂 XMPP 協議的伺服器作為不同客戶端之間的中間人.
它知曉所有的客戶端使用者, 並負責管理每個Session 的生命週期.
就像 Web 瀏覽器 和 Web 伺服器的關係. 只有客戶端和伺服器在一起才能構成完整的生態系統.
可以看出來, 我們一種需要一臺實現了XMPP 協議的伺服器和兩個實現了XMPP 協議的客戶端.
伺服器, 我們使用開源的Openfire 伺服器.
其中一臺客戶端, 我們需要通過仿微信的 Web 頁面來實現, 也就需要一種實現了 XMPP 協議的 Javascript 程式碼. 本例中使用 {{ Strophe.js }}
另外一臺客戶端, 就隨便了, 怎麼簡單怎麼來, 我直接使用了Openfire 官方提供的客戶端軟體 Spark.
如圖:
最後實現的效果是兩臺客戶端之間的聊天.
如圖:
OK. 囉嗦結束, 開始要搞一些實際的東西出來了.
環境搭建 & 原始碼
注: 由於我使用的版本是3.9.3, 所以, 在安裝和使用過程中, 遇到幾個問題, 我的安裝平臺為 “Win7 64位”.
需要使用32位的JDK 版本, 並配置環境變數 {{ EXE4J_JAVA_HOME = # 32位JDK 安裝目錄 # }}
請使用1.7以上的版本, 如果使用1.6, 伺服器將會在安裝外掛後, 無法載入已安裝外掛, 我使用的版本是JDK 1.7.0_71 (x86_64 Windows)
第一步, 搭建Openfire 伺服器:
參考: http://www.cnblogs.com/hoojo/archive/2012/05/17/2506769.html;
搭建伺服器, 網上很多資料, 大家自己去查閱就可以了;
搭建過程中在指定域名時, 配置為 example.org;
配置 hosts 檔案, 新增域名 example.org 指向127.0.0.1; 備註: 域名其實可以自定義, 但是在客戶端需要指定域名時, 必須要保持一致;
搭建成功後, 請新增使用者 hyw, yym, 方便原始碼演示, 可以自定義使用者名稱.
第二步, 安裝Spark 客戶端:
第三步, 就是我們的核心重點了:
推薦
官方站點推薦: