基于JSP技术和Ajax技术实现的网络聊天室的设计(含源文件)


获取项目源文件,联系Q:1225467431,可指导毕设,课设


摘 要
编号
淮安信息职业技术学院
毕业论文
题 目 基于JSP技术和Ajax技术实现的聊天室设计
学生姓名 王万爽
学 号 35011219
院 系 计算机与通信工程学院
专 业 计算机应用技术
班 级 350112
指导教师 李刚
顾问教师
二〇一三年十月
摘 要
随着互联网的飞速发展,聊天室这种比较古老的交流方式已经被众多人所认可。通过聊天室在线聊天已成为网络上人与人之间的沟通、交流和联系的一种方式。为此,越来越多的网站开始提供在线的聊天功能。与此同时,聊天室也以其方便、快捷、低成本等优势受到众多企业的亲睐,很多企业的网站中也加入了聊天室,以达到增进企业与消费者、消费者与消费者之间的相互交流和联系的目的。
传统的互联网络聊天室,以显示在线用户和用户信息的实时传送,需要定期刷新页面。刷新页面,不仅要占用一定的系统资源和网络带宽,也会出现白屏”现象,这对良好的用户体验是非常不利的。 Ajax是一个新的web应用,使用Ajax技术的发展不仅解决了页面刷新带来的白屏问题,也减少了对服务器和网络传输的负载。
我做的这个设计就是通过JSP和Ajax实现的无刷新聊天室。
关键词:JSP;Ajax;网络聊天室;无刷新
Abstract
With the rapid development of Internet, chat rooms that compare the old way of communication has been recognized by many people. By online chat chat room has become the Internet interpersonal communication, a way of communication and contact. Therefore, more and more websites started offering online chat. Chat rooms, meanwhile, also with its convenient, fast, low-cost advantages such as affected by many enterprises, many enterprise site has joined the chat room, in order to achieve between the enterprises and consumers, customers and consumers to communicate and contact purpose.
Traditional Internet chat rooms in order to display online users and user messages sent in real time, the need to regularly refresh the page. Page refresh not only to take up some system resources and network bandwidth, but there is also a black and white phenomenon is very detrimental to a good user experience. Ajax is a new web application, the chat room system using Ajax technology development not only solved the page refreshes bring black and white issues, but also reduce the load on the server and network transmission.
I do this is designed by the JSP and Ajax no refresh the chat room
Keywords: Jsp;Ajax;Internet chat rooms;Nofresh;
目 录
TOC 1-3 摘 要 I
Abstract ii
第一章 绪论 1
1.1系统现状 1
1.2国内外主要研究成果 1
1.3课题的主要内容及章节安排 3
第二章 系统开发环境和关键技术 4
2.1系统的开发环境 4
2.2 Application对象 4
2.3 Ajax技术 5
2.4 监控用户在线状态 6
2.5 JSP技术 6
第三章 系统分析与设计 9
3.1系统分析 9
3.1.1聊天室功能需求分析 9
3.1.2聊天室功能性能分析 9
3.2系统运行环境 9
3.3系统预览和项目流程图 10
第四章 系统的实现 12
4.1用户登录模块 12
4.2聊天室主体功能模块 13
4.3实时获取并显示在线人员列表 14
4.4实现用户发言 15
4.5实时显示聊天内容 19
4.6退出聊天室 20
第五章 总结与致谢 22
参考文献 24
第一章 绪论
1.1系统现状
在人们的生活中,信息技术的飞速发展正在发生深刻变化。人与人之间的对话是不再局限于面对面,网上聊天室提供了信息交流的另一个地方。传统的聊天室,以显示在线用户和用户信息的实时传送,需要定期刷新页面。刷新页面,不仅要占用一定的系统资源和网络带宽,也会出现白屏”的现象,这对良好的用户体验是非常不利的。而使用Ajax技术开发的聊天室,不仅可以解决页面刷新带来白屏的问题,也减少了对服务器和网络传输的负载。
随着互联网应用的普及,web应用以其良好的扩展性、易于部署、维护方便等优点逐渐成为软件开发的主流。早期的Web应用采用的是同步交互过程,即用户首先向Web服务器提交一个请求或行为呼叫,服务器接收到客户请求后执行相应处理操作,最后向用户返回处理结果。服务器在处理请求时,用户处于等待状态,有时如果超过了服务器响应时间,甚至返回页面不可用”等提示。另外,当我们只想改变页面的部分数据时,用户的请求会导致服务器重新返回整个页面内容,包括那些没有改变的数据,这不但增加了网络传输的数据量,还影响了客户端的响应时间,为什么我们不能按需”获取数据呢?Ajax技术可以很好的解决上述web应用中存在的问题。Ajax技术是Web2.0的核心之一,本质上是一种RIA(RichIllternet Application)技术。RIA是指具有高度互动性和丰富用户体验的网络应用程序,它既具有消息确认、无刷新页面之下提供快捷的界面响应、拖放式等桌面应用程序的特点,同时又具有部署简单、跨平台等Web应用程序的特点。Ajax技术提供了客户端与服务器异步通信的能力,从而使用户从请求一响应一再请求的循环中解脱出来,同时降低了网络传输的数据量,提高了客户端的响应速度,改善了用户使用体验,使得web应用可以接近甚至达到类似桌面应用”的效果。
而Ajax有上述优势,例如Google Suggest,Gmail,Google Map等等交互程序中都使用了异步通讯技术。不知不觉中,Ajax应用程序占据了整个网络的每一个角落。纵观所有的应用程序,更好的用户体验是其的共同目标,在浏览器中实现桌面用户界面体验是Web开发的一种趋势。Ajax技术从谷歌到IBM,甲骨文,雅虎,BEA系统公司,红帽,Novell公司获得业界众多的IT巨头的支持,其快速发展是值得期待的。技术创新和标准化是Ajax技术发展的必由之路,而W3C已成立了工作小组,专门从事Ajax的规范发展工作。
1.2国内外主要研究成果
Ajax技术的精髓是用异步交互替代了传统的同步交互,所以当用户操作时间大于服务器响应时间的时候,使用Ajax的效果非常明显。而当程序性能的瓶颈在于服务器响应时间的时候,Ajax无法解决程序运行缓慢的问题。因此,Ajax是更适合在网络上的互动频繁轻量级的应用程序。在Ajax开发的应用程序中,Google公司成功将Ajax技术应用到他们的商业产品。Google地图和Google Suggest都应用了这项技术。当用户使用谷歌地图查看地图(包括地图的缩放和平移地图),并没有提交任何请求到服务器,你就可以浏览到地图的各个部分。在这里,它是Ajax技术的应用,使得地图是不刷新的方式,但每个显示原始数据的基础上以增量方式显示。在这种方式下,用户觉得就像是在自己的计算机上查看本地的地图。微软也在积极开发Ajax应用程序:它将Ajax技术应用到的MSN Space上面。当用户使用MSN Space提交回复评论时,浏览器会暂时停顿,然后刷新显示用户提交的评论,这是应用了Ajax的原理。目前,Ajax应用最普遍的领域是GIS-Map方面。GIS的区域搜索强调快速响应,Ajax 的特点正好符合这种要求。在应用Ajax技术开发过程当中,处于核心位置的Ajax引擎实际上是一些复杂的JavaScript程序。 随着网络应用和界面表现的复杂化,使用面向过程的JavaScript 语言描述表现逻辑将会变得很困难。同时, JavaScript的兼容性和调试都会成为使用Ajax技术的一个障碍。为了解决这些问题,开发人员已经开发出了一些基于Ajax技术的框架,方便了开发人员使用,有利于Ajax 技术的进一步推广。当然,任何技术都是有局限性的,Ajax也不例外。Ajax更新页面无需刷新重载,这也使传统的一些用户交互行为变得不可用,如后退、前进和刷新等。另外,移动设备(如手机、PDA等)现在还不能很好的支持Ajax,Ajax 对流媒体的支持也没有Java Applet和Flash这样成熟的技术好。 因此,一些辅助的平台和插件的开发也将是Ajax技术应用当中重要的一部分。
Ajax把大量的运算从服务器转移到了客户端浏览器,这意味着浏览器将承受更大的负担,而不再是简单的文档显示功能。
聊天室作为一个能够吸引人气的栏目,在现代网络应用中随处可见。它的作用是给不同的用户提供一个交流信息的场所。用户在聊天室中可以发布信息,就如同所有用户都在一个个真正室内聊天一样。
传统的聊天室程序一般设置在客户端的网页自动刷新。刷新在这样的数据会带来一些缺点,例如:每次刷新服务器应该重新获取数据,大大提高了服务器上的负载,此刷新过程正在进行,这将是非常严重的影响服务器的性能;每次刷新过程中会产生大量无用数据,不断刷新页面,用户在客户端方面,将导致屏幕闪烁。解决屏幕闪动最重要的一条原则就是,将改动的地方显示到客户端,而那些不需要改动的地方则尽量不要让用户感觉到变化。一个更好的解决办法是使用Ajax技术的无刷新聊天室应用。
现在的聊天室通过四个主要功能模块实现了聊天室中用户登录、注销、环境设置、发送消息、读取消息和查看在线用户列表等。聊天室系统为用户提供了聊天场所,操作员可对后台网站的风格、广告链接等进行设置;用户可以根据个人的习惯选择字体、文字颜色和表情等;前台聊天室具有私聊的功能,私聊的内容仅供私聊双方查看;聊天者可自己手动清除聊天内容。操作员可通过客户端处理模块获取界面元素从而得到聊天内容或与服务器交互更新客户端页面响应用户事件。服务器端响应模块可提供聊天室界面元素信息获得提交数据。
1.3课题的主要内容及章节安排
现在,多渠道的信息源、网络化的数据分布、快捷医用的交互操作、智能化的分析决策等特点越来越成为衡量优良聊天软件的关键,因此,该网络聊天室是基于jsp语言运行于MyEclipse Java平台上,利用的技术主要是,使用配置文件作为数据管理。为实现和方便客户端间通信,在客户端进行了人性化的界面设计,用户可以输入用户名,登陆界面,改变字体颜色等功能。
第一章对本次课题的背景及意义、课题现状、课题内容与目标进行了深入的阐述。
第二章介绍了系统的开发环境和关键技术,例如Ajax技术、JSP技术、滚屏显示技术等等。
第三章是系统分析与设计。将对系统进行需求分析,对组成系统的功能模块进行划分,对每个模块将要实现的功能进行阐述和说明。对系统的结构进行设计,设计共享数据结构。
第四章是系统实现,分别介绍了服务器端和客户端每个功能的执行过程,画出主要模块的流程图。
第五章是总结与致谢。
最后,对本设计进行归纳总结,全面阐述本次设计中的体会。
第二章 系统开发环境和关键技术
2.1系统的开发环境
MyEclipse Java如图1-1系统开发环境。
图1-1系统开发环境
2.2 Application对象
Application对象是一个环境上下文(context)对象,用于保存应用程序中的所有公有数据,服务器启动并且自动创建Application对象以后,只要没有关闭服务器,Application对象将一直存在,并且可以被所有用户共享。
Application对象为JSP提供的内置对象,可以直接使用,但在servlet中,需要通过以下代码来获取该对象的实例,才可以使用该对象。 ServletContext application=getServletContext();
Application对象提供了很多方法,我的设计中,只使用了setAttribute()和getAttribute()方法。
首先来介绍setAttribute()方法,该方法用于将一个对象绑定到一个属性上,该属性在整个Servlet上下文中都适用。setAttribute()方法的语法格式如下;Application. setAttribute(String name,Object object);
参数说明:name:用于指定的一个属性名该属性在整个Servlet上下文都适用。object:用于指定属性值。
如本设计中的,设置保存聊天信的Application对象的属性的具体代码如下:
application。setAttribute(message”.sourceMessage);
下面我们再来介绍getAttribute()方法,该方法用于返回Application对象的指定属性的值。如果不存在该属性,则返回null。getAttribute()方法的基本语法如下:
Application。getAttribute(String name);参数说明:Name:用于指定一个属性名。
本设计中,设置获取聊天信息的Application对象的属性的具体代码如下:
StringsourceMessage=application.getAttribute(message”).toString();
2.3 Ajax技术
Ajax是一种创建交互式网页的web开发技术。Ajax的一个非常成功的案例就是Google,当用户在Google的搜索输入框中输入关键字的时候。他会提示与关键字相关的另一些关键字。用户可以对自己喜欢的一些关键字进行选择,这样既方便了用户定位自己的需要,又可以很好的引导搜索结果。
在Ajax应用中,页面中用户的操作将通过Ajax引擎与服务器进行通信,然后将返回结果提交给客户端页面的Ajax引擎,而有Ajax引擎决定这些数据插入到页面的任何位置。
Ajax的最大特点的就是很好的用户体验,大多数使用Ajax技术的web应用程序,比同类没有使用的web应用程序的用户体验要好的多,尽管他们都能完成相类似的功能。例如,一个普通的用户注册页面,如果用户希望知道注册的用户名是否已经注册过了,那只能等提交表单到服务器以后并重新来到一个新的页面,才知道用户名是否可用,这种情况每次单击按钮都会导致几秒钟的延迟和屏幕刷新,但事实上页面改动的地方却只有很少一部分,Ajax正在打破这种状况,是页面再无刷新的情况下,完成某些与服务器的交互功能。大大提高了用户的体验感。
2,Ajax不是单一的技术,而是四种技术的集合,有javascript ,css,Dom XMLHttpRequestAjax程序是用javascript语言写成的。Ajax程序可以使用CSS来控制页面的样式。DOM,指的是文本对象模型,它是一个web页面的对象模型,可以用javascript来操作的页面结构。XMLHttpRequest对象用来在后台向服务器端发送请求,数据的格式可以使任何的文本格式,如XML、纯文本。他也是Ajax进行异步通信的 关键元素。
这四种技术各司其职,其中javascript是其他三中的粘合剂,javascript可以通过修改DOM的结构来改变界面,或者完全改变DOM的结构来重新绘制用户界面;XMLHttpRequest对象则用来与服务器进行异步通信,javascript也正是通过控制他来提交请求和获取最新数据的。
Ajax也会大量使用DHTML进行编程,并且它与服务器端的异步通信能力使得一个web页面的使用寿命大大增长,用户交互性大大增强了。
Ajax技术的优缺点:
作为富客户端技术之一的Ajax的最大优点,就是再不更新整个页面的前提下维护数据。这使得web应用程序能够更为迅捷的回应用户动作,并避免了在网络上发送那些没有改变过的信息。与其他富客户端技术不同,Ajax不需要任何浏览器插件,直接通过浏览器内置的javascript控制浏览器的内容和行为即可。而其他的富客户端技术往往需要安装插件,并且以一个单独的进程来运行这些富客户端,一旦处理不当,很可能造成速度很慢的后果。
缺点:就是Ajax在不同的浏览器运行时,由于各个浏览器之间的差异,是的开发者在众多不同的平台和浏览器上经过严格的测试,但是随着Ajax技术的成熟,一些简化跨平台的Ajax程序库,也相继问世,程序员可以使用这些运行库进行Ajax的开发,也不担心Ajax的跨平台性。还有一个缺点就是;他动态改变的内容无法保存到本地或通过收藏夹来保存。这其实是因为Ajax改变浏览器的内容和行为,往往是通过修改网页的DOM和CSS来控制的,这些新消息都仅仅在浏览器窗口没关之前存在于内存里。
Ajax更适合有少量页面内容需要改变的客户端编程,如果页面的大多说内容都需要改变的时候,还是建议使用让整个页面刷新的方式较好。
2.4 监控用户在线状态
在聊天室程序中需要实时监控用户在线状态,当用户非正常退出时(如:没有单击退出聊天室”按钮,也没有单击窗口的关闭按钮”,而是直接将页面转向其他网站),能够保证将该用户从列表中删除。可以应用Servlet中的监听器(HttpBingListener接口)实现此效果。
2.5 JSP技术
JSP(JavaServer Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的,即能在Linux下运行,也能在其他操作系统上运行。 JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离,支持可重用的基于组件的设计,使基于Web的应用程序的开发变得迅速和容易。 Web服务器在遇到访问JSP网页的请求时,首先执行其中的程序段,然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等,以实现建立动态网页所需要的功能。 JSP与Java Servlet一样,是在服务器端执行的,通常返回该客户端的就是一个HTML文本,因此客户端只要有浏览器就能浏览。 JSP的1.0规范的最后版本是1999年9月推出的,12月又推出了1.1规范。目前较新的是JSP1.2规范,JSP2.0规范的征求意见稿也已出台。 JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理,然后将生成的HTML页面返回给客户端的浏览器。Java Servlet 是JSP的技术基础,而且大型的Web应用程序的开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用,完全的面向对象,具有平台无关性且安全可靠,主要面向因特网的所有特点。
JSP技术的强势 (1)一次编写,到处运行。在这一点上Java比PHP更出色,除了系统之外,代码不用做任何更改。 (2)系统的多平台支持。基本上可以在所有平台上的任意环境中开发,在任意环境中进行系统部署,在任意环境中扩展。相比ASP/PHP的局限性是显而易见的。 (3)强大的可伸缩性。从只有一个小的Jar文件就可以运行Servlet/JSP,到由多台服务器进行集群和负载均衡,到多台Application进行事务处理,消息处理,一台服务器到无数台服务器,Java显示了一个巨大的生命力。 (4)多样化和功能强大的开发工具支持。这一点与ASP很像,Java已经有了许多非常优秀的开发工具,而且许多可以免费得到,并且其中许多已经可以顺利的运行于多种平台之下。 JSP技术的弱势 (1) 与ASP一样,Java的一些优势正是它致命的问题所在。正是由于为了跨平台的功能,为了极度的伸缩能力,所以极大的增加了产品的复杂性。 (2) Java的运行速度是用class常驻内存来完成的,所以它在一些情况下所使用的内存比起用户数量来说确实是最低性能价格比”了。从另一方面,它还需要硬盘空间来储存一系列的.java文件和.class文件,以及对应的版本文件。 JSP六种内置对象: request, response, out, session, application, config, pagecontext, page, exception. 一.request对象: 该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以获取用户提交信息。 二.response对象: 对客户的请求做出动态的响应,向客户端发送数据。 三.session对象 1.什么是session:session对象是一个JSP内置对象,它在第一个JSP页面被装载时自动创建,完成会话期管理。 从一个客户打开浏览器并连接到服务器开始,到客户关闭浏览器离开这个服务器结束,被称为一个会话。当一个客户访问一个服务器时,可能会在这个服务器的几个页面之间反复连接,反复刷新一个页面,服务器应当通过某种办法知道这是同一个客户,这就需要session对象。 2.session对象的ID:当一个客户首次访问服务器上的一个JSP页面时,JSP引擎产生一个session对象,同时分配一个String类型的ID号,JSP引擎同时将这个ID号发送到客户端,存放在Cookie中,这样session对象和客户之间就建立了一一对应的关系。当客户再访问连接该服务器的其他页面时,不再分配给客户新的session对象,直到客户关闭浏览器后,服务器端该客户的session对象才取消,并且和客户的会话对应关系消失。当客户重新打开浏览器再连接到该服务器时,服务器为该客户再创建一个新的session对象。 四.aplication对象 1.什么是application: 服务器启动后就产生了这个application对象,当客户再所访问的网站的各个页面之间浏览时,这个application对象都是同一个,直到服务器关闭。但是与session不同的是,所有客户的application对象都是同一个,即所有客户共享这个内置的application对象。 2.application对象常用方法: (1)public void setAttribute(String key,Object obj): 将参数Object指定的对象obj添加到application对象中,并为添加的对象指定一个索引关键字。 (2)public Object getAttribute(String key): 获取application对象中含有关键字的对象。 五.out对象 out对象是一个输出流,用来向客户端输出数据。out对象用于各种数据的输出。
第三章 系统分析与设计
3.1系统分析
3.1.1聊天室功能需求分析
用户登录,包括用户是否在线
实时显示在线人员列表及在线人数
用户发言,包括显示聊天内容和滚屏显示聊天信息
安全退出聊天室,包括单击关闭按钮退出聊天室。
3.1.2聊天室功能性能分析
普通用户能够登录的聊天室进行文本的聊天,能够方便的实现公共交谈、选择颜色、添加文字表情等。可以用Ajax实现无刷新操作。
3.2系统运行环境
在开发聊天室系统时,需要具备下面的软件环境:
服务器端:
操作系统:WindowsXP。
Web服务器:Tomcat6.0。
Java开发包:MyEclipse。
客户器端:
IE6.0。
3.3项目流程图和系统预览
(1)项目流程图
聊天室的系统流程,如图3-1
图3-1项目流程图
(2)为了是使大家对本模块有一定的了解,下面将给出聊天室的主界面预览效果图。聊天室的登录界面如图3-2登录界面.输入用户名,然后单击进入”按钮,将进入聊天室的主界面,如图3-3主界面。
图3-2登录界面
图3-3主界面
第四章 系统的实现
4.1用户登录模块
当用户访问聊天室时,首先进入的是登录聊天室页面。在该页面中,用户输入自己喜欢的用户名,如图4-1登录界面,单击进入按钮,系统将判断输入的用户名是否被占用,如果被占用将给出提示。
图4-1登录界面
<%@page contentType=text/html pageEncoding=UTF-8 %>

 




 

 






 
 
  用户名:



4.2聊天室主体功能模块
在用户登录页面中输入用户名,单击进入”按钮即可进去聊天室的主界面。如图4-2聊天室主体功能模块,在页面中包括页面头部、在线人员列表区、聊天内容显示区和用户发言区4部分。
图4-2聊天室主体功能模块
4.3实时获取并显示在线人员列表
在设计聊天室程序时,为了让用户及时了解在线用户,并与其他用户交流,需要提供实时获取并显示在线人员列表的功能。这小节介绍聊天室的主界面中,左侧显示在线人员列表及在线人数。如图4-3在线人员列表图。
图4-3在线人员列表图
为了实时显示在线人员列表,这里应用了Ajax技术。实现实时显示在线人员列表的具体步骤如下:
1、编写自定义的JavaScript函数showOnline(),用于实例化Ajax对象,showOline()函数的具体代码如下:
function showOnline(){
varloader=newnet.AjaxRequest(online.jsp?nocache=+new Date().getTime(),deal_online,onerror,GET);}
其中?nocache=+new Date().getTime()的用处是更新在线人员列表。
2、Ajax进行异步请求目标的URL地址是onlin.jsp,即JSP文件。在该文件中,主要是将保存在集合类中的在线人员列表显示到页面。Online.jsp页面的代码如下:
<%@page contentType=text/html pageEncoding=UTF-8 %>
<%@ page import=com.wgh.model.UserInfo%>
<%@ page import=java.util.*%>
<%
UserInfo list=UserInfo.getInstance();
Vector vector=list.getList();
int amount=0;
%>



<%if(vector!=null&&vector.size()>0){
String username=;
amount=vector.size();
for(int i=0;iusername=(String)vector.elementAt(i);%>;i++){

)><%=username%>=#onclick=set(<%=username%>=23align=center>
<%}}%>

 

 

