通过前面的简单分析,下面正式进入视频聊天室的设计开发阶段。根据我以前开发管理软件的经验,我们从基础模块开始,首先设计和开发后台功能模块,实现基本的用户注册和通信接口等相关功能。
聊天室需求简单,主要就一张表用来存储用户注册资料,当用户登陆聊天室的时候,则通过通信接口来验证用户。SQL脚本如下:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
USE
[
ChatRoom
]
GO
/*
***** 对象: Table [dbo].[UserInfo] 脚本日期: 05/16/2009 16:45:53 *****
*/
SET
ANSI_NULLS
ON
GO
SET
QUOTED_IDENTIFIER
ON
GO
SET
ANSI_PADDING
ON
GO
CREATE
TABLE
[
dbo
]
.
[
UserInfo
]
(
[
ID
]
[
int
]
IDENTITY
(
1
,
1
)
NOT
NULL
,
[
UserName
]
[
varchar
]
(
50
)
NULL
,
[
NickName
]
[
varchar
]
(
50
)
NOT
NULL
,
[
Password
]
[
varchar
]
(
50
)
NOT
NULL
,
[
QQ
]
[
varchar
]
(
20
)
NULL
,
[
RegTime
]
[
datetime
]
NULL
,
CONSTRAINT
[
PK_UserInfo
]
PRIMARY
KEY
CLUSTERED
(
[
ID
]
ASC
)
WITH
(PAD_INDEX
=
OFF
, STATISTICS_NORECOMPUTE
=
OFF
, IGNORE_DUP_KEY
=
OFF
, ALLOW_ROW_LOCKS
=
ON
, ALLOW_PAGE_LOCKS
=
ON
)
ON
[
PRIMARY
]
)
ON
[
PRIMARY
]
GO
SET
ANSI_PADDING
OFF
GO
本案例开发的通信接口采用WebService提供,考虑到只是做一些基本的通信加上本文重在于演示,所以就不去使用使用诸如FluorineFx之类的通信网关了。如有对FluorineFx感兴趣的朋友可以浏览以下文章:《Flex与.NET互操作系列文章》
数据访问通过Linq To Sql实现,对外提供WebService接口,Flex通过WebService和.NET通信达到数据交互的目的。
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
namespace
ChatRoomService
{
///
<summary>
///
CRService 的摘要说明
///
</summary>
[WebService(Namespace
=
"
http://tempuri.org/
"
)]
[WebServiceBinding(ConformsTo
=
WsiProfiles.BasicProfile1_1)]
[ToolboxItem(
false
)]
//
若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
//
[System.Web.Script.Services.ScriptService]
public
class
CRService : System.Web.Services.WebService
{
private
static
ChatRoomDataContext ctx
=
new
ChatRoomDataContext();
[WebMethod]
public
string
HelloWorld()
{
return
"
Hello World
"
;
}
///
<summary>
///
用户登录
///
</summary>
///
<param name="UserName"></param>
///
<param name="Password"></param>
///
<returns></returns>
[WebMethod]
public
UserInfo Login(
string
UserName,
string
Password)
{
List
<
UserInfo
>
list
=
ctx.UserInfo.Where(u
=>
u.UserName
==
UserName).Where(p
=>
p.Password
==
Password).ToList();
if
(list.Count
>
0
)
return
list[
0
];
return
null
;
}
///
<summary>
///
用户注册
///
</summary>
///
<param name="info"></param>
///
<returns></returns>
[WebMethod]
public
string
Register(
string
infos)
{
string
[] info
=
infos.Split(
'
|
'
);
UserInfo userInfo
=
new
UserInfo
{
UserName
=
info[
0
],
Password
=
info[
1
],
NickName
=
info[
2
],
QQ
=
info[
3
],
RegTime
=
DateTime.Now
};
List
<
UserInfo
>
list
=
ctx.UserInfo.Where(n
=>
n.UserName
==
userInfo.UserName).ToList();
if
(list.Count
>
0
)
return
string
.Format(
"
{0}|{1}
"
,
"
Error
"
,
"
用户
"
+
userInfo.UserName
+
"
已经存在
"
);
try
{
ctx.UserInfo.InsertOnSubmit(userInfo);
ctx.SubmitChanges();
return
"
Success
"
;
}
catch
{
return
"
Error
"
;
}
}
}
}
由于是直接使用WebService通信,ActionScript对象和C#对象之间的序列化问题,上面就直接以字符传的形式返回。有了通信接口,下面就可以做用户注册和登录的工作了。在Flex客户端全部通过<mx:WebService>组件和WebService通信,注册的完整代码如下:
Flex注册界面完整代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="400" height="282" showCloseButton="true"
close="closeWindow(event)" fontSize="12">
<mx:WebService id="ctService" wsdl="http://localhost:1535/CRService.asmx?wsdl">
<mx:operation name="Register" result="onRegisterResult(event)" fault="onRegisterFaile(event)">
</mx:operation>
</mx:WebService>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flex.chatroom.vo.UserInfo;
import mx.rpc.events.ResultEvent;
import mx.managers.PopUpManager;
private function onRegister(evt:MouseEvent):void
{
var info:UserInfo = new UserInfo();
info.UserName = this.txtUserName.text;
info.Password = this.txtPassword.text;
info.NickName = this.txtNickName.text;
info.QQ = this.txtQQ.text;
var infos:String=info.UserName+"|"+info.Password+"|"+info.NickName+"|"+info.QQ;
this.ctService.Register(infos);
}
private function onRegisterResult(evt:ResultEvent):void
{
var result:String = evt.result.toString();
var arr:Array = result.split('|');
if(arr.length>1)
{
Alert.okLabel="确 定";
Alert.show(arr[1],"系统提示");
}
if(arr[0]=="Success")
{
Alert.okLabel="确 定";
Alert.show("恭喜你,注册成功!","系统提示");
}
else
{
Alert.okLabel="确 定";
Alert.show("注册失败,请重试!","系统提示");
}
}
private function onRegisterFaile(evt:Event):void
{
Alert.okLabel="确 定";
Alert.show("注册失败,请重试!","系统提示");
}
private function closeWindow(evt:Event):void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Form y="2" x="2" width="99%">
<mx:FormHeading label="新用户注册"/>
<mx:FormItem label="用户名:">
<mx:TextInput id="txtUserName" />
</mx:FormItem>
<mx:FormItem label="密 码:">
<mx:TextInput id="txtPassword" />
</mx:FormItem>
<mx:FormItem label="呢 称:">
<mx:TextInput id="txtNickName" />
</mx:FormItem>
<mx:FormItem label="Q Q:">
<mx:TextInput id="txtQQ" />
</mx:FormItem>
<mx:FormItem>
<mx:HBox>
<mx:Button label="注 册" click="onRegister(event)" fontWeight="normal" width="95"/>
<mx:Button label="取 消" click="closeWindow(event)" fontWeight="normal"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:TitleWindow>
用户登录同样是使用WebService通信进行数据库验证,实现代码大致如下:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
<
mx:WebService id
=
"
ctService
"
wsdl
=
"
http://localhost:1535/CRService.asmx?wsdl
"
>
<
mx:operation name
=
"
Login
"
result
=
"
onLoginRusult(event)
"
fault
=
"
onLoginFaile(event)
"
>
</
mx:operation
>
</
mx:WebService
>
private
function onLogin():
void
{
this
.ctService.Login(
this
.txtUserName.text,
this
.txtPassword.text);
}
private
function onLoginRusult(evt:ResultEvent):
void
{
if
(evt.result
!=
null
)
{
//
显示自己的视频
//
displayCameraSelf();
//
连接FMS服务器发布自己的视频流
publishNc
=
new
NetConnection();
publishNc.connect(
"
rtmp://localhost/ChatRoom
"
);
so
=
SharedObject.getRemote(
"
ChatSO
"
,publishNc.uri,
false
);
publishNc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
so.addEventListener(SyncEvent.SYNC,onSyncHandler);
so.connect(publishNc);
myUserName
=
evt.result.UserName;
myNickName
=
evt.result.NickName;
this
.loginPanel.visible
=
false
;
this
.chatRoomPanel.visible
=
true
;
ChatRoomViewStack.selectedChild
=
chatRoomPanel;
}
else
{
Alert.okLabel
=
"
确 定
"
;
Alert.show(
"
登录失败!
"
,
"
系统提示
"
);
}
}
通信主要就这两个功能点,都比较简单,关于Flex与WebServie通信我以前也写过两篇文章在《Flex与.NET互操作系列文章》里,不熟悉的的朋友可以先看看通信方面的实现。
本文就先介绍到这里,下一篇将介绍聊天室的详细开发,包括视频、语音、文字聊天的实现等相关知识点。