FMS案例开发--视频聊天室（三）

      本文要介绍的内容主要有利用SharedObject来实现聊天文字聊天和在线用户的列表，以及实现语音视频聊天等。

      前一篇文章介绍了实现用户注册和登录的功能，本文接着介绍用户注册并成功登录后的相关功能开发。首先分析下功能，用户登录成功要做四件事：

      1、显示自己的视频到聊天界面(作用不大，自己看而已)

      2、发布自己的视频和语音数据到FMS服务器（这个作用很大，别人则根据你发布的数据查看你的视频等）

      3、将自己的基本信息写如共享对象，实现在线用户列表。

      4、通过共享对象来实现文字聊天(本文只是为了演示方便，实际开发中应尽量使用Client-Server之间的方法调用实现)

      OK，有了上面的分析，接下来一步一步的实现这些功能。显示自己的视频到界面很简单，在以前的相关文章里都有使用到。

private  function displayCameraSelf(): void
{
     // 显示自己的视频
    myCamera  =  Camera.getCamera();
     if (myCamera  !=   null )
    {
         this .twoVideo.attachCamera(myCamera);
    }
     else
    {
        Alert.okLabel = " 确 定 " ;
        Alert.show( " 没检测到视频摄像头！ " , " 系统提示 " );
    }
}

 

      发布视频数据到FMS很简单，既通过NetConnection和NetStream就可以完成，需要注意的是，在发布视频流的时候视频流的命名规则采用的用户名，也就是用户名是什么，他发布的视频流就叫什么名字，其他用户要查看他的视频就是通过他的用户名命名的流名来查看。

private  function onLoginRusult(evt:ResultEvent): void
{
     if (evt.result  !=   null )
    {
         // 显示自己的视频
        displayCameraSelf();
        
         // 连接FMS服务器发布自己的视频流
        publishNc  =   new  NetConnection();
        publishNc.connect( " rtmp://localhost/ChatRoom " );
        publishNc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
        publishNc.client  =   this ;
        
        playNc  =   new  NetConnection();
        playNc.connect( " rtmp://localhost/ChatRoom " );
        playNc.addEventListener(NetStatusEvent.NET_STATUS,onPlayStatusHandler);
        playNc.client  =   this ;
        
        so  =  SharedObject.getRemote( " ChatSO " ,publishNc.uri, false );
        so.addEventListener(SyncEvent.SYNC,onSyncHandler);    
        so.connect(publishNc);        
        so.client  =   this ;                
        
        userSO  =  SharedObject.getRemote( " UserSO " ,publishNc.uri, false );
        userSO.connect(publishNc);
        userSO.client  =   this ;
        
        
        UserName  =  myUserName  =  evt.result.UserName;
        NickName  =  myNickName  =  evt.result.NickName;
        
         // 将当前用户添加到共享对象
        var uarray:ArrayCollection;
        var o:Object  =   new  Object();
        o.UserName = myUserName;
        o.NickName = myNickName;
        
         if (userSO.data.UserList  ==   null )
        {
            uarray  =   new  ArrayCollection();
        }
         else
        {
            uarray  =  userSO.data.UserList  as  ArrayCollection;
    
        }
        var temp:ArrayCollection  =   new  ArrayCollection();
        convertArrayCollection(temp,uarray);
        temp.addItem(o);
        userSO.setProperty( " UserList " ,temp);
    
         this .loginPanel.visible  =   false ;
         this .chatRoomPanel.visible = true ;
        ChatRoomViewStack.selectedChild  =  chatRoomPanel;
    }
     else
    {
        Alert.okLabel = " 确 定 " ;
        Alert.show( " 登录失败！ " , " 系统提示 " );
    }
}

private  function onNetStatusHandler(evt:NetStatusEvent): void
{
     if (evt.info.code  ==   " NetConnection.Connect.Success " )
    {
         // 连接成功则发布自己的流到FMS
        publishNs  =   new  NetStream(publishNc);
        publishNs.attachAudio(myMic);
        publishNs.attachCamera(myCamera);
        publishNs.client = this ;
         // 以用户名作为视频流名,直接通过用户名连接对方的流
        publishNs.publish(myUserName, " live " );    
    }
}

 

      默认自己和自己对聊，只有从在线用户列表里选择了用户才和对应的人进行视频聊天，也就是说初始化为自己连接到自己的视频流。实现代码如下所示：

