邵孟良

摘要：針對新興電子商務網(wǎng)站首選開放的XMPP協(xié)議作為IM系統(tǒng)的需求，分析XMPP、BOSH協(xié)議及技術(shù)特點，給出Web IM系統(tǒng)總體架構(gòu)設計，并選擇Strophe.js庫對Web IM系統(tǒng)客戶端進行詳細的設計與實現(xiàn)。

關(guān)鍵詞：Web IM；XMPP協(xié)議；BOSH協(xié)議；Strophe

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2014）14-3461-04

Abstract： For emerging e-commerce site choice open XMPP protocol as IM system requirements， analysis of XMPP， BOSH protocol and characteristics of the technology， the overall architecture design of Web IM systems， and select the Strophe. Js library to Web IM system detailed design and implementation of the client.

Key words： Web IM； XMPP protocol； BOSH protocol； Strophe

隨著互聯(lián)網(wǎng)的飛速發(fā)展，Internet上的用戶數(shù)成幾何級數(shù)增長，越來越多的人加入到以網(wǎng)絡為媒介的網(wǎng)際交流活動中，其中即時通信（Instant Messaging，簡稱IM[1]）工具尤其受到網(wǎng)絡用戶的青睞，它能夠?qū)崟r的傳輸文本、圖片、文件，以及語音、視頻等，因而成為網(wǎng)絡用戶使用頻度最高的軟件之一。

由于即時通信系統(tǒng)的眾多優(yōu)勢，己逐步成為網(wǎng)絡經(jīng)濟新的增長點，并在網(wǎng)絡經(jīng)濟時代的各個新興行業(yè)中不斷壯大。目前，各大軟件廠商都已紛紛加入IM的競爭行列，先后推出了自己的IM產(chǎn)品，出現(xiàn)了多元化的競爭狀態(tài)。由于出于各自利益的考慮，大部分IM產(chǎn)品采用了私有的通信協(xié)議，不開放，這在一定程度上阻礙了不同即時通信系統(tǒng)之間的互通。

對于新興的電子商務企業(yè)，急需提供IM服務以方便與客戶之間的即時交流，若使用已有的廠商提供的IM產(chǎn)品，則受制于人，不方便業(yè)務的快速發(fā)展。所以選擇開放協(xié)議、開源架構(gòu)進行二次開發(fā)，將是這些電商企業(yè)的首選。該文擬結(jié)合“一呼百應電子商務平臺”，選擇XMPP、BOSH協(xié)議開發(fā)嵌入電商平臺的Web IM系統(tǒng)。

1 相關(guān)協(xié)議介紹

1.1 XMPP協(xié)議

XMPP（Extensible Messaging and Presence Protocol） [2-3]可擴展消息與出席協(xié)議，是一種基于可擴展標記語言XML的開放式協(xié)議。XMPP協(xié)議可用來處理實時性的消息請求和響應服務，利用它還可以實現(xiàn)不同服務的即時通信系統(tǒng)間互相通信。

1.2 BOSH協(xié)議

BOSH（Bidirectional-streams Over Synchronous HTTP， 基于同步HTTP的雙向流）[4]是一種傳輸協(xié)議。它可以利用同步的HTTP協(xié)議模擬兩個實體（例如客戶端-服務端）雙向流傳輸，而不需要輪詢或異步組件。

對于那些同時需要“推”和“拉”技術(shù)的應用程序，BOSH明顯比AJAX[5]等基于HTTP協(xié)議的技術(shù)更高效，更節(jié)約資源。相比HTTP輪訓技術(shù)（如Comet[6-7]技術(shù)），BOSH有著更高的效率和更低的延遲。到目前為止，BOSH主要用于Jabber/XMPP客戶端-服務器之間的數(shù)據(jù)傳輸（如web端和手機客戶端之間的通訊）。然而BOSH并非為XMPP定制的，它也可以用于別的傳輸。

BOSH定義了相關(guān)標準，用于XMPP數(shù)據(jù)傳輸，這個方案主要是為了解決HTTP協(xié)議無法保持TCP長連接的問題。其流程如圖1所示。

2 系統(tǒng)總體設計

系統(tǒng)總體架構(gòu)如圖2所示。