欢迎来到心之语聊天室!
所有人
当前在线[<%=amount%>]人

3、在聊天室的主界面中,将左侧用于显示在线人员列表的单元格的id属性设置为online,用于实时显示在线人员列表,具体代码如下:
在线人员列表
4、编写Ajax的回调函数deal_online(),用于将获取的在线人员列表赋值给id为online的标记的innerHYML属性。Deal_online()函数的具体代码如下:
function deal_online(){
online.innerHTML=this.req.responseText;
}
5、为了让页面载入后就调用Ajax获取在线人员列表,并且每隔10秒钟便获取一次数据,还需要在页面中添加JavaScript代码,具体代码如下:
window.setInterval(showOnline();,10000);
window.onload=function(){
showOnline(); //当页面载入后显示在线人员列表
4.4实现用户发言
在聊天室程序中一个必不可少的功能就是实现用户发言,设计中,用户发言区位于聊天室主界面的底部,如图:4-4用户发言模块。
图4-4用户发言模块
实现用户发言的具体步骤如下:
1、在页面的合适位置添加用于收集用户发言信息的表单及表单元素,关键代码如下:
 
 
[${username} ]对
表情
无表情的微笑着笑呵呵地热情的温柔的红着脸幸福的嘟着嘴热泪盈眶的依依不舍的得意的神秘兮兮的恶狠狠的大声的生气的幸灾乐祸的同情的遗憾的正义凛然的严肃的慢条斯理的无精打采的
说:   字体颜色:
默认颜色红色热情蓝色开朗桃色浪漫绿色青春青色清爽紫色拘谨暗夜兴奋深蓝忧郁卡其制服镏金岁月湖波荡漾发亮蓝紫爱的暗示墨绿深沉烟雨蒙蒙

 



聊天对象文本框设置为只读属性是用户就不能手动输入聊天对象,因此还需要提供选择聊天对象的功能,可以通过在主页面中添加选择聊天对讲的JavaScript自定义函数及在线人员列表中添加超链接实现。实现将选择的聊天对象添加到聊天对象文本框的JavaScript代码如下:
function set(selectPerson){ //自动添加聊天对象
if(selectPerson!=${username}){
form1.to.value=selectPerson;
}else{
alert(请重新选择聊天对象!);}
}
2、编写自定义的JavaScript函数send(),用于调用Ajax实现用户发言。在函数中,首先验证用户输入信息的合法性然后再将提交的表单的内容连接为一个参数字符串,最后实例化Ajax对象。Send()函数的具体代码如下:
function send(){ //验证聊天信息并发送
if(form1.to.value==){
alert(请选择聊天对象!);return false;
}
if(form1.content1.value==){
alert(发送信息不可以为空!);form1.content1.focus();return false;
}
Varparam=from=+form1.from.value+&face=+form1.face.value+&color=+form1.color.value+&to=+form1.to.value+&content=+ form1.content1.value;
varloader=newnet.AjaxRequest(Messages?action=sendMessage,deal_send,onerror,POST,param);
}
3、在聊天室相关的Servlet实现类中添加发送聊天信息的方法sendMessages()。在该方法中,首先获取用户发言的相关信息,并将发言信息保存在应用程序对象ServletContext中,然后通过RequsetDispatcher对象的forward()方法将请求转发。SendMessages()方法的具体代码如下:
public void sendMessages(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType(text/html;charset=UTF-8);
request.setCharacterEncoding(UTF-8);
Random random = new Random();
String from = request.getParameter(from); //发言人
String face = request.getParameter(face); //表情
String to = request.getParameter(to); //接收者
String color = request.getParameter(color); //字体颜色
String content = request.getParameter(content); //发言内容
String sendTime =new Date().toLocaleString(); //发言时间
ServletContext application = getServletContext();
String sourceMessage = application.getAttribute(message).toString();
try {
//发言时间
sourceMessage += + from + + face + [ + to + ]说: + + content + ( + sendTime + )
;application.setAttribute(message,sourceMessage); request.getRequestDispatcher(Messages?action=getMessages&nocache=+ random.nextInt(10000)).forward(request, response);
}
catch (Exception ex) {
Logger.getLogger(Messages.class.getName()).log(Level.SEVERE, null, ex);
}
}
4.5实时显示聊天内容
在聊天室程序中另一个必不可少的功能就是显示聊天内容。这个版块是在主界面的右侧,如图4-5聊天内容模块。
图4-5聊天内容模块
在实现显示聊天内容功能时,为了实时显示聊天内容,这里应用了Ajax技术,技术Ajax重构的方法,实现实时显示聊天内容的具体步骤如下:
1、编写自定义的JavaScript函数showContent(),用于实例化Ajax对象。showContent()函数的具体代码如下:
function showContent(){
varloader1=newnet.AjaxRequest(Messages?action=getMessages&nocache=+new Date().getTime(),deal_content,onerror,GET);
}
2、从上可以看出,Ajax进行异步请求目标的URL地址为MessagesAction?action=getMessage。从该URL地址可以看出,在进入主界面前会调用聊天室相关的Servlet实现类中的getMessages()。getMessage()方法的具体代码如下:
public void getMessages(HttpServletRequest request,HttpServletResponse response) {response.setContentType(text/html;charset=UTF-8);
try
{request.getRequestDispatcher(content.jsp).forward(request, response);
}
catch (Exception ex) {
Logger.getLogger(Messages.class.getName()).log(Level.SEVERE, null, ex);}
}
3、编写显示聊天内容的JSP页面content.jsp,在该页面中只需要应用EL表达式将返回的执行结果输出即可,具体代码如下:
<%@page contentType=text/html pageEncoding=UTF-8 %>
${message}
4、在聊天室主界面的右侧侠士聊天内容的单元格中添加一个id属性为content的
标记,用于实时显示聊天内容,具体代码如下:
聊天内容

5、编写Ajax的回调函数deal_content(),在这个函数中,首先获取Ajax处理页面的返回值,然后取出字符串中的Unicode空白符,最后判断在获取信息时是否产生错误,如果是,则退出聊天室,否则将获取的聊天内容辅助给id为cotent的
标记的innerHTML属性,deal_content()函数的具体代码如下:
function deal_content(){
var returnValue=this.req.responseText; //获取Ajax处理页的返回值
var h=returnValue.replace(/s/g,); //去除字符串中的Unicode空白符
if(h==error){
//alert(您的账户已经过期,请重新登录!);
Exit();
}else{
content.innerHTML=sysBBS+returnValue+;
document.getElementById(content).scrollTop = document.getElementById(content).scrollHeight*2; //当聊天信息超过一屏时,设置最先发送的聊天信息不显示
}
}
6、为了让页面载入后就调用Ajax获取聊天内容,并且每隔一秒便获取一次数据,还需要在页面中添加JavaScript代码,具体代码如下:
window.setInterval(showOnline();,10000);
window.onload=function(){
showOnline(); //当页面载入后显示在线人员列表
}
4.6退出聊天室模块
在我设计的聊天室中提供了两种退出聊天室的方法,一种是单击主页面中的退出聊天室”
按钮,另一种是单击浏览器的关闭”按钮。需要注意的是,无论采用哪种方法都会弹出如图4-6退出提示。
图4-6退出提示
实现安全退出聊天室的具体步骤如下:
1、在主页面的合适位置添加退出聊天室”按钮,并在按钮的onClick事件中调用自定义的javaScript()函数Exit(),关键代码如下:

2、编写自定义的JavaScript函数Exit(),在该函数中首先将页面重定向到退出聊天室页面leave.jsp,然后弹出弹出欢迎您下次光临!”对话框,具体代码如下:
function Exit(){
window.location.href=leave.jsp;
alert(欢迎您下次光临!);
}
3、编写退出聊天室的页面leave.jsp,在该页面中,首先销毁Session,然后将页面重新定向到登录页面。Leave.jsp页面的完整代码如下:
<%@page contentType=text/html pageEncoding=UTF-8 %>
<%session.invalidate();
response.sendRedirect(index.jsp);
%>
总结
经过一个多月的毕业设计与开发,聊天室已基本完成,系统需求功能基本实现,测试运行基本与需求相符。该系统完成了用户登录、发送信息、公开聊天、查看在线人员的功能。操作简便,易于使用。
在毕业设计的初期阶段,我主要学习了与本课题相关的理论知识,包括:Ajax、jsp等相关知识。
在查阅大量资料制订了系统需求后,在老师的指导下我着手制定了系统的需求分析规格说明书和系统概要说明书。接着便进入了系统详细设计和编码阶段,在这个阶段,由于自己动手经验不足和对开发工具的陌生,系统遇到了很多大大小小的问题,在一次次克服困难的过程中,我得到了极大的锻炼,基本上掌握了一些的编程技巧,同时也获得了许多宝贵的软件开发经验和技巧,这为我今后的学习工作打下了坚实的基础。
在这段时间里我学到了很多以前没有学到的知识,同时也将以前所学过的知识运用到实践项目中,在提高理论知识的基础上,也充分地锻炼了自己的动手能力。
当然这个系统还存在许多有待完善之处:
功能相对较少,有待于添加,比方说像文件传输,查找,语音等功能。
在文字传送的同时增加表情发送的功能;
界面设计的不够精致美观。由于自己经验不足且时间有限,所以界面设计不尽人意;
用户的权限设置应更加严谨,层次更加清晰,多功能的实现不同权限的用户对系统不同功能的操作。
除了以上列举的一些不足之处外,此系统还有其它很多功能需要增强,由于个人水平有限,时间也比较紧,只能实现系统的基本操作,对其它功能我想更进一步的学习并完善。
通过这次毕业设计,我更深刻的认识到了教学实践在大学课程中的重要性,同时也发觉到了自己在学习方面存在的不足之处,在以后的学习中我会努力改进这些不足、不断提高自己的动手实践能力。

致 谢
衷心感谢在做毕业设计的这几个月中老师的帮助,首先要向我的导师致以崇高的敬意。导师在专业课程的学习、素材的收集、课题的确立、资料的查阅都给以的热忱的关怀和细心的指导。老师严谨的治学态度、渊博的学识、对事业的兢兢业业、不断进取的精神,为我今后的生活及工作树立了榜样,我的点滴进步无不凝结着导师的心血。
还要感谢各位任课老师,老师们深厚的学术功底、旺盛的工作热情和平易近人的态度是我学习的榜样。
感谢审阅本文的老师,感谢你们在百忙之中抽出宝贵时间来审阅本文,并期待你们的批评指正。
最后,再次向各位老师的关心和帮助表示衷心的感谢!
参考文献
[1] 谭日森.Ajax技术的特点及发展前景[J].黑龙江科技信息 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=BaseLink&DBCode=cjfd&TableName=cjfdbaseinfo&Field=BaseID&Value=HLKX&NaviLink=黑龙江科技信息​),2007,21 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=IssueLink&DBCode=cjfd&TableName=cjfdyearinfo&Field=BaseID*year*issue&Value=HLKX*2007*21&NaviLink=黑龙江科技信息​):87.
[2] 张峰,宋莉.JSP的研究与应用[J].科技信息(学术研究) (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=BaseLink&DBCode=cjfd&TableName=cjfdbaseinfo&Field=BaseID&Value=KJXI&NaviLink=科技信息(学术研究)​),2008,03 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=IssueLink&DBCode=cjfd&TableName=cjfdyearinfo&Field=BaseID*year*issue&Value=KJXI*2008*03&NaviLink=科技信息(学术研究)​):14~15.
[3] 刘亮亮,王宁,王亚飞.XMLHttpRequest异步功能在Web开发中的实现[J].黑龙江科技信息 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=BaseLink&DBCode=cjfd&TableName=cjfdbaseinfo&Field=BaseID&Value=HLKX&NaviLink=黑龙江科技信息​), 2009,29:3.
[4] Linda Dailey Paulson..Building rich web applications with Ajax[J].Computer (​http:​/​​/​ieeexplore.ieee.org​/​xpl​/​RecentIssue.jsp?punumber=2​),2005,10:14~17.
[5] Mark Frydenberg.A Multi-Tiered Web Development Capstone Project Using Databases, Web Services, and AJAX[J].Information Systems Education Journal,2008,37:3~15.
[6] 黄华.AJAX技术及应用综述[J].科技资讯 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=BaseLink&DBCode=cjfd&TableName=cjfdbaseinfo&Field=BaseID&Value=ZXLJ&NaviLink=科技资讯​),2007,11:87.
[7] 王锟,方明.Ajax技术研究与应用[J].现代电子技术,2007,6:93~98.
[8] 韩学洲.基于AJAX的Web应用存在问题研究[J].宁波职业技术学院学报 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=BaseLink&DBCode=cjfd&TableName=cjfdbaseinfo&Field=BaseID&Value=NZYX&NaviLink=宁波职业技术学院学报​),2008,05:84~86.
[9] 冉春玉, 童莹.Web2.0与Ajax技术解析[J].河南科技 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=BaseLink&DBCode=cjfd&TableName=cjfdbaseinfo&Field=BaseID&Value=HNKJ&NaviLink=河南科技​),2010,09:55~56.
[10] 吕林涛, 万经华, 周红芳.基于AJAX的Web无刷新页面快速更新数据方法[J].计算机应用研究 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=BaseLink&DBCode=cjfd&TableName=cjfdbaseinfo&Field=BaseID&Value=JSYJ&NaviLink=计算机应用研究​),2006,11:199~223.
[11] 冉春玉, 童莹.Ajax技术及其Web开发[J].福建电脑 (​http:​/​​/​acad.cnki.net​/​kns55​/​oldNavi​/​Bridge.aspx?LinkType=BaseLink&DBCode=cjfd&TableName=cjfdbaseinfo&Field=BaseID&Value=FJDN&NaviLink=福建电脑​),2007,07:100~101.
[12]利用网络聊天室进行数字参考咨询服务研究——以碧聊聊天室为实例 胡国芳,杨新涯.[J]. 情报杂志, 2004, (05)
4
获取项目源文件,联系Q:1225467431,可指导其它毕设,课设
=content1type=textsize=70> =165valign=topbgcolor=#f6fdedid=online>

猜你喜欢

转载自blog.csdn.net/u010783228/article/details/86035412