ASP语言QQ在线系统在网站中的应用

ＮＥＩｒＷ０ＲＫ　ＡＮＤ　Ｃ０ＭＭＵＮＩＣＡＴＩＯＮ　网络与通信　

ＡＳＰ语言ＱＱ在线系统在网站中的应用　

韩笑　

（湖北工业大学，武汉４３００６８）　

摘要：从技术的角度出发，设计与实现了一款基于网页的即时在线通信系统。介绍了软件的系统结构及设计恩　

路。　

关键词：ＶＢ开发；网络聊天软件；ＱＱ在线；基于网页；留言系统　

Ａｐｐｌｉｃａｔｉｏｎ　ｏｆ　Ｔｈｅ　ＡＳＰ　Ｌａｎｇｕａｇｅ　ＱＱ　Ｏｎｌｉｎｅ　Ｓｙｓｔｅｍ　ｉｎ　Ｗｅｂ　

ＨＡＮ　Ｘｉａｏ　

（Ｈｕｂｅｉ　Ｕｎｖｅｒｓｉｔｙ　ｏｆ　Ｔｅｃｈｎｏｌｏｇｙ，Ｗｕｈａｎ　４３００６８）　

Ａｂｓｔｒａｃｔ：Ｆｒｏｍ　ｔｈｅ　ｔｅｃｈｎｉｃａｌ　ｐｏｉｎｔ　ｏｆ　ｖｉｅｗ，ｄｅｓｉｇｎ　ａｎｄ　ｉｍｐｌｅｍｅｎｔａｔｉｏｎ　ｏｆ　ａ　Ｗｅｂｐａｇｅ－ｂａｓｅｄ　ｉｎｔｅｒａｃｔｉｖｅ　ｃｈａｔ　ｔｏｏ１．Ｉｎ　ｔｈｉｓ　

ｐａｐｅｒ，ｗｅ　ｉｎｔｒｏｄｕｃｅ　ａ　ｓｏｆｔｗａｒｅ　ｓｙｓｔｅｍ　ａｒｃｈｉｔｅｃｔｕｒｅ　ａｎｄ　ｄｅｓｉｇｎ　ｉｄｅａｓ．　

Ｋｅｙ　ｗｏｒｄｓ：ＶＢ　ｄｅｖｅｌｏｐｍｅｎｔ；ｎｅｔｗｏｒｋ　ｃｈａｔ　ｓｏｆｔｗａｒｅ；ＱＱ　ｏｎｌｉｎｅ；ｂａｓｅ　ｏｎ　Ｗｅｂｐａｇｅ；ｌｅａｖｅ　ｗｏｒｄ　ｓｙｓｔｅｍ　

１　引言　

近年来，随着全球信息化技术的发展，ＱＱ在线系统成为　

越来越多公司网站首选功能之一。ＱＱ在线系统是一种网页式　

ｌｌｌＰＸ，高４ＰＸ的像素条设计的，有的人就会问“为什么高　

４ＰＸ，实际高却是几百ＰＸ？”，这就要用到Ｄｒｅａｍｗｅａｖｅｒ软件　

中的背景图片功能例：＜ｔｄ　ｖａｌｉｇｎ＝”ｔｏｐ”ｂａｃｋｇｒｏｕｎｄ＝”ｉｍ－　

ａｇｅｓ３／ｋｅｆｕ

ｍｉｄｄｌｅ．ｇｉｆ¨＞。　

—

快捷版即时通信软件。相比较其他即时通信软件（如ＭＳＮ），　

它实现和网站的无缝结合，为网站提供和访客对话的平台；　

访客只需登录ＱＱ即可在线沟通。聊天软件的广泛应用，已经　

不仅仅是一种技术工具，它成为了人们交流的一种重要方式，　

并构建起一种新的社会关系。　

本在线系统是在ＶＢ开发环境下设计和实现了一种网页式　

快捷版即时通信软件，可以实现在线用户的即时聊天和文件　

传输功能。　

２　系统分析与设计　

本文所设计和实现的网络聊天软件是在ＶＢ开发环境下完　

成的，用Ｄｒｅａｍｗｅａｖｅｒ制作完成的。　