1） 系統(tǒng)集成一呼百應B2B電子商務平臺，提供pc到pc、pc到android、android到android多種平臺交流方式，讓用戶隨時隨地跟蹤掌握電子商務平臺客戶訪問情況，及時溝通交流。

2） 發(fā)送給目標用戶的消息，由發(fā)起用戶經(jīng)IM服務器轉(zhuǎn)發(fā)給目標用戶。

3） IM服務器采用Openfire進行二次開發(fā)部署。Openfire是采用Java開發(fā)，開源的實時協(xié)作（RTC）服務器，是基于開放的XMPP協(xié)議的IM服務器端的一個實現(xiàn)[9]。

4） 由于IM Web客戶端嵌入到電子商務網(wǎng)頁中，以便用戶在瀏覽網(wǎng)頁時隨時與商家進行溝通交流，因此，需在Web服務器端處理IM Web客戶端用戶的相關(guān)操作以及與IM服務器的通信，實現(xiàn)與IM服務器的對接。為保證原有電子商務平臺的獨立性與安全性，本系統(tǒng)針對IM Web客戶端的相關(guān)操作以及與IM服務器的對接采用部署專用的Web服務器，專門處理IM Web客戶端的信息轉(zhuǎn)發(fā)。

5） IM WEB客戶端、IM手機客戶端和IM PC客戶端均可通過BOSH或XMPP Over BOSH與IM服務器連接。

3 IM Web客戶端設計與實現(xiàn)

IM Web客戶端與IM服務器的通信使用BOSH協(xié)議（XEP標準擴展規(guī)范：XEP-0124），客戶端使用一個javascript的BOSH實現(xiàn)，本系統(tǒng)選擇使用Strophe[10]庫的js實現(xiàn)。

3.1 IM Web客戶端處理流程

IM Web客戶端處理流程如圖3所示。

圖3說明：

1） ①若用戶已經(jīng)登錄到IM服務器，則跳到②；

2） 自動添加客戶與店主為好友由Web服務器自動完成；endprint

3） 彈出窗口進行交流時，可根據(jù)需要，向商鋪發(fā)送相關(guān)消息：如用戶所關(guān)注的商品等信息。

3.2 主要處理步驟實現(xiàn)

IM Web客戶端使用Strophe庫和jQuery框架進行設計[11-12]。

1） 使用Strophe庫建立與服務端的連接；

var conn = new Strophe.Connection（'/http-bind'）；

conn.connect（data.jid， data.password， function（status）{

if （status === Strophe.Status.CONNECTED）{

$（document）.trigger（'connected'）；

}else if（status=== Strophe.Status.DISCONNECTED）{

$（document）.trigger（'disconnected'）；

}

}）；

//其中function（status）為連接成功后的回調(diào)函數(shù)，此處根據(jù)連接狀態(tài)調(diào)用對應的函數(shù)進行處理。

2） 添加客戶與店主為好友

var iq=$iq（{type： "set"}）.c（"query"，{xmlns：

"jabber：iq：roster"}）.c（"item"，data）；

conn.sendIQ（iq）；

var subs=$pres（{to：data.jid， "type"："substribe"}）；

3） 連接成功后，注冊回調(diào)函數(shù)，用于處理接收到的消息；

conn.addHandler（onMessage， null， 'message'， null，null，null）；

//其中onMessage為回調(diào)函數(shù)，用于處理對接收到的消息的顯示等操作。

4） 消息的發(fā)送處理；

var reply = $msg（{to： toId， from： fromId ， type： 'chat'}）.cnode

（Strophe.xmlElement（'body'， '' ，msg））；

connection.send（reply.tree（））； //發(fā)送消息

5） 關(guān)閉連接；

connection.disconnect（）；

3.3 IM Web客戶端運行效果

1） 電子商務網(wǎng)站頁面，嵌入IM Web客戶端的鏈接，如圖4所示：

2） 用戶登錄頁面

3） IM Web客戶端運行效果

當客戶點擊“與商鋪用戶溝通”按鈕時，彈出“用戶登錄”窗口登錄到IM系統(tǒng)，自動與商鋪用戶建立好友關(guān)系，并向商鋪用戶發(fā)送相關(guān)信息，商鋪用戶自動回復“您好！歡迎光臨”等信息，建立即時通信。運行效果如圖6所示：

4 結(jié)束語