private  function onPlayStatusHandler(evt:NetStatusEvent): void
{
     if (evt.info.code  ==   " NetConnection.Connect.Success " )
    {
        playNs  =   new  NetStream(playNc);
        var v:Video  =   new  Video();
        v.width  =   320 ;
        v.height =   240 ;
        v.attachNetStream(playNs);
        playNs.play(UserName, " live " );
         this .oneVideo.addChild(v);
    }
}

      连接到自己发布的视频流，将视频流显示到界面上。

      文字聊天使用的共享对象做的大厅聊天，实现很简单，关于共享对象实现文字聊天详细可以查看《使用远程共享对象(SharedObject)实现多人时时在线聊天(Flex | Flash) 》。

/* *
 * 发送聊天消息
 *  */
private  function sendMessage(evt:MouseEvent): void
{
    var tempCollection:ArrayCollection  =   new  ArrayCollection();
     if (so.data.msgCollection  !=   null )
    {
        convertArrayCollection(tempCollection,so.data.msgCollection  as  ArrayCollection);
    }
    var msg:Message  =   new  Message();
    msg.NickName  =  myNickName;
    msg.Context  =   this .txtMessage.text;
    tempCollection.addItem(msg);
    
     // 更新远程共享对象中的属性值
    so.setProperty( " msgCollection " ,tempCollection);
    
     this .txtMessage.text = "" ;
}

private  function onSyncHandler(evt:SyncEvent): void
{
     if (so.data.msgCollection  !=   null )
    {
         // 首次登录进来异步获取消息的时候不显示登录之前的消息
         if (isFirstLogin)
        {
            so.setProperty( " msgCollection " , null );
            isFirstLogin  =   false ;
        }
         else
        {
            var tempCollection:ArrayCollection  =   new  ArrayCollection();
            convertArrayCollection(tempCollection,so.data.msgCollection  as  ArrayCollection);
            
             this .displayMessage.text = "" ;
             for (var index: int = 0 ;index < tempCollection.length;index ++ )
            {
                var message:Object  =  tempCollection.getItemAt(index);
                var displayMessage:String  =  message.NickName + " 说: " + message.Context;
                 this .displayMessage.text  +=  displayMessage  +   " \n " ;
            }
        }
    }
     this .displayMessage.verticalScrollPosition = this .displayMessage.maxVerticalScrollPosition;
}

 

      前面用户登录的时候已经将用户信息写入了共享对象，用户在线列表只需要将共享对象的数据读出来，显示在界面上就OK，这里使用tree控件来呈现数据。

 

private  function init(): void
{
    nc  =   new  NetConnection();
    nc.connect( " rtmp://localhost/ChatRoom " );
    nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
    nc.client  =   this ;
    
    so  =  SharedObject.getRemote( " UserSO " );
    so.addEventListener(SyncEvent.SYNC,onSyncHandler);
    so.connect(nc);
    so.client  =   this ;
}

private  function onNetStatusHandler( event :NetStatusEvent): void
{
     if ( event .info.code == " NetConnection.Connect.Success " )
    {
         if (so.data.UserList != null )
        {
            var uarray:Array  =  so.data.UserList  as  Array;
             this .userTree.dataProvider  =  uarray;
        }
    }
}

private  function onSyncHandler( event :SyncEvent): void
{
     if (so.data.UserList != null )
    {
        var uarray:Array  =  so.data.UserList  as  Array;
         this .userTree.dataProvider  =  uarray;
    }
}

 

 

相关文章连接:

      FMS案例开发--视频聊天室（一）

      FMS案例开发--视频聊天室（二）

      FMS案例开发--视频聊天室（三）

 

版权说明

  本文属原创文章，欢迎转载，其版权归作者和博客园共有。  

  作      者：Beniao

 文章出处：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/