首先设计一个用ＤＩＶ标签建立一个游离于网页外的独立　

“层”，给层起个名字，最后ＶＢ脚本语言调用这个层。这个层　

因为是独立的，所以会随着网页的上下移动自动调整位置。　

例：　

＜ｄｉｖ　ｉｄ：”ＱＱ”　ｓｔｙｌｅ＝”Ｚ—ＩＮＤＥＸ：２５；ｒｉｇｈｔ：１０ｐｘ；ＶＩＳＩＢＩＵ—　

ＴＹ：ｖｉｓｉｂｌｅ；ＷＩＤＴＨ：　

１　１６ｐｘ；ＰＯＳＩＴＩＯＮ：ａｂｓｏｌｕｔｅ；ＴＯＰ：１５０ｐｘ；ＨＥＩＧＨＴ：５００ｐｘ；”＞　

图１在线咨询界面　

这个功能使的ＱＱ在线客服高度无线延伸而背景界面不会　

变形，而自动伸展。　

第３部分是最下即ＱＱ在线客服的上面部分，也是个独立　

部分。３部分通过一个无缝ｔａｂｌｅ连接在一起，给网页浏览者　

视觉上一个完整一体的界面，实际是３部分组合成的。　

２．１系统整体结构　

设计时把ＱＱ在线系统的界面设置为宽１１６ＰＸ，高　

５００ＰＸ，这个高是随着在线服务人员的增多自动增高的，最高　

是５００ＰＸ。本例设置了４个服务人员，所以整体高度实际是　

１９０ＰＸ，如图１所示。　

ＱＱ在线系统结构图如图２所示。　

２．２系统功能　

本系统的功能主要包括以下几项：　

（１）无限坐席功能，可以登陆多个客服，相比ｑｑ在线客　

服系统来说，客户方便转接客户，使得沟通效率更好。　

（２）主动发起功能，主动邀请客户，由原来的被动变主　

动寻找客户沟通。　

而怎么做到随着在线客服人员的增多而界面不会变形扭　

曲呢？这就要把这一个界面分为３部分设计：　

第一是头部即ＱＱ在线客服的上面部分。　

例：＜ｉｍｇ　ｓｒｃ＝”ｉｍａｇｅｓ３／ｋｅｆｕ＿ｕｐ．ｇｉｆ＇’ｗｉｄｔｈ＝”１　１６”　

ｈｅｉｇｈｔ＝”７０”＞　

作者简介：韩笑（１９８５一），女，在读硕士，研究方向：计算　

机技术信息管理方向。　

收稿日期：２０１２—０２—２６　

高度设置成７０ＰＸ，宽设置成１　１６ＰＸ。　

第二部分是所有ＱＱ在线客服的部分，采用了一个宽　

粕螭舞　≯　

电脑编程技巧与维护　

图２　ＱＱ在线系统的应用结构图　

（３）咨询量分析功能能时时查看当前网站访问的客户，　

是通过搜索什么关键词过来的，看了哪个页面已经停留的多　

次时间等，相比ｑｑ在线客服系统就没有这么多的功能。　

（４）自定义ＬＯＧＯ，旗帜广告，对于提升公司形象，企业　

理念都是不错的宣传方式。相比ｑｑ在线客服系统却不能达到　

这样的效果。　

（５）预置常用语促销语功能预置常用语，可自定义随时　

修改，方便交流把促销语专门分开，便于及时促销推荐常用　

语与促销语快速上屏技术，沟通更流畅，效率更好，更能服　

务客户。　

３　网站ＱＱ在线功能的设计与实现　

因为网站服务器端要处理多个客户端发来的请求，因此　

使用了多线程设计。如下是服务器启动后的主要处理程序段：　

这是头文件，作用是指定该软件的ＣＳＳ位置以及一些文件整　

体设置：　

＜ｈｅａｄ＞　

＜ｍｅｔａ　ｈａｐ－ｅｑｕｉｖ＝”Ｃｏｎｔｅｎｔ—Ｔｙｐｅ”ｃｏｎｔｅｎｔ＝”ｔｅｘｔ／ｈｔｍｌ；　

ｅｈａｒｓｅｔ＝ｇｂ２３　１２”，＞　

