电子商务网站Web IM系统设计与实现

邵孟良

摘要：针对新兴电子商务网站首选开放的XMPP协议作为IM系统的需求，分析XMPP、BOSH协议及技术特点，给出Web IM系统总体架构设计，并选择Strophe.js库对Web IM系统客户端进行详细的设计与实现。

关键词：Web IM；XMPP协议；BOSH协议；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

随着互联网的飞速发展，Internet上的用户数成几何级数增长，越来越多的人加入到以网络为媒介的网际交流活动中，其中即时通信（Instant Messaging，简称IM[1]）工具尤其受到网络用户的青睐，它能够实时的传输文本、图片、文件，以及语音、视频等，因而成为网络用户使用频度最高的软件之一。

由于即时通信系统的众多优势，己逐步成为网络经济新的增长点，并在网络经济时代的各个新兴行业中不断壮大。目前，各大软件厂商都已纷纷加入IM的竞争行列，先后推出了自己的IM产品，出现了多元化的竞争状态。由于出于各自利益的考虑，大部分IM产品采用了私有的通信协议，不开放，这在一定程度上阻碍了不同即时通信系统之间的互通。

对于新兴的电子商务企业，急需提供IM服务以方便与客户之间的即时交流，若使用已有的厂商提供的IM产品，则受制于人，不方便业务的快速发展。所以选择开放协议、开源架构进行二次开发，将是这些电商企业的首选。该文拟结合“一呼百应电子商务平台”，选择XMPP、BOSH协议开发嵌入电商平台的Web IM系统。

1 相关协议介绍

1.1 XMPP协议

XMPP（Extensible Messaging and Presence Protocol） [2-3]可扩展消息与出席协议，是一种基于可扩展标记语言XML的开放式协议。XMPP协议可用来处理实时性的消息请求和响应服务，利用它还可以实现不同服务的即时通信系统间互相通信。

1.2 BOSH协议

BOSH（Bidirectional-streams Over Synchronous HTTP， 基于同步HTTP的双向流）[4]是一种传输协议。它可以利用同步的HTTP协议模拟两个实体（例如客户端-服务端）双向流传输，而不需要轮询或异步组件。

对于那些同时需要“推”和“拉”技术的应用程序，BOSH明显比AJAX[5]等基于HTTP协议的技术更高效，更节约资源。相比HTTP轮训技术（如Comet[6-7]技术），BOSH有着更高的效率和更低的延迟。到目前为止，BOSH主要用于Jabber/XMPP客户端-服务器之间的数据传输（如web端和手机客户端之间的通讯）。然而BOSH并非为XMPP定制的，它也可以用于别的传输。

BOSH定义了相关标准，用于XMPP数据传输，这个方案主要是为了解决HTTP协议无法保持TCP长连接的问题。其流程如图1所示。

2 系统总体设计

系统总体架构如图2所示。

1） 系统集成一呼百应B2B电子商务平台，提供pc到pc、pc到android、android到android多种平台交流方式，让用户随时随地跟踪掌握电子商务平台客户访问情况，及时沟通交流。

2） 发送给目标用户的消息，由发起用户经IM服务器转发给目标用户。

3） IM服务器采用Openfire进行二次开发部署。Openfire是采用Java开发，开源的实时协作（RTC）服务器，是基于开放的XMPP协议的IM服务器端的一个实现[9]。

4） 由于IM Web客户端嵌入到电子商务网页中，以便用户在浏览网页时随时与商家进行沟通交流，因此，需在Web服务器端处理IM Web客户端用户的相关操作以及与IM服务器的通信，实现与IM服务器的对接。为保证原有电子商务平台的独立性与安全性，本系统针对IM Web客户端的相关操作以及与IM服务器的对接采用部署专用的Web服务器，专门处理IM Web客户端的信息转发。

5） IM WEB客户端、IM手机客户端和IM PC客户端均可通过BOSH或XMPP Over BOSH与IM服务器连接。

3 IM Web客户端设计与实现

IM Web客户端与IM服务器的通信使用BOSH协议（XEP标准扩展规范：XEP-0124），客户端使用一个javascript的BOSH实现，本系统选择使用Strophe[10]库的js实现。

3.1 IM Web客户端处理流程

IM Web客户端处理流程如图3所示。

图3说明：

1） ①若用户已经登录到IM服务器，则跳到②；

2） 自动添加客户与店主为好友由Web服务器自动完成；endprint

3） 弹出窗口进行交流时，可根据需要，向商铺发送相关消息：如用户所关注的商品等信息。

3.2 主要处理步骤实现

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）为连接成功后的回调函数，此处根据连接状态调用对应的函数进行处理。

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） 连接成功后，注册回调函数，用于处理接收到的消息；

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

//其中onMessage为回调函数，用于处理对接收到的消息的显示等操作。

4） 消息的发送处理；

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

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

connection.send（reply.tree（））； //发送消息

5） 关闭连接；

connection.disconnect（）；

3.3 IM Web客户端运行效果

1） 电子商务网站页面，嵌入IM Web客户端的链接，如图4所示：

2） 用户登录页面

3） IM Web客户端运行效果

