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