＜ｌｉｎｋ　ｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｈｒｅｆ＝”ｉｍａｇｅｓ３／ｑｑ．ＣＳＳ”ｔｙｐｅ＝”　

ｔｅｘｔ／ｅｓｓ”，＞　

＜／ｈｅａｄ＞　

下面是ＱＱ在线系统在网页上前台界面的设计：　

＜ｄｉｖ　ｉｄ＝”ＱＱＦｌｏａｔ＇’ｓｔｙｌｅ＝”Ｚ－ＩＮＤＥＸ：２０；ｒｉｇｈｌＬｔ：５ｐｘ；ＶＩＳＩ—　

ＢＩＬＩＴＹ：ｖｉｓｉｂｌｅ；ＷＩＤＴＨ：Ｉ１ｌｐｘ；ＰＯＳＩＴＩＯＮ：ａｂｓｏｌｕｔｅ；ＴＯＰ：　

１５０ｐｘ；ＨＥＩＧＨＴ：５００ｐｘ；”＞　

＜ｔａｂｌｅ　ｗｉｄｔｈ＝。’１００％”ｂｏｒｄｅｒ＝”０”ａｌｉｇｎ＝”ｃｅｎｔｅｒ‘＇’　

ｃｅｌｌｐ，ａ＇ｄｄｉｎｇ＝＇　０”ｃｅｌｌｓｐａｃｉｎｇ＝＇’０”＞　

＜ｔｄ　ｈｅｉｇｈｔ＝”２４”ｘｉｍｇ　ｓｒｃ＝”ｉｍａｇｅｓ３／ｋｅｆｕ

＿

ｕｐ．ｇｉｆ＂　

ｗｉｄｔｈ＝＇　１１１”ｈｅｉｇｈｔ＝”７０＇’＞＜，ｔｄ＞　

＜ｔｄ　ｖａｈｇｎ＝”ｔｏｐ”ｂａｃｋｇｒｏｕｎｄ＝”ｉｍａｇｅｓ３／ｋｅｆｕ

＿

ｍｉｄｄｌｅ．　

ｇｉｆ＇＞　

＜ｔｄ＞＜ａ　ｔａｒｇｅｔ＝ｂｌａｎｋ　ｈｒｅｆ＝ｈｔｔｐ：ｌｌｗｐａ．ｑｑ．ｃｏｍ／ｍｓｇｒｄ？Ｖ＝　

ｌ＆Ｕｔｉｎ－－４２９７１００７１＆Ｓｉｔｅ＝ＷＷＷ．ｍａｓｔｅｒｓａｌｅ．ｃｏｍ．ｃｎ＆Ｍｅｎｕ＝　

ｙｅｓ＞＜ｉｍｇ　ｂｏｒｄｅｒ＝”０”ＳＲＣ＝ｈｔｔｐ：／／ｗｐａ．．ｑｑ．ｃｏｒｎ／ｐａ？ｐ＝ｌ：　

４２９７１００７１：４　ａｌｔ＝”点击与技术人员交谈或留言”ａｌｉｇｎ＝”　

ａｂｓｍｉｄｄｉｅ＇’，＞＜，ａ＞＜ａ　ｔａｒｇｅｔ＝ｂｌａｎｋ　ｈｒｅｆ＝ｈｔｔｐ：／／ｗｐａ．ｑｑ．ｃｏｒｎ／　

ｍｓｇｒｄ？Ｖ＝ｌ＆Ｕｉｎ＝４２９７１００７１＆Ｓｉｔｅ＝ＷＷＷ．ｍａｓｔｅｒｓａｌｅ．ｃｏｒｎ．　

ｃｎ＆Ｍｅｎｕ＝ｙｅｓ＞产品技术支持＜／ａ＞＜／ｔｄ＞　

等　

＜／ｔｒ＞　

在以上代码中，＜ｉｍｇ　ｓｒｃ＝”ｉｍａｇｅｓ３／ｋｅｆｕ

＿

ｕｐ．ｇｉｆ＇　ｗｉｄｔｈ＝”　

１１１”ｈｅｉｇｈｔ＝”７０”＞　