当客户点击“与商铺用户沟通”按钮时，弹出“用户登录”窗口登录到IM系统，自动与商铺用户建立好友关系，并向商铺用户发送相关信息，商铺用户自动回复“您好！欢迎光临”等信息，建立即时通信。运行效果如图6所示：

4 结束语

目前，即时通信软件已成为各大电子商务企业必备的与用户进行实时沟通的工具，采用开放的XMPP协议进行开发成为大部分电商企业的首选。

本文详细分析XMPP、BOSH等协议特性，采用BOSH协议进行设计开发IM系统，并选用开源XMPP Server（Openfire）软件进行服务器端二次开发设置，选用Strophe的js库完成面向Web页面的IM客户端开发。本系统的开发实现对电子商务网站应用开发Web IM系统提供参考。

参考文献：

[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长连接”服务器推”技术[EB/OL].IBM DeveloperWorks 中国. http：//www.ibm.com/developerworks/cn/ web/wa-lo-comet/，2007-08-31.

[7] 陈航.基于服务器推送技术和XMPP的Web IM系统实现[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系统的构建方法[J].计算机应用与软件，2008，25（12）：196-198.

[12] Jack Moffitt.XMPP高级编程：使用JavaScript和jQuery[M].北京：清华大学出版社，2011.endprint

3） 弹出窗口进行交流时，可根据需要，向商铺发送相关消息：如用户所关注的商品等信息。

3.2 主要处理步骤实现

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）为连接成功后的回调函数，此处根据连接状态调用对应的函数进行处理。

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） 连接成功后，注册回调函数，用于处理接收到的消息；

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

//其中onMessage为回调函数，用于处理对接收到的消息的显示等操作。

4） 消息的发送处理；

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

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

connection.send（reply.tree（））； //发送消息

5） 关闭连接；

connection.disconnect（）；

3.3 IM Web客户端运行效果

1） 电子商务网站页面，嵌入IM Web客户端的链接，如图4所示：

2） 用户登录页面

3） IM Web客户端运行效果

当客户点击“与商铺用户沟通”按钮时，弹出“用户登录”窗口登录到IM系统，自动与商铺用户建立好友关系，并向商铺用户发送相关信息，商铺用户自动回复“您好！欢迎光临”等信息，建立即时通信。运行效果如图6所示：

4 结束语

目前，即时通信软件已成为各大电子商务企业必备的与用户进行实时沟通的工具，采用开放的XMPP协议进行开发成为大部分电商企业的首选。

本文详细分析XMPP、BOSH等协议特性，采用BOSH协议进行设计开发IM系统，并选用开源XMPP Server（Openfire）软件进行服务器端二次开发设置，选用Strophe的js库完成面向Web页面的IM客户端开发。本系统的开发实现对电子商务网站应用开发Web IM系统提供参考。

参考文献：

[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长连接”服务器推”技术[EB/OL].IBM DeveloperWorks 中国. http：//www.ibm.com/developerworks/cn/ web/wa-lo-comet/，2007-08-31.

[7] 陈航.基于服务器推送技术和XMPP的Web IM系统实现[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系统的构建方法[J].计算机应用与软件，2008，25（12）：196-198.

[12] Jack Moffitt.XMPP高级编程：使用JavaScript和jQuery[M].北京：清华大学出版社，2011.endprint

3） 弹出窗口进行交流时，可根据需要，向商铺发送相关消息：如用户所关注的商品等信息。

3.2 主要处理步骤实现

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）为连接成功后的回调函数，此处根据连接状态调用对应的函数进行处理。

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） 连接成功后，注册回调函数，用于处理接收到的消息；

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

//其中onMessage为回调函数，用于处理对接收到的消息的显示等操作。

4） 消息的发送处理；

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

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

connection.send（reply.tree（））； //发送消息

5） 关闭连接；

connection.disconnect（）；

3.3 IM Web客户端运行效果

1） 电子商务网站页面，嵌入IM Web客户端的链接，如图4所示：

2） 用户登录页面

3） IM Web客户端运行效果

当客户点击“与商铺用户沟通”按钮时，弹出“用户登录”窗口登录到IM系统，自动与商铺用户建立好友关系，并向商铺用户发送相关信息，商铺用户自动回复“您好！欢迎光临”等信息，建立即时通信。运行效果如图6所示：

4 结束语

目前，即时通信软件已成为各大电子商务企业必备的与用户进行实时沟通的工具，采用开放的XMPP协议进行开发成为大部分电商企业的首选。

本文详细分析XMPP、BOSH等协议特性，采用BOSH协议进行设计开发IM系统，并选用开源XMPP Server（Openfire）软件进行服务器端二次开发设置，选用Strophe的js库完成面向Web页面的IM客户端开发。本系统的开发实现对电子商务网站应用开发Web IM系统提供参考。

参考文献：

[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长连接”服务器推”技术[EB/OL].IBM DeveloperWorks 中国. http：//www.ibm.com/developerworks/cn/ web/wa-lo-comet/，2007-08-31.

[7] 陈航.基于服务器推送技术和XMPP的Web IM系统实现[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系统的构建方法[J].计算机应用与软件，2008，25（12）：196-198.

[12] Jack Moffitt.XMPP高级编程：使用JavaScript和jQuery[M].北京：清华大学出版社，2011.endprint