65.9K
CodeProject 正在变化。 阅读更多。
Home

AJAX 聊天应用程序

faisal 121
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (2投票s)

2012年2月11日

Apache

5分钟阅读

viewsIcon

44367

downloadIcon

4096

该项目说明了如何设计一个简单的 AJAX 网页聊天应用程序。

CSASPNETAJAXWebChat 概述

用途

该项目说明了如何设计一个简单的 AJAX 网页聊天应用程序。

我们在客户端使用了 jQuery 和 ASP.NET AJAX，在服务器端使用了 Linq to SQL。在这个示例中，我们可以创建一个聊天室并邀请其他人加入房间开始聊天。

演示示例。

直接打开 CSASPNETAJAXWebChat.sln，展开 WebChat Web 应用程序节点，然后按 F5 键测试应用程序。如果您想进行更深入的测试，请按照下面的演示步骤操作。

步骤 1：按 F5 打开 default.aspx。

步骤 2：默认情况下，我们可以看到列表中有两个聊天室，您可以点击“创建聊天室”按钮来创建您自己的聊天室。在此按钮之前，我们可以看到一个文本框，可以在加入房间之前输入我们的聊天昵称。

步骤 3：点击每行末尾的任意“加入”按钮。您将看到一个弹出聊天室窗口。

步骤 4：打开一个新的浏览器并执行相同的步骤，以另一个用户的身份加入同一个聊天室。

步骤 5：当我们输入一条消息时，我们将看到两个聊天室窗口都会显示消息。

代码逻辑

步骤 1。创建一个 ASP.NET Web 应用程序。在此示例中，它名为“WebChat”。

步骤 2。右键单击 App_Data 目录，然后单击添加 -> 新建项 -> SQL Server 数据库。在此示例中，它名为“SessionDB.mdf”。

步骤 3。打开数据库文件并创建四个表。

  • tblChatRoom：存储聊天室数据
  • tblMessagePool：临时存储聊天消息数据
  • tblSession：存储用户会话数据
  • tblTalker：存储在聊天室中的用户数据

有关这些表的详细列信息，请参阅本示例中的 SessionDB.mdf。

步骤 4。创建一个新目录，“Data”。右键单击该目录，然后单击添加 -> 新建项 -> Linq to SQL 类。(如果找不到该模板，请点击左侧树视图的 Data 节点。)在此示例中，它为 SessionDB.dbml。

步骤 5。打开 SessionDB.dbml 并双击 SessionDB.mdf，您将在服务器资源管理器中看到数据库。展开 SessionDB.mdf，展开 Tables 文件夹，然后选择这四个表，并将它们全部拖到 SessionDB.dbml 的设计器上。

步骤 6。创建一个新目录，“Logic”。我们需要创建一些类文件

  • ChatManager.cs：我们有一些 static 方法，用于通过 Linq 控制数据库中的数据。
  • ChatRoom.cs：这是一个 DataContract ，用于通过 WCF 服务将聊天室数据发送到客户端。
  • Message.cs：这是一个 DataContract ，用于通过 WCF 服务将消息数据发送到客户端。
  • RoomTalker.cs：这是一个 DataContract ，用于通过 WCF 服务将一个聊天室中的说话者数据发送到客户端。

有关这些类的详细信息，请参阅本示例中的这四个文件。

步骤 7。创建一个新目录，“Services”。右键单击该目录，然后单击添加 -> 新建项 -> AJAX 启用的 WCF 服务。在此示例中，它为 Transition.svc。

为此类添加这两个属性，以确保允许会话。

[ServiceContract(Namespace = "http://CSASPNETAJAXWebChat", 
        SessionMode = SessionMode.Allowed)] 
[AspNetCompatibilityRequirements(RequirementsMode = 
        AspNetCompatibilityRequirementsMode.Allowed)]

在此文件中，我们创建了一些 WCF 服务方法，客户端可以调用这些方法执行操作。

有关这些类的详细信息，请参阅本示例中的 Transition.svc。

步骤 8。创建一个新目录，“Scripts”。右键单击该目录，然后单击添加 -> 新建项 -> Jscript 文件。我们需要创建一些 JS 文件从客户端调用 WCF 服务。并且有一些页面逻辑代码用于此示例；这些可以由用户需求定义。ASP.NET AJAX 允许我们添加一些服务引用。因此 ScriptManager 将自动生成客户端服务契约脚本。而我们需要做的就是像在服务器端一样调用服务方法。例如，我们调用 Transition.svc 中的 LeaveChatRoom 方法，我们可以这样编写 JavaScript 函数

csaspnetajaxwebchat.transition.LeaveChatRoom(RoomID,SuccessCallBack,FailCallBack);
  • csaspnetajaxwebchat 是此应用程序的命名空间
  • transition 是服务名称
  • LeaveChatRoom 是方法名称

    因为此方法有一个参数，RoomID 代表该参数，如果我们有一个或多个参数，只需将它们写在 SuccessCallBack 之前。

  • SuccessCallBack 是服务成功调用时要执行的函数。
  • FailCallBack 是服务调用失败时要执行的函数。

    有关这些脚本函数的更多详细信息，请参阅本示例中的文件（chatbox.js、chatMessage.js、chatRoom.js）。

步骤 9。打开 Default.aspx （如果不存在 Default.aspx，请创建一个。）创建一个 ScriptManager 控件并添加一个服务引用和一个脚本引用，如下所示

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Services>
     <asp:ServiceReference Path="~/Services/Transition.svc" />
 </Services>
 <Scripts>
     <asp:ScriptReference Path="~/Scripts/chatbox.js" />
 </Scripts>
</asp:ScriptManager>

在 Head 块中，添加一些来自 CDN 的 JS 和 CSS 引用。

<script type="text/javascript" 
src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" 
src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/chatRoom.js"></script>
<link rel="Stylesheet" type="text/css" 
href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/dark-hive/jquery-ui.css" />

我们使用这些引用使此示例的代码编写更容易，外观也更漂亮。

还有一些其他 UI 标记，请参阅本示例中的 Default.aspx。

有关 CDN 的更多详细信息，请查看本 ReadMe 文件末尾“引用”部分列出的链接。

步骤 10。创建一个新的网页。在此示例中，它为“ChatBox.aspx”。在该页面中，我们创建了一些 UI 控件来发送和接收消息。有关更多详细信息，请参阅本示例中的 ChatBox.aspx。

步骤 11。一切准备就绪，测试应用程序，希望您能得到一个微笑。

参考文献

© . All rights reserved.