是调用指定位置在线背景图像。　

＜ｔａｂｌｅ　ｗｉｄｔｈ＝”１００％”ｂｏｒｄｅｒ＝”０”ａｌｉｇｎ＝”ｃｅｎｔｅｒ”　

ｃｅｎｐ，￣ａｄｄｉｎｇ＝”０”ｃｅｌｌｓｐａｃｉｎｇ＝＇’０”＞　

是把ＱＱ在线软件的前台界面做成一个隐匿表的形式。　

＜ａ　ｔａｒｇｅｔ＝ｂｌａｎｋ　ｈｒｅｆ＝ｈｔｔｐ：／／ｗｐａ．ｑｑ．ｃｏｍ／ｍｓｇｒｄ？Ｖ＝ｌ＆Ｕｉｎ＝　

５８８２４６２３＆Ｓｉｔｅ＝ＷＷＷ．ｍａｓｔｅｒｓａｌｅ．ｃｏｍ．ｃｎ＆Ｍｅｎｕ＝ｙｅｓ＞＜ｉｍｇ　

ｂｏｒｄｅｒ＝”０”ＳＲＣ＝ｈｔｔｐ：／／ｗｐａ．ｑｑ．ｃｏｍ／ｐａ？ｐ＝１：３６１６９０１　１　１：４　

ａｌｔ＝”点击与技术人员交谈或留言”ａｌｉｇｎ＝”ａｂｓｍｉｄｄｌｅ”／　

＞＜，ａ＞　

这段程序的作用是点击该头像就会生成对话窗口。　

ＱＱ在线系统应用流程图如图３所示。　

图３系统流程图　

说明：不同的Ａ、Ｂ、Ｃ用户同时登录到本ＱＱ在线系统　

的网页，然后点击相应的客服，也可以多人同时点击同一位　

客服。如果该客服在线就直接交流，如果不在线就留言，等　

客服看到再相应解答回复。如果是找到不匹配的客服，系统　

客服可以转到相应的客服人员哪里。解答完毕后全程结束。　

４　ＶＢｓｃｒｉｐ设计与实现　

网站端主要包括以下功能的设计与实现：ＱＱ在线软件界　

面在整个网页位置的确定。ＱＱ在线软件随着页面的移动而自　

动跟随等等。　

＜ｓｃｒｉｐｔ　ｔｙｐｅ－－‘’ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞　

ｖａｒ　ｔｉｐｓ；Ｖａｒ　ｈｔｅＴｏｐ：１８０；ｖａｒ　ｏｌｄ＝ｔｈｅＴｏｐ；　

ｆｕｎｃｔｉｏｎ　ｉｎｉｔＦｌｏａｔＴｉｐｓ　０　｛　

ｔｉｐｓ＝ｄｏｃｕｍｅｎＬｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（　ＱＱ，）；　

ｍｏｖｅＴｉｐｓ　０；　

｝；　

ｆｕｎｃｔｉｏｎｍｏｖｅＴｉｐｓ　０　｛　

Ｖａｔ　ｔｔ＝５０；　

ｉｆ（ｗｉｎｄｏｗ．ｉｎｎｅｒＨｅｉｇｈｔ）　｛　

ｐｏｓ＝ｗｉｎｄｏｗ．ｐａｇｅＹＯｆｆｓｅｔ　

｝　

ｅｌｓｅ　ｉｆ　ｆｄｏｃｕｍｅｎｔ．ｄｏｃｕｍｅｎｔＥｌｅｍｅｎｔ＆＆ｄｏｃｕｍｅｎｔ．ｄｏｃｕ－一　

ｍｅｎｔＥｌｅｍｅｎｔ．ｓｃｒｏＵＴｏｐ）　｛　

ｐｏｓ＝ｄｏｃｕｍｅｎｔ．ｄｏｃｕｍｅｎｔＥｌｅｍｅｎｔ．ｓｃｒｏｌｌＴｏｐ　

（下转到９３页）　

ＡＲＴＩＦＩＣＩＡＬ　ＩＮＴＥＬＵＧＥＮＣＥ　ＡＮＤ　ＩＤＥＮＴＩＦＩＣＡＴＩＯＮ　ＴＥＣＨＮＩＱＵＥＳ　

