`
javatoyou
  • 浏览: 1019226 次
  • 性别: 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做的登录界面，作为新手入门的好东西，不下会后悔的。。。

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

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

    ExtJS做的WebQQ

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

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

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

    extjs4.x学习笔记

    xtJs已经升级到了5.0了，目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看，ExtJs3的缺陷还是比较明显的，从ExtJs4 开始引入了MVC架构，从而能够从容的组织系统的JS文件了。 从...

    前端ExtjsAPI

    前端ExtjsAPI 前端ExtjsAPI 前端ExtjsAPI

    extjs通用后台管理界面

    extjs通用后台管理界面 非常的好看，打击可以下载参考一下 也可以在项目中应用

    extjs实现用户登录界面

    extjs用户登录界面 博文链接：https://hyj0903.iteye.com/blog/691273

    extjs实现的后台界面

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

    ExtJS做的WebQQ(sql2005)

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

    extjs界面生成，页面设计

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

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

    基于WebSocket的企业级即时通讯WebIM，使用EXTJS做为前端设计工具，通过WebSocket的长连接技术，实现在线实时通讯，可以创建工作组，绑定组织结构，提供WebService服务接口。

    Extjs 6 纯前端小测试项目

    自己根据网上教程写的一段小代码，可以直接用，正在学习中先保存起来，继续努力

    Extjs 之主界面布局

    Extjs 之主界面简单布局，适合刚刚接触ext的新手学习，就一个html页面。 现在拿来分享。

    ExtJS配置界面项目

    采用ExtJS-4.0.7版本，使得前端也有MVC开发模式，并且利用json来配置管理界面，将界面分成了3个部分，一个是查询界面，一个是操作条，一个是表格，一个操作打开一个新界面，操作按钮执行什么操作均可配置，可以配置...

    ExtJS的可视化界面设计器

    1.先安装 xds_preview.air（要安装AIR环境） 2.把Ext Designer Preview.7z解压后，覆盖一下安装目录的文件，就可以了！

    ExtJS快速入门指南

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

    extjs做界面的jsp系统

    绝对可以，有数据库建表脚本，有较全的extjs展示界面，可供学习。

    类extjs的c++界面库

    类似extjs架构的简单c++界面库，extjs是个javascript的界面库

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