`
javatoyou
  • 浏览: 1070138 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

使用ExtJS创建前端WebQQ界面

 
阅读更多

使用ExtJS创建前端WebQQ界面，使用ASP.NET处理数据存取，为了演示方便用Sqlite3存储数据。

功能概述：
实现了最基础的一对一的通讯功能，实时收发信息，离线保存信息。来信自动弹出窗口。
实现思路：
借鉴了早些年的聊天室思想。
获取聊天信息是客户端定时向服务器请求，按照发送的用户名来查询此用户是否有新信息。有信息则返回信息。如何获取？思路如下：
数据库中为每个用户设置一个LastID，获取信息的时候比较聊天信息表中最大的ChatID。如果ChatID大于LastID，则表明有新的聊天信息，接着从对应数据库获取聊天信息( ChatID-LastID表明新信息条数), 返回给客户端。客户端再根据不同的用户名，将信息追加到相应的聊天窗口。这里还有一步，设置LastID，将这个最大的ChatID保存为LastID。
发送聊天信息比较好理解，POST数据至服务器端的处理页面，进行保存即可。
实现细节：
客户端：
主要有4个处理函数：
双击用户名节点创建聊天窗口：webQQDblClick()
来信动态创建聊天窗口:autoshowQQWindow()
定时从服务器获取聊天消息:loadMessage()
向聊天窗口追加聊天信息：addMessage()
发送聊天信息的处理语句分别在webQQDblClick()和autoshowQQWindow()里面都有。当然这样处理是不符合一些设计思想的，多敲了很多代码。我是懒得封装成一个方法。
服务器端：
有两个处理页面：
一个保存提交的聊天信息页面:SendChatMessage.aspx
一个获取聊天信息的页面:GetChatMessage.aspx
主要的获取数据和保存信息的处理方法是在Chat类中定义的。

类图

注释说明

申明一下：我仅仅是实现了WebQQ的部分功能。并非实现合理。首先我的编码不是很规范。请谅解。其次WebQQ界面是ExtJS的Desktop例子 中的那个。稍稍把代码改一下，就可以独立了！还有QQ好友不是异步动态获取的。 我为每个用户都创建了一个数据库文件，这是因为Sqlite操作方便。还有每个用户都有很多不同的数据要存储，不仅仅是保存了聊天信息，所以才这样的。其 实你可以把Sqlite看成是一个文本文件，只不过是用关系数据库的方式来思考和存取。想象一下，如果你的一个文本文件，有10M大小。你用文本编辑器打 开时什么感觉。我宁可把它分解成50个，500个文本进行读取。这是我的看法！

还有使用Sqlite是为了演示方便，不需要任何安装、配置、管理。
(其他数据库估计就不能这样了！如果我用MSSQL也绝不会像处理Sqlite这样为每个用户创建一个数据库，因时因地而异。)

我还是先贴个图，诱惑一下。^_^

WebQQ主界面

聊天窗口

这里也有全部源代码地址：http://download.csdn.net/source/499268 下面贴部分代码：
  1. 服务器端消息处理页面：

  1. GetChatMessage.aspx
    1. publicpartialclassGetChatMessage:System.Web.UI.Page
    2. {
    3. protectedvoidPage_Load(objectsender,EventArgse)
    4. {
    5. stringuserinfoPath=Request.MapPath(@"//db/userinfo.db3");
    6. stringuserPath=Request.MapPath(@"/db/userdb/");

    8. stringusername=Request.Params["username"];
    9. if(username!=null)
    10. {
    11. IChatchat=newChat(userinfoPath,userPath);
    12. stringstr=chat.GetChatMessage(username);
    13. Response.Write(str);
    14. }
    15. Response.End();
    16. }
    17. }
    18. publicpartialclassGetChatMessage:System.Web.UI.Page
    19. {
    20. protectedvoidPage_Load(objectsender,EventArgse)
    21. {
    22. stringuserinfoPath=Request.MapPath(@"//db/userinfo.db3");
    23. stringuserPath=Request.MapPath(@"/db/userdb/");

    25. stringusername=Request.Params["username"];
    26. if(username!=null)
    27. {
    28. IChatchat=newChat(userinfoPath,userPath);
    29. stringstr=chat.GetChatMessage(username);
    30. Response.Write(str);
    31. }
    32. Response.End();
    33. }
    34. }

    36. SendChatMessage.aspx
    37. SendChatMessage.aspx

    39. publicpartialclassSendChatMessage:System.Web.UI.Page
    40. {
    41. protectedvoidPage_Load(objectsender,EventArgse)
    42. {
    43. stringuserinfoPath=Request.MapPath(@"/db/userinfo.db3");
    44. stringuserPath=Request.MapPath(@"/db/userdb/");

    46. stringfromusername=Request.Params["fromusername"];
    47. stringtousername=Request.Params["tousername"];
    48. stringmessage=Request.Params["message"];
    49. if(fromusername!=null&&tousername!=null&&message!=null)
    50. {
    51. IChatchat=newChat(userinfoPath,userPath);
    52. chat.SendChatMessage(fromusername,tousername,message);
    53. Response.Write("{success:true}");
    54. }
    55. else
    56. Response.Write("{success:false}");
    57. Response.End();
    58. }
    59. }

    聊天消息处理接口：
    1. interfaceIChat
    2. {
    3. stringGetChatMessage(stringuserName);
    4. voidSendChatMessage(stringtoUserName,stringfromUserName,stringmessage);
    5. }
    1. 聊天消息处理类：

    1. (数据库，我临时使用Sqlite3，创建了一个userinfo.db3存储全部用户的信 息，并且创建chatlastid表，存储每个用户的LastChatID。我为每个用户都创建了一个个人的数据库文件，如 snail.db3,oo.db3.存储他自己的消息(chatmsg表).)
      1. publicclassChat:IChat
      2. {
      3. privatestringuserinfoDBPath="";
      4. privatestringuserDBPath="";
      5. publicChat(stringuserinfoStr,stringuserStr)
      6. {
      7. this.userinfoDBPath=userinfoStr;
      8. this.userDBPath=userStr;
      9. }
      11. ///<summary>
      12. ///根据用户名获取最后一次发送或接受消息的ID
      13. ///</summary>
      14. ///<paramname="userName">欲获取其LastChatID的用户</param>
      15. privateintGetLastChatID(stringuserName)
      16. {
      17. intreturnValue=-1;
      18. using(SQLiteConnectionconn=newSQLiteConnection("DataSource="+userinfoDBPath))
      19. {
      20. try
      21. {
      22. conn.Open();
      23. stringstrsql="select[lastchatid]from[chatlastid]whereusername=@userName";
      24. SQLiteCommandcmd=newSQLiteCommand(strsql,conn);
      25. cmd.Parameters.AddWithValue("@userName",userName);
      26. objectresult=cmd.ExecuteScalar();
      27. conn.Clone();
      28. if(result==null)
      29. SetDefaultLastChatID(userName);
      30. else
      31. returnValue=Convert.ToInt32(result);
      32. }
      33. catch(Exceptionex)
      34. {
      35. }
      36. finally
      37. {
      38. }
      39. }
      40. returnreturnValue;
      41. }
      44. ///<summary>
      45. ///如果用户在ChatLastID表中没有值，则设置其为默认值-1
      46. ///</summary>
      47. ///<paramname="userName">用户名</param>
      48. privatevoidSetDefaultLastChatID(stringuserName)
      49. {
      50. intdefaultLastID=-1;
      51. using(SQLiteConnectionconn=newSQLiteConnection("DataSource="+userinfoDBPath))
      52. {
      53. try
      54. {
      55. conn.Open();
      56. stringstrsql="insertintochatlastid(username,lastchatid)values(@userName,@lastchatid)";
      57. SQLiteCommandcmd=newSQLiteCommand(strsql,conn);
      58. cmd.Parameters.AddWithValue("@userName",userName);
      59. cmd.Parameters.AddWithValue("@lastchatid",defaultLastID);
      60. cmd.ExecuteNonQuery();
      61. }
      62. catch(Exceptionex)
      63. {
      64. }
      65. finally
      66. {
      67. conn.Clone();
      68. }
      69. }
      70. }
      73. ///<summary>
      74. ///获取某个用户的消息列表，string类型,并且在获取消息的同时设置LastID。
      75. ///</summary>
      76. ///<paramname="userName">欲获取消息的用户名</param>
      77. publicstringGetChatMessage(stringuserName)
      78. {
      79. stringreturnStr="";
      80. intlastID=GetLastChatID(userName);
      81. intfreshID=GetFreshChatID(userName);
      82. if(freshID>lastID)
      83. {
      84. stringdatapath=userDBPath+userName+@".db3";
      85. intgetChatID=freshID-lastID;
      86. using(SQLiteConnectionconn=newSQLiteConnection("DataSource="+datapath))
      87. {
      88. DataSetds=newDataSet();
      89. try
      90. {
      91. conn.Open();
      92. stringstrsql="select[chatid],[fromusername],[message],[senddate]from(Select[chatid],[fromusername],[message],[senddate]From[chatmsg]orderbychatiddesclimit"+getChatID+")orderbychatidasc";
      93. SQLiteDataAdaptersdap=newSQLiteDataAdapter(strsql,conn);
      94. sdap.Fill(ds);
      95. conn.Clone();
      96. //将DataSet转化为JSON格式
      97. returnStr=JSONHelper.Convert2Json(ds);
      98. //设置LastChatID值chatlastidTable
      99. SetLastChatID(userName,freshID);
      100. }
      101. catch(Exceptionex)
      102. {
      103. }
      104. finally
      105. {
      106. }
      107. }
      108. }
      109. returnreturnStr;
      110. }
      113. ///<summary>
      114. ///给指定用户名发送消息，保存至该用户个人数据库。(发送时间在插入数据的时候获取当前时间。)
      115. ///</summary>
      116. ///<paramname="toUserName">消息接收者名称</param>
      117. ///<paramname="fromUserName">消息发送者名称</param>
      118. ///<paramname="message">消息内容</param>
      120. publicvoidSendChatMessage(stringfromUserName,stringtoUserName,stringmessage)
      121. {
      122. stringsenddate=DateTime.Now.ToString("u").TrimEnd('Z');
      123. stringdatapath=userDBPath+toUserName+@".db3";
      124. using(SQLiteConnectionconn=newSQLiteConnection("DataSource="+datapath))
      125. {
      126. try
      127. {
      128. conn.Open();
      129. stringstrsql="insertintochatmsg(fromusername,message,senddate)values(@fromUserName,@message,@senddate);";
      130. SQLiteCommandcmd=newSQLiteCommand(strsql,conn);
      131. cmd.Parameters.AddWithValue("@fromUserName",fromUserName);
      132. cmd.Parameters.AddWithValue("@message",message);
      133. cmd.Parameters.AddWithValue("@senddate",senddate);
      134. cmd.ExecuteNonQuery();
      135. }
      136. catch(Exceptionex)
      137. {
      138. }
      139. finally
      140. {
      141. conn.Clone();
      142. }
      143. }
      144. }
      147. ///<summary>
      148. ///设置公用数据库ChatLastID中的某个用户的LastID
      149. ///</summary>
      150. ///<paramname="userName">欲设置ChatLastID的用户</param>
      151. privatevoidSetLastChatID(stringuserName,intlastchatid)
      152. {
      153. using(SQLiteConnectionconn=newSQLiteConnection("DataSource="+userinfoDBPath))
      154. {
      155. try
      156. {
      157. conn.Open();
      158. stringstrsql="update[chatlastid]set[lastchatid]=@lastchatidwhere[username]=@userName";
      159. SQLiteCommandcmd=newSQLiteCommand(strsql,conn);
      160. cmd.Parameters.AddWithValue("@userName",userName);
      161. cmd.Parameters.AddWithValue("@lastchatid",lastchatid);
      162. cmd.ExecuteNonQuery();
      163. }
      164. catch(Exceptionex)
      165. {
      166. }
      167. finally
      168. {
      169. conn.Clone();
      170. }
      171. }
      172. }
      175. ///<summary>
      176. ///获取最新的ChatID
      177. ///</summary>
      178. ///<paramname="userName">欲获取某个用户的名称</param>
      179. privateintGetFreshChatID(stringuserName)
      180. {
      181. intreturnValue=0;
      182. stringdatapath=userDBPath+userName+@".db3";
      183. using(SQLiteConnectionconn=newSQLiteConnection("DataSource="+datapath))
      184. {
      185. try
      186. {
      187. conn.Open();
      188. stringstrsql="Selectmax(chatid)From[chatmsg];";
      189. SQLiteCommandcmd=newSQLiteCommand(strsql,conn);
      190. returnValue=Convert.ToInt32(cmd.ExecuteScalar());
      191. }
      192. catch(Exceptionex)
      193. {
      194. }
      195. finally
      196. {
      197. conn.Clone();
      198. }
      199. }
      200. returnreturnValue;
      201. }
      202. }

      204. chatmsg 表：


      chatmsg 表：
      1. Create[chatmsg](
      2. [chatid]INTEGERPRIMARYKEYNOTNULL
      3. ,[fromusername]nvarchar(20)NOTNULL
      4. ,[message]nvarchar(200)
      5. ,[senddate]nvarchar(20)
      6. );

      1. chatlastid表：

      1. Create[chatlastid](
      2. [username]nvarCHAR(20)PRIMARYKEYNOTNULL
      3. ,[lastchatid]INTEGERNOTNULLDEFAULT '0'
      4. );

      1. 这个WebQQ有很多的不足之处，很多编码思想，编码规范等等都由这个自己来的，怎么想就做么做了，呵呵。如果你有好的建议，意见，咱多聊聊。^_^

      3. <PRE class=jscriptname="code"></PRE>
分享到：
| Extjs结合.NET上传文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS即时通信WebQQ

    ExtJS实现WebQQ即时通信，超级给力，下载吧！ ExtJS实现WebQQ即时通信，超级给力，下载吧！ ExtJS实现WebQQ即时通信，超级给力，下载吧！ ExtJS实现WebQQ即时通信，超级给力，下载吧！

    ssh整合实现登录的例子，包含源代码，用extjs做的登录界面

    在这个例子中，我们将深入探讨如何利用SSH整合来实现一个登录功能，并且这个功能的前端界面是通过ExtJS库创建的。 1. **Spring框架**：Spring是核心的依赖注入（DI）和面向切面编程（AOP）框架，它管理着应用中的...

    ext-2.3.0 ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架

    ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 　ExtJs最开始基于YUI技术，由开发人员Jack ...

    extjs通用后台管理界面

    标题中的"extjs通用后台管理界面"指的是使用ExtJS框架开发的适用于各种后台管理系统的用户界面模板。这种界面通常包括一系列常见的管理功能，如数据表格、图表、表单、导航菜单等，以满足日常的后台管理需求。它的...

    ExtJS做的WebQQ

    用ExtJS做的QQ 采用struts1.2 由于时间原因 该WebQQ还有很多bug 希望有兴趣的朋友继续研究 作者Email：haoyingsong@163.com 大家可以看一下： ... 版本已更新： ...实现单聊，群聊，声音提示等，无需数据库

    基于WebSocket的企业级即时通讯WebIM，使用EXTJS做为前端设计工具

    EXTJS则是一种强大的JavaScript框架，用于构建富客户端的桌面式Web应用程序，其丰富的组件库和强大的数据管理能力使得前端界面设计更加便捷。 本项目基于WebSocket构建了一个企业级的WebIM系统，实现了在线实时通讯...

    ExtJS的可视化界面设计器

    总结来说，ExtJS的可视化界面设计器是一个强大的开发辅助工具，它将复杂的前端界面设计过程简化，使得开发者能够更加专注于应用逻辑的实现，提高了开发效率和项目的可维护性。对于希望快速构建高质量ExtJS应用的团队...

    extjs实现用户登录界面

    在“extjs实现用户登录界面”这个主题中，我们将深入探讨如何利用ExtJS创建一个功能完善的登录界面。 首先，登录界面通常包含用户名、密码输入框以及登录按钮。在ExtJS中，这些可以通过创建`Ext.form.Panel`来实现...

    前端ExtjsAPI

    前端ExtjsAPI 前端ExtjsAPI 前端ExtjsAPI

    Extjs为前端的图书管理系统

    在“Extjs为前端的图书管理系统”这个项目中，ExtJS 被用来构建系统的前端部分，提供了高效且易于使用的界面元素，如表格、面板、窗口、菜单等，用于展示和操作图书数据。 图书管理系统通常包括以下功能模块： 1. ...

    extjs做界面的jsp系统

    在"extjs做界面的jsp系统"这个项目中，ExtJS 被用来设计和实现系统的前端界面部分，与后端的Java技术栈（如Struts）和数据库MySQL相结合，形成一个完整的系统。 1. **ExtJS 界面设计**： - ExtJS 提供了各种预定义...

    extjs界面生成器extjs界面生成器extjs界面生成器

    extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器

    使用Extjs写的简单酒店管理系统

    本项目“使用Extjs写的简单酒店管理系统”便是一个基于这个框架的实践案例，它展示了如何利用ExtJS的组件和API来设计和实现一个管理系统的用户界面。 【描述】：项目采用的是Visual Studio 2005（VS2005）作为开发...

    extjs实现的后台界面

    extjs实现一个后台管理框架，界面美观，可换主题颜色

    extjs漂亮简洁的登录界面

    EXTJS的界面美观、功能强大，能够创建出响应式、可定制且高性能的用户界面。 在"extjs漂亮简洁的登录界面"这个项目中，我们看到的是EXTJS被用来构建一个简单但高质感的登录页面。对于初学者来说，这是一个很好的...

    jQuery EasyUI仿Extjs界面

    jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，如表格、下拉框、对话框、菜单等，使得开发者能够快速构建出美观且功能丰富的Web应用界面。ExtJS则是另一个知名的JavaScript框架，它...

    ExtJS做的WebQQ(sql2005)

    用ExtJS做的QQ 采用struts1.2 依旧有很多bug 希望有兴趣的朋友继续研究 Email：haoyingsong@163.com 可以看一下： http://hi.baidu.com/ccutshyhao/blog/item/3e889f118f149a07203f2e32.html 版本已更新： ...

    extjs界面生成，页面设计

    extjs界面生成，页面设计，可以用可视化的方式，生成一套extjs系统界面

Magicbox
Global site tag (gtag.js) - Google Analytics