使用ExtJS创建前端WebQQ界面

最新推荐文章于 2018-01-06 14:34:30 发布

最新推荐文章于 2018-01-06 14:34:30 发布 · 137 阅读

文章标签：

#数据库 #前端 #ui #ViewUI

本文介绍了一种利用ExtJS和ASP.NET构建WebQQ应用的方法，通过客户端定时向服务器请求新消息并使用Sqlite3存储数据。文章详细解释了消息发送与接收的处理流程。

使用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这样为每个用户创建一个数据库，因时因地而异。)

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

这里也有全部源代码地址：http://download.youkuaiyun.com/source/499268 下面贴部分代码：

服务器端消息处理页面：

服务器端消息处理页面：

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 表：
  Create[chatmsg](
  [chatid]INTEGERPRIMARYKEYNOTNULL
  ,[fromusername]nvarchar(20)NOTNULL
  ,[message]nvarchar(200)
  ,[senddate]nvarchar(20)
  );
  Create [chatmsg]( [chatid] INTEGER PRIMARY KEY NOT NULL ,[fromusername] nvarchar(20) NOT NULL ,[message] nvarchar(200) ,[senddate] nvarchar(20) );
  chatlastid表：
  chatlastid 表：
  Create[chatlastid](
  [username]nvarCHAR(20)PRIMARYKEYNOTNULL
  ,[lastchatid]INTEGERNOTNULLDEFAULT '0'
  );
  Create [chatlastid]( [username] nvarCHAR(20) PRIMARY KEY NOT NULL ,[lastchatid] INTEGER NOT NULL DEFAULT '0' );
  这个WebQQ有很多的不足之处，很多编码思想，编码规范等等都由这个自己来的，怎么想就做么做了，呵呵。如果你有好的建议，意见，咱多聊聊。^_^
  
  <PRE class=jscriptname="code"></PRE>