同名，其电磁波长以及相混的程度是完全不同的，因此不同　

色彩模式下的颜色描述不能当作另外一种同名称的颜色。　

人工智能及识别技术　

换为灰度模式，其相在的色彩信息丢失后，原来图像的颜色　

就无法再恢复了，因此彩色模式在转换灰度模式前，要留一　

个备份文件。在灰度模式中，灰度图像的选项只会受到亮度　

的影响，而亮度所表示的就是光强的度量，其范围从０％到　

１００％，Ｏ％为黑色，而１ｏ０％则为白色。　

有些人认为ＣＭＹＫ模式可以用来描述反光物体的光线颜　

色，但是笔者认为ＣＭＹＫ模式只是比较适用于油墨颜色，即　

人造的染料对阳光的反光色彩加以模拟描述，如果没有人造　

染料就谈不上ＣＭＹＫ模式，因为ＣＭＹＫ模式并不能将自然物　

２　色彩模式的转换与应用　

在运用各种图像图形制作软件时，要按照实际需要选择　

色彩模式及相关参数。比如利用ＰｈｏｔｏＳｈｏｐ进行图像处理时，　

相比之下ＲＧＢ模式的处理效果要明显好于ＣＭＹＫ模式，因为　

ＲＧＢ是以光学原理为基础设备首选择色彩模式，而且相比　

体的反光色彩准确地描述出来，比如秋天枫叶的反光颜色，　

或者一些颜色亮丽的花朵的反光颜色等。从某种意义上来说，　

ＣＭＹＫ模式为人们提供一种通过矿物颜料、化学染料描述人　

的视觉需要的反射光线色彩的途径。要深入地理解色彩模式，　

就要首先明确色彩模式是基于应用的需要而进行人为描述颜　

色的一种方法标准，而ＣＭＹＫ模式则是基于现有条件尽可能　

地满足人的视觉需要的模拟自然色彩的方法标准。　

１．４　ａ书ｂ女模式　

ＣＭＹＫ模式，ＲＧＢ有着更广阔的色域，因此ＲＧＢ可以体现更　

多的颜色，特别是要求明亮、鲜艳的色彩。此外，对于同一　

个图像文件，在ＲＧＢ模式下只需要对红、绿、蓝３个通道色　

彩进行处理即可，而ＣＭＹＫ模式则要处理４个色彩通道。而　

在实际应用过程中，如果要把ＲＧＢ模式转换为ＣＭＹＫ模　

式，Ｌ　ａ％女模式就是必不可少的步骤之一。所谓的Ｌ　ａ　就　

是人类视觉的颜色空间，其以视觉唯一原则为基础，在颜色　

空间中，同样的移动量通过眼睛来看，所带来的色彩的改变　

且ＣＭＹＫ的运算方式也不同于ＲＧＢ的运算方式，所以利用　

ＣＭＹＫ模式不仅图片的处理效率相对较低，而且图片处理的　

质量也比较差。还有就是ＰｈｏｔｏＳｈｏｐ中一些过滤器并不支持　

ＣＭＹＫ模式。在实际应用过程中，如果图片只是用于网页制　

感觉是一样的，属于均匀色度空间。其中　表示度，ａ　表示　

红色到绿色的渐变，而ｂ表示黄色到蓝色的渐变。Ｌ　ａ　色　

空间与设备没有太大关系，它的主要作用作为一种连接色彩　

空间而实现各种设备之间的色彩转换，所以如果ＲＧＢ要向　

作则可以直接采用ＲＧＢ模式，如果一些平面设计作品或者教　

程之类的文件需要把图片打印出来，则可以先用ＲＧＢ模式编　

辑，然后再转换为ＣＭＹＫ模式进行打印，或者在印刷前先直　

接转换，然后再进行适当的修饰、锐化以及校色。　

在各种色彩模式中，Ｌａｂ也是一种比较重要的模式，因为　

在ＲＧＢ模式中蓝、绿色之间有太多的过渡色，红、绿之间的　

过渡色又相对较少，而ＣＭＹＫ模式在进行图片的编辑处理过　