目前，即時通信軟件已成為各大電子商務企業(yè)必備的與用戶進行實時溝通的工具，采用開放的XMPP協(xié)議進行開發(fā)成為大部分電商企業(yè)的首選。

本文詳細分析XMPP、BOSH等協(xié)議特性，采用BOSH協(xié)議進行設計開發(fā)IM系統(tǒng)，并選用開源XMPP Server（Openfire）軟件進行服務器端二次開發(fā)設置，選用Strophe的js庫完成面向Web頁面的IM客戶端開發(fā)。本系統(tǒng)的開發(fā)實現(xiàn)對電子商務網(wǎng)站應用開發(fā)Web IM系統(tǒng)提供參考。

參考文獻：

[1] Wikipedia.IM[EB/OL] （2014-03-26）.http：//en.wikipedia.org/wiki/Instant_messaging.

[2] Peter S A.XMPP Core RFC3920[EB/OL].http：//www.ietf.org/rfc/rfc3920.txt.

[3] Saint-Andre P. RFC3921 Extensible Messaging and PresenceProtocol（XMPP）：InstantMessagingandPresence，IETFproposedstandard[S].2004.

[4] XEP-0124：Bidirectional-streams Over Synchronous HTTP （BOSH） [EB/OL]. http：//xmpp.org/extensions/xep-0124.html

[5] Jefferey Porter.Active AJAX based live dashboards[EB/OL].http：// www.qenet.co.uk/warwick/whitepaper-pushTech.pdf，2007-02-21.

[6] 周婷.Comet：基于HTTP長連接”服務器推”技術(shù)[EB/OL].IBM DeveloperWorks 中國. http：//www.ibm.com/developerworks/cn/ web/wa-lo-comet/，2007-08-31.

[7] 陳航.基于服務器推送技術(shù)和XMPP的Web IM系統(tǒng)實現(xiàn)[J].計算機工程與設計，2010（5）：925-928.

[8] Ian Paterson， Peter Saint-Andre， Lance Stout， Winfried Tilanus. XEP-0206： XMPP Over BOSH[EB/OL].（ 2014-02-10）.http：//xmpp.org/extensions/xep-0206.html.

[9] Ignite Realtime：Openfire Server[EB/OL].（2014-04-01）.http：//www.igniterealtime.org/projects/openfire/.

[10] Jack Moffitt.Strophe.js[EB/OL]（2013-12-19）.http：//strophe.im/strophejs/.

[11] 鄒奕婷.B/S模式下基于Jabber的IM系統(tǒng)的構(gòu)建方法[J].計算機應用與軟件，2008，25（12）：196-198.

[12] Jack Moffitt.XMPP高級編程：使用JavaScript和jQuery[M].北京：清華大學出版社，2011.endprint

3） 彈出窗口進行交流時，可根據(jù)需要，向商鋪發(fā)送相關(guān)消息：如用戶所關(guān)注的商品等信息。

3.2 主要處理步驟實現(xiàn)

IM Web客戶端使用Strophe庫和jQuery框架進行設計[11-12]。

1） 使用Strophe庫建立與服務端的連接；

var conn = new Strophe.Connection（'/http-bind'）；

conn.connect（data.jid， data.password， function（status）{

if （status === Strophe.Status.CONNECTED）{

$（document）.trigger（'connected'）；

}else if（status=== Strophe.Status.DISCONNECTED）{

$（document）.trigger（'disconnected'）；

}

}）；

//其中function（status）為連接成功后的回調(diào)函數(shù)，此處根據(jù)連接狀態(tài)調(diào)用對應的函數(shù)進行處理。

2） 添加客戶與店主為好友

var iq=$iq（{type： "set"}）.c（"query"，{xmlns：

"jabber：iq：roster"}）.c（"item"，data）；

conn.sendIQ（iq）；

var subs=$pres（{to：data.jid， "type"："substribe"}）；

3） 連接成功后，注冊回調(diào)函數(shù)，用于處理接收到的消息；

conn.addHandler（onMessage， null， 'message'， null，null，null）；

//其中onMessage為回調(diào)函數(shù)，用于處理對接收到的消息的顯示等操作。

4） 消息的發(fā)送處理；

var reply = $msg（{to： toId， from： fromId ， type： 'chat'}）.cnode

（Strophe.xmlElement（'body'， '' ，msg））；

