Flex2基于XMPP的chat程序 (一)

先解释几个名词
XMPP: (eXtensible Messaging and Presence Protocol) XMPP的前身是Jabber，一个开源形式组织产生的网络即时通信协议。XMPP目前被IETF国际标准组织完成了标准化工作。是目前主流的四种IM（IM：instant messaging,即时消息）协议之一，其他三种分别为：IMPP、PRIM、SIP(SIMPLE)。

XIFF: XMPP Implementation For Flash. (一个ActionScript的XMPP类库)

Openfire: (原名Wildfire) 基于Java的开源实时协作（RTC）服务器，使用XMPP（Jabber）协议。

Google推出的Google Talk就是基于XMPP的IM软件。所以我想使用Flex也开发一个基于XMPP的聊天程序。现在已经有了很好的开源服务器Openfire http://www.igniterealtime.org/projects/openfire/index.jsp 支持中文哦。
另外还有一套XIFF API，专为flash开发XMPP应用，但现在XIFF2.0是用AS2写的，而Flex2是基于AS3的，幸运的是有人已经写了一个基于AS3的实现。http://svn.igniterealtime.org/svn/repos/xiff/branches/xiff_as3_flexlib_beta1/

要开发Flex + Openfire的系统，首先要安装Openfire服务器，安装很简单，具体看安装手册http://www.igniterealtime.org/builds/openfire/docs/latest/documentation/install-guide.html

安装在本机的Openfire启动后，可以通过http://localhost:9090  管理

好，现在开始开发Flex客户端。因为现在XIFF_AS3的文档几乎没有，所以只能通过XIFF2的例子，和Smack API(for java的)来学习。XIFF的核心是XMPPConnection，它基本是围绕flash.net.XMLSocket写的。首先创建一个Flex项目并引入 XIFF.swc

登录服务器比较简单
var connection : XMPPConnection = new XMPPConnection();
connection.server = 服务器名
connection.port = 服务器端口号
connection.username = 用户名
connection.password = 密码
connection.connect("flash");

下面是一个简单的小例子

xml 代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="initApp()">

    <mx:Script>
        [CDATA[
            import org.igniterealtime.xiff.events.RoomEvent;
            import mx.controls.Alert;
            import org.igniterealtime.xiff.events.MessageEvent;
            import org.igniterealtime.xiff.core.XMPPConnection;
            import org.igniterealtime.xiff.conference.Room;
            import org.igniterealtime.xiff.events.LoginEvent;
            import org.igniterealtime.xiff.data.*;

            public const SERVER_NAME : String = "wangcheng";
            public const CHATROOM : String = "chatRoom1";

            private var chatRoom : Room;
            private var connection : XMPPConnection;

            private function initApp():void {
                connection = new XMPPConnection();
                connection.addEventListener(LoginEvent.LOGIN, onLogin);
            }

            private function doLogin():void {
                if (!connection.isLoggedIn()) {
                    connection.username = username.text;
                    connection.password = password.text;
                    connection.server = SERVER_NAME;
                    connection.port = 5222;
                    connection.connect("flash");
                    if(connection.isLoggedIn()){
                        chatContent.htmlText += "Welcome " + username.text + "<br/>";
                    }
                } else {
                    connection.disconnect();
                }
            }

            private function onLogin(event):void {
                inputMsg.enabled = true;
                sendBtn.enabled = true;

                chatRoom = new Room( connection );
                chatRoom.setRoomJID(connection.getJID());
                chatRoom.roomName = CHATROOM;
                chatRoom.nickname = connection.username;
                chatRoom.conferenceServer = "conference." + SERVER_NAME;

                chatRoom.join();
                chatRoom.addEventListener(RoomEvent.GROUP_MESSAGE, groupMessage);
            }

            private function groupMessage(event):void {
                displayUserMessage(getNickName(event.data.from) , event.data.body );
            }

            private function getNickName(jid : String) : String {
                var name = jid.split("/")[1];
                if (name == null) {
                    name = "Message";
                }
                return name;
            }

            private function displayUserMessage(user:String, message:String) : void {

                var fontColor : String = "#002bd2";
                if (user == chatRoom.nickname) {
                    fontColor = "#8e2800";
                }

                chatContent.htmlText += "<font color='" + fontColor + "'><b>" + user + ":</b> " + message + "</font><br />";
            }

            private function sendMsg():void {
                if (inputMsg.text != "") {
                    chatRoom.sendMessage(inputMsg.text);
                    inputMsg.text="";
                }
            }

        ]]
    </mx:Script>


    <mx:Label x="10" y="10" text="UserName"/>
    <mx:TextInput id="username" x="80" y="8" width="92"/>
    <mx:Label x="180" y="10" text="Password"/>
    <mx:TextInput id="password" x="244" y="8" width="99" displayAsPassword="true"/>
    <mx:Button x="351" y="8" label="Login" click="doLogin()"/>
    <mx:TextArea id="chatContent" x="10" y="36" width="397" height="171"/>
    <mx:TextInput id="inputMsg" enabled="false" x="12" y="215" width="333" enter="sendMsg()" />
    <mx:Button id="sendBtn" enabled="false" x="353" y="215" label="Send" click="sendMsg()" />
