使用ExtJS创建前端WebQQ界面

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

使用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 下面贴部分代码：

1. 服务器端消息处理页面：

[jscript] view plain copy print ?

1. 服务器端消息处理页面：  

服务器端消息处理页面：

1. GetChatMessage.aspx
2. 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/"); 
   7. 
      
   8. string username = Request.Params["username"]; 
   9. if (username != null) 
   10. {