程中，会损失的色彩更多，Ｌａｂ模式则会在这方面做出补偿，　

ＣＭＹＫ模式转换，首先要把ＲＧＢ颜色转换为Ｉ』木ａ书ｂ　模式中的　

颜色模式，再通过Ｌ　ａ　模式向ＣＭＹＫ模式转换，同样的，　

如果要把ＣＭＹＫ模式转换为ＲＧＢ，也要先转换为Ｌ　ａ　模　

式。在计算机表色时，Ｌ值的范围在０—１００，ａ为一１２８　１２７，ｂ　

贝Ⅱ为一１２８～１２７。　

１．５　ＨＳＢ模式及灰度模式　

并且该模式无关光线或者设备等外界因素，因此采用Ｌａｂ模　

式进行图片处理，比ＲＢＧ以及ＣＭＹＫ的效率都更高。而且上　

色相、Ｓａｔｕｒａｔｉｏｎ——饱和度、　所谓的ＨＳＢ是指Ｈｕｅ一

文也说到，Ｌａｂ定义了非常广泛的色域，它可以作为其他色彩　

模式互相转换的过渡空间，从而保证在转换过程中，其他色　

彩模式的色彩不会受到损失。　

Ｂｒｉｇｈｔｎｅｓｓ——亮度，这３种特性是颜色的３种属性，而ＨＳＢ　

模式就是将这３种颜色属性进行量化。其中饱和比以及亮度　

是通过百分比值表示的，而色相则是用角度表示，色相的范　

围是从０。到３６０。，其中纯红色为０。。饱和度的范围是从Ｏ％　

到１００％，灰色的饱和度为０，如果饱和度是ｍｏ％￥ｒＪ为完全饱　

和；同样亮度的范围也是０％到１００％。　

所谓的灰度模式是指在该模式中只有灰度，灰度最多可　

以达到２５６级。如果一个彩色的文件转换为灰度模式文件，　

在色彩的表达范围方面，仍是Ｌａｂ处于第一位，接下来　

是ＲＧＢ模式，然后是ＣＭＹＫ模式。如果色域比较大的模式转　

换为色域小的模式，会导致某些色彩的丢失。此外，彩色图　

像无法直接向黑白图像转换，要先转换为灰度图像后，才能　

进行黑白图像的转换。总之，各种色彩模式之间进行转换会　

导致色彩的损失，所以要尽量在建立新文档时就选择适用的　

色彩模式，尽可能地少进行色彩模式的转换。　

ｊｋ　ｊ　ｊ　ｊ　妊　｝　ｅ　｝ｊｋ９ｋ　｝ｊ　ｊ　ｊｋ　＿ｔｊ　ｔｊｋ　｝　

则原来图像中的饱和度、色相等色彩的相关信息会被全部消　

除掉，只保留下亮度。而且要注意，当有颜色的彩色模式转　

ｊｋ　ｊ　ｊ　蕾ｅ士　ｊ　ｊｋ妊　业ｊ‘Ｐ　，　ｊｋｊ　船　

（上接第７８页）　

说明：ｖａｔ　ｉｔｐｓ；ｖａｒ　ｔｈｅＴｏｐ＝１８０这是把界面设计到距离网　

页顶部１８０ＰＸ的位置上。　

参考文献　

【１］李万宝．ＡＳＰ．ＮＥＴ２．０技术详解与应用实例［Ｊ］．北京希望　

电子出版社，２００７，２２　ｆ４１：３１３—３１６．　

ｔｉｐｓ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（　ＱＱ３随着网页移动而移动　

５　结语　

随着互联网的迅速发展，网站里纷纷加入各种即时通信　

功能，使用户可以方便快捷地获得数据。本文设计与实现的　

网络聊天软件，从技术的角度出发，完成了随点随用的基本　

ｆ２】胖鸟工作室．Ｅ时代Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３＋ＡＳＰ网站建设完全　

解决方案［Ｊ】．北京希望电子出版社，２００７，（６）：１２—　

１３．　

【３】薛小龙．ＡＳＰ经典模块开发大全【Ｍ】．电子工业出版社，　

２００８　

的聊天功能和文件传输功能，能够满足用户的基本需求。