connection.send（reply.tree（））； //發(fā)送消息

5） 關(guān)閉連接；

connection.disconnect（）；

3.3 IM Web客戶端運行效果

1） 電子商務網(wǎng)站頁面，嵌入IM Web客戶端的鏈接，如圖4所示：

2） 用戶登錄頁面

3） IM Web客戶端運行效果

當客戶點擊“與商鋪用戶溝通”按鈕時，彈出“用戶登錄”窗口登錄到IM系統(tǒng)，自動與商鋪用戶建立好友關(guān)系，并向商鋪用戶發(fā)送相關(guān)信息，商鋪用戶自動回復“您好！歡迎光臨”等信息，建立即時通信。運行效果如圖6所示：

4 結(jié)束語

目前，即時通信軟件已成為各大電子商務企業(yè)必備的與用戶進行實時溝通的工具，采用開放的XMPP協(xié)議進行開發(fā)成為大部分電商企業(yè)的首選。

本文詳細分析XMPP、BOSH等協(xié)議特性，采用BOSH協(xié)議進行設計開發(fā)IM系統(tǒng)，并選用開源XMPP Server（Openfire）軟件進行服務器端二次開發(fā)設置，選用Strophe的js庫完成面向Web頁面的IM客戶端開發(fā)。本系統(tǒng)的開發(fā)實現(xiàn)對電子商務網(wǎng)站應用開發(fā)Web IM系統(tǒng)提供參考。

參考文獻：

[1] Wikipedia.IM[EB/OL] （2014-03-26）.http：//en.wikipedia.org/wiki/Instant_messaging.

[2] Peter S A.XMPP Core RFC3920[EB/OL].http：//www.ietf.org/rfc/rfc3920.txt.

[3] Saint-Andre P. RFC3921 Extensible Messaging and PresenceProtocol（XMPP）：InstantMessagingandPresence，IETFproposedstandard[S].2004.

[4] XEP-0124：Bidirectional-streams Over Synchronous HTTP （BOSH） [EB/OL]. http：//xmpp.org/extensions/xep-0124.html

[5] Jefferey Porter.Active AJAX based live dashboards[EB/OL].http：// www.qenet.co.uk/warwick/whitepaper-pushTech.pdf，2007-02-21.

[6] 周婷.Comet：基于HTTP長連接”服務器推”技術(shù)[EB/OL].IBM DeveloperWorks 中國. http：//www.ibm.com/developerworks/cn/ web/wa-lo-comet/，2007-08-31.

[7] 陳航.基于服務器推送技術(shù)和XMPP的Web IM系統(tǒng)實現(xiàn)[J].計算機工程與設計，2010（5）：925-928.

[8] Ian Paterson， Peter Saint-Andre， Lance Stout， Winfried Tilanus. XEP-0206： XMPP Over BOSH[EB/OL].（ 2014-02-10）.http：//xmpp.org/extensions/xep-0206.html.

[9] Ignite Realtime：Openfire Server[EB/OL].（2014-04-01）.http：//www.igniterealtime.org/projects/openfire/.

[10] Jack Moffitt.Strophe.js[EB/OL]（2013-12-19）.http：//strophe.im/strophejs/.

[11] 鄒奕婷.B/S模式下基于Jabber的IM系統(tǒng)的構(gòu)建方法[J].計算機應用與軟件，2008，25（12）：196-198.

[12] Jack Moffitt.XMPP高級編程：使用JavaScript和jQuery[M].北京：清華大學出版社，2011.endprint

3） 彈出窗口進行交流時，可根據(jù)需要，向商鋪發(fā)送相關(guān)消息：如用戶所關(guān)注的商品等信息。

3.2 主要處理步驟實現(xiàn)

IM Web客戶端使用Strophe庫和jQuery框架進行設計[11-12]。

1） 使用Strophe庫建立與服務端的連接；

var conn = new Strophe.Connection（'/http-bind'）；

conn.connect（data.jid， data.password， function（status）{

if （status === Strophe.Status.CONNECTED）{

$（document）.trigger（'connected'）；

}else if（status=== Strophe.Status.DISCONNECTED）{

$（document）.trigger（'disconnected'）；

}

}）；

//其中function（status）為連接成功后的回調(diào)函數(shù)，此處根據(jù)連接狀態(tài)調(diào)用對應的函數(shù)進行處理。

