使用ExtJS创建前端WebQQ界面

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

lee576

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

阅读量5.8k

点赞数

分类专栏： Asp.Net Ext Ajax 框架文章标签： extjs 聊天 sqlite 数据库 null 服务器

Asp.Net 同时被 2 个专栏收录

339 篇文章 0 订阅

订阅专栏

Ext Ajax 框架

70 篇文章 0 订阅

订阅专栏

使用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.csdn.net/source/499268 下面贴部分代码：

服务器端消息处理页面：

服务器端消息处理页面：

GetChatMessage.aspx
1. public partial class GetChatMessage : System.Web.UI.Page
2. {
3. protected void Page_Load(object sender, EventArgs e)
4. {
5. string userinfoPath = Request.MapPath(@"//db/userinfo.db3");
6. string userPath = Request.MapPath(@"/db/userdb/");
8. string username = Request.Params["username"];
9. if (username != null)
10. {
11. IChat chat = new Chat(userinfoPath, userPath);
12. string str = chat.GetChatMessage(username);
13. Response.Write(str);
14. }
15. Response.End();
16. }
17. }
18. public partial class GetChatMessage : System.Web.UI.Page
19. {
20. protected void Page_Load(object sender, EventArgs e)
21. {
22. string userinfoPath = Request.MapPath(@"//db/userinfo.db3");
23. string userPath = Request.MapPath(@"/db/userdb/");
25. string username = Request.Params["username"];
26. if (username != null)
27. {
28. IChat chat = new Chat(userinfoPath, userPath);
29. string str = chat.GetChatMessage(username);
30. Response.Write(str);
31. }
32. Response.End();
33. }
34. }
36. SendChatMessage.aspx
37. SendChatMessage.aspx
39. public partial class SendChatMessage : System.Web.UI.Page
40. {
41. protected void Page_Load(object sender, EventArgs e)
42. {
43. string userinfoPath = Request.MapPath(@"/db/userinfo.db3");
44. string userPath = Request.MapPath(@"/db/userdb/");
46. string fromusername = Request.Params["fromusername"];
47. string tousername = Request.Params["tousername"];
48. string message = Request.Params["message"];
49. if (fromusername != null && tousername != null && message != null)
50. {
51. IChat chat = new Chat(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. interface IChat
2. {
3. string GetChatMessage(string userName);
4. void SendChatMessage(string toUserName, string fromUserName, string message);
5. }
1. 聊天消息处理类：
```
聊天消息处理类：
```
1. (数据库，我临时使用Sqlite3，创建了一个userinfo.db3存储全部用户的信息，并且创建chatlastid表，存储每个用户的LastChatID。我为每个用户都创建了一个个人的数据库文件，如 snail.db3,oo.db3.存储他自己的消息(chatmsg表).)
  1. public class Chat: IChat
  2. {
  3. private string userinfoDBPath = "";
  4. private string userDBPath = "";
  5. public Chat(string userinfoStr,string userStr)
  6. {
  7. this.userinfoDBPath = userinfoStr;
  8. this.userDBPath = userStr;
  9. }
  11. /// <summary>
  12. /// 根据用户名获取最后一次发送或接受消息的ID
  13. /// </summary>
  14. /// <param name="userName">欲获取其LastChatID的用户</param>
  15. private int GetLastChatID(string userName)
  16. {
  17. int returnValue = -1;
  18. using(SQLiteConnection conn = new SQLiteConnection("Data Source=" + userinfoDBPath))
  19. {
  20. try
  21. {
  22. conn.Open();
  23. string strsql = "select [lastchatid] from [chatlastid] where username = @userName";
  24. SQLiteCommand cmd = new SQLiteCommand(strsql, conn);
  25. cmd.Parameters.AddWithValue("@userName", userName);
  26. object result = cmd.ExecuteScalar();
  27. conn.Clone();
  28. if (result == null)
  29. SetDefaultLastChatID(userName);
  30. else
  31. returnValue = Convert.ToInt32(result);
  32. }
  33. catch (Exception ex)
  34. {
  35. }
  36. finally
  37. {
  38. }
  39. }
  40. return returnValue;
  41. }
  44. /// <summary>
  45. /// 如果用户在ChatLastID表中没有值，则设置其为默认值-1
  46. /// </summary>
  47. /// <param name="userName">用户名</param>
  48. private void SetDefaultLastChatID(string userName)
  49. {
  50. int defaultLastID = -1;
  51. using(SQLiteConnection conn = new SQLiteConnection("Data Source=" + userinfoDBPath))
  52. {
  53. try
  54. {
  55. conn.Open();
  56. string strsql = "insert into chatlastid(username,lastchatid) values(@userName,@lastchatid)";
  57. SQLiteCommand cmd = new SQLiteCommand(strsql, conn);
  58. cmd.Parameters.AddWithValue("@userName", userName);
  59. cmd.Parameters.AddWithValue("@lastchatid", defaultLastID);
  60. cmd.ExecuteNonQuery();
  61. }
  62. catch (Exception ex)
  63. {
  64. }
  65. finally
  66. {
  67. conn.Clone();
  68. }
  69. }
  70. }
  73. /// <summary>
  74. /// 获取某个用户的消息列表，string类型,并且在获取消息的同时设置LastID。
  75. /// </summary>
  76. /// <param name="userName">欲获取消息的用户名</param>
  77. public string GetChatMessage(string userName)
  78. {
  79. string returnStr = "";
  80. int lastID = GetLastChatID(userName);
  81. int freshID = GetFreshChatID(userName);
  82. if (freshID > lastID)
  83. {
  84. string datapath = userDBPath + userName + @".db3";
  85. int getChatID = freshID - lastID;
  86. using(SQLiteConnection conn = new SQLiteConnection("Data Source=" + datapath))
  87. {
  88. DataSet ds = new DataSet();
  89. try
  90. {
  91. conn.Open();
  92. string strsql = "select [chatid],[fromusername],[message],[senddate] from (Select [chatid],[fromusername],[message],[senddate] From [chatmsg] order by chatid desc limit "+getChatID+") order by chatid asc";
  93. SQLiteDataAdapter sdap = new SQLiteDataAdapter(strsql , conn);
  94. sdap.Fill(ds);
  95. conn.Clone();
  96. //将DataSet转化为JSON格式
  97. returnStr = JSONHelper.Convert2Json(ds);
  98. //设置LastChatID值chatlastid Table
  99. SetLastChatID(userName, freshID);
  100. }
  101. catch (Exception ex)
  102. {
  103. }
  104. finally
  105. {
  106. }
  107. }
  108. }
  109. return returnStr;
  110. }
  113. /// <summary>
  114. /// 给指定用户名发送消息，保存至该用户个人数据库。(发送时间在插入数据的时候获取当前时间。)
  115. /// </summary>
  116. /// <param name="toUserName">消息接收者名称</param>
  117. /// <param name="fromUserName">消息发送者名称</param>
  118. /// <param name="message">消息内容</param>
  120. public void SendChatMessage(string fromUserName, string toUserName, string message)
  121. {
  122. string senddate = DateTime.Now.ToString("u").TrimEnd('Z');
  123. string datapath = userDBPath + toUserName + @".db3";
  124. using (SQLiteConnection conn = new SQLiteConnection("Data Source=" + datapath))
  125. {
  126. try
  127. {
  128. conn.Open();
  129. string strsql = "insert into chatmsg(fromusername,message,senddate) values(@fromUserName,@message,@senddate);";
  130. SQLiteCommand cmd = new SQLiteCommand(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 (Exception ex)
  137. {
  138. }
  139. finally
  140. {
  141. conn.Clone();
  142. }
  143. }
  144. }
  147. /// <summary>
  148. /// 设置公用数据库ChatLastID中的某个用户的LastID
  149. /// </summary>
  150. /// <param name="userName">欲设置ChatLastID的用户</param>
  151. private void SetLastChatID(string userName, int lastchatid)
  152. {
  153. using(SQLiteConnection conn = new SQLiteConnection("Data Source=" + userinfoDBPath))
  154. {
  155. try
  156. {
  157. conn.Open();
  158. string strsql = "update [chatlastid] set [lastchatid] = @lastchatid where [username] = @userName";
  159. SQLiteCommand cmd = new SQLiteCommand(strsql, conn);
  160. cmd.Parameters.AddWithValue("@userName", userName);
  161. cmd.Parameters.AddWithValue("@lastchatid", lastchatid);
  162. cmd.ExecuteNonQuery();
  163. }
  164. catch (Exception ex)
  165. {
  166. }
  167. finally
  168. {
  169. conn.Clone();
  170. }
  171. }
  172. }
  175. /// <summary>
  176. /// 获取最新的ChatID
  177. /// </summary>
  178. /// <param name="userName">欲获取某个用户的名称</param>
  179. private int GetFreshChatID(string userName)
  180. {
  181. int returnValue = 0;
  182. string datapath = userDBPath + userName + @".db3";
  183. using(SQLiteConnection conn = new SQLiteConnection("Data Source=" + datapath))
  184. {
  185. try
  186. {
  187. conn.Open();
  188. string strsql = "Select max(chatid) From [chatmsg];";
  189. SQLiteCommand cmd = new SQLiteCommand(strsql, conn);
  190. returnValue = Convert.ToInt32(cmd.ExecuteScalar());
  191. }
  192. catch (Exception ex)
  193. {
  194. }
  195. finally
  196. {
  197. conn.Clone();
  198. }
  199. }
  200. return returnValue;
  201. }
  202. }
  204. chatmsg 表：
  chatmsg 表：
  Create [chatmsg](
  [chatid] INTEGER PRIMARY KEY NOT NULL
  ,[fromusername] nvarchar(20) NOT NULL
  ,[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) PRIMARY KEY NOT NULL
  ,[lastchatid] INTEGER NOT NULL DEFAULT '0'
  );
```
Create  [chatlastid](
[username] nvarCHAR(20) PRIMARY KEY NOT NULL
,[lastchatid] INTEGER NOT NULL DEFAULT '0'
);
        
```
  这个WebQQ有很多的不足之处，很多编码思想，编码规范等等都由这个自己来的，怎么想就做么做了，呵呵。如果你有好的建议，意见，咱多聊聊。^_^
  
  <PRE class=jscript name="code"> </PRE>

lee576

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
使用ExtJS创建前端WebQQ界面

使用ExtJS创建前端WebQQ界面，使用ASP.NET处理数据存取，为了演示方便用Sqlite3存储数据。功能概述：实现了最基础的一对一的通讯功能，实时收发信息，离线保存信息。来信自动弹出窗口。实现思路：借鉴了早些年的聊天室思想。获取聊天信息是客户端定时向服务器请求，按照发送的用户名来查询此用户是否有新信息。有信息则返回信息。如何获取？思路如下：数据库中为每个用户设置
复制链接

扫一扫