</mx:Application>

 

参考

http://www.dgrigg.com/post.cfm/09/05/2006/XIFF-Actionscript-3-for-Flex-2

• 
• 描述: flexchat image
• 大小: 52.8 KB

• 查看图片附件

分享到：

关于 Flex Flash 一些有用的连接 | 使用prototype的Ajax.Updater更新带javasc ...

• 2007-09-17 19:01
• 浏览 12199
• 评论(14)
• 查看更多

评论

14 楼 feng_peng2011 2011-07-09  

你好  我用你的程序     可以正常运行,从服务器端可以看到用户已经登陆,可是对话的结果却总是显示不出来   服务器端显示脱机  怎么回事啊

  请楼主指教

13 楼 zhang_xueqin 2008-11-10  

connection.connect("flash");  --这句是什么意思，有人能帮忙解释一下吗，我在自己的机子上装了openfire，中间选择数据库我选的自带的，这个和后面测试没影响吧，我的问题也是连不到服务器， private function onLogin(event):void 这个都不执行，没错误提示，能帮我解答一下哈。

12 楼 liuqiang 2008-06-17  

现在应该导入的包是：import org.jivesoftware.xiff.XXX

11 楼 wangcheng 2008-03-13  

Flex2基于XMPP的chat程序(二)
http://wangcheng.iteye.com/blog/153548

10 楼 kenshinhu 2007-11-20  

当用了smack后，发觉OPENFIRE是没有问题的。。。
如今用JAVA连OPENFIRE也可以，但用XIFF3就不可以了。
你的OPENFIRE的型号是多少？是不是3.4.1?

9 楼 wangcheng 2007-11-20  

登录后，在openfire的控制台应该也能看到用户登录。

8 楼 kenshinhu 2007-11-19  

新建用户后，还是CONNECTION不行。。
                  var connection:XMPPConnection;
                  connection=new XMPPConnection();
       connection.server="kenshinhu";
       connection.port=5222;
       connection.username="abcd";
       connection.password="1234";                     
       trace(connection.connect("flash"));
       if(connection.isLoggedIn()){
       trace("is login");
       }else{
       trace("isn't login");
       }
我是用上面的代码来连接的。
SERVER_NAME是对应OPENFIRE服务上的服务器设置里的服务器名称对吗？我在OPENFIRE上也建了相应的用户了。。
但最后trace出来的值是isn't login咯。。。请求是不是还有别的要设置？

7 楼 wangcheng 2007-11-15  

需要在OPENFIRE新建用户，其实OPENFIRE的用户表就在数据库里。

6 楼 kenshinhu 2007-11-14  

请问在OPENFIRE上怎样设置，要不要新建用户？？
我试过CONNECTION去OPENFIRE，在和OPENFIRE下设的用户和密码一样下，也连不上，请问是怎样一回事？

5 楼 wangcheng 2007-09-25  

呵呵，谢谢楼上几位，有时间我会继续的。大家共同学习。

4 楼 davidzhang 2007-09-25  

谢谢,跟进中~~~~

像我这种脾气,心里的事得憋三天那是多么痛苦啊!呵呵

3 楼 goinggone 2007-09-25  

@davidzhang,
"新会员不能留言和评论" - 同感。三天后才能留言，使我见过的最恶心的限制。
可以到这里看看
http://www.igniterealtime.org/community/community/developers/xiff?start=0&view=discussions
里面有些例子。

2 楼 goinggone 2007-09-25  

wangcheng,多谢好文章，期待后续。

1 楼 davidzhang 2007-09-24  

你好,前几天路过,看到你的这篇文章.很感兴趣,于是就赶快注册,为了给你留言,可是这个破地方新会员不能留言和评论,很愤怒,但为了知识和技术,把这件事埋藏在心里三天之久.

我按着你的方法做了,又花了一些的时间研究了openfire和关于xiff,很遗憾没有正式为as3的版本.

我花了一个下午来实验你的方法,代码里有一些警告和错误,已经修改,可以正常运行,从服务器端可以看到用户已经登陆,可是对话的结果却总是显示不出来.在velloff的代码里面debug,发现你的程序的流程有一些问题,可惜velloff的那个as3的xiff没有说明文档和例子,未果~~~

带着多样的心情,给你留言,希望能有更好的机会一起探讨~~

期待你的下一篇文章.

我的hotmail和email是:[e-mail]