2） 添加客戶與店主為好友

var iq=$iq（{type： "set"}）.c（"query"，{xmlns：

"jabber：iq：roster"}）.c（"item"，data）；

conn.sendIQ（iq）；

var subs=$pres（{to：data.jid， "type"："substribe"}）；

3） 連接成功后，注冊回調(diào)函數(shù)，用于處理接收到的消息；

conn.addHandler（onMessage， null， 'message'， null，null，null）；

//其中onMessage為回調(diào)函數(shù)，用于處理對接收到的消息的顯示等操作。

4） 消息的發(fā)送處理；

var reply = $msg（{to： toId， from： fromId ， type： 'chat'}）.cnode

（Strophe.xmlElement（'body'， '' ，msg））；

connection.send（reply.tree（））； //發(fā)送消息

5） 關(guān)閉連接；

connection.disconnect（）；

3.3 IM Web客戶端運行效果

1） 電子商務網(wǎng)站頁面，嵌入IM Web客戶端的鏈接，如圖4所示：

2） 用戶登錄頁面

3） IM Web客戶端運行效果

當客戶點擊“與商鋪用戶溝通”按鈕時，彈出“用戶登錄”窗口登錄到IM系統(tǒng)，自動與商鋪用戶建立好友關(guān)系，并向商鋪用戶發(fā)送相關(guān)信息，商鋪用戶自動回復“您好！歡迎光臨”等信息，建立即時通信。運行效果如圖6所示：

4 結(jié)束語

目前，即時通信軟件已成為各大電子商務企業(yè)必備的與用戶進行實時溝通的工具，采用開放的XMPP協(xié)議進行開發(fā)成為大部分電商企業(yè)的首選。

本文詳細分析XMPP、BOSH等協(xié)議特性，采用BOSH協(xié)議進行設計開發(fā)IM系統(tǒng)，并選用開源XMPP Server（Openfire）軟件進行服務器端二次開發(fā)設置，選用Strophe的js庫完成面向Web頁面的IM客戶端開發(fā)。本系統(tǒng)的開發(fā)實現(xiàn)對電子商務網(wǎng)站應用開發(fā)Web IM系統(tǒng)提供參考。

參考文獻：

[1] Wikipedia.IM[EB/OL] （2014-03-26）.http：//en.wikipedia.org/wiki/Instant_messaging.

[2] Peter S A.XMPP Core RFC3920[EB/OL].http：//www.ietf.org/rfc/rfc3920.txt.

[3] Saint-Andre P. RFC3921 Extensible Messaging and PresenceProtocol（XMPP）：InstantMessagingandPresence，IETFproposedstandard[S].2004.

[4] XEP-0124：Bidirectional-streams Over Synchronous HTTP （BOSH） [EB/OL]. http：//xmpp.org/extensions/xep-0124.html

[5] Jefferey Porter.Active AJAX based live dashboards[EB/OL].http：// www.qenet.co.uk/warwick/whitepaper-pushTech.pdf，2007-02-21.

[6] 周婷.Comet：基于HTTP長連接”服務器推”技術(shù)[EB/OL].IBM DeveloperWorks 中國. http：//www.ibm.com/developerworks/cn/ web/wa-lo-comet/，2007-08-31.

[7] 陳航.基于服務器推送技術(shù)和XMPP的Web IM系統(tǒng)實現(xiàn)[J].計算機工程與設計，2010（5）：925-928.

[8] Ian Paterson， Peter Saint-Andre， Lance Stout， Winfried Tilanus. XEP-0206： XMPP Over BOSH[EB/OL].（ 2014-02-10）.http：//xmpp.org/extensions/xep-0206.html.

[9] Ignite Realtime：Openfire Server[EB/OL].（2014-04-01）.http：//www.igniterealtime.org/projects/openfire/.

[10] Jack Moffitt.Strophe.js[EB/OL]（2013-12-19）.http：//strophe.im/strophejs/.

[11] 鄒奕婷.B/S模式下基于Jabber的IM系統(tǒng)的構(gòu)建方法[J].計算機應用與軟件，2008，25（12）：196-198.

[12] Jack Moffitt.XMPP高級編程：使用JavaScript和jQuery[M].北京：清華大學出版社，2011.endprint