基于jsp技术和ajax技术实现的网络聊天室的设计

编号 淮安信息淮安信息职业职业技技术术学院学院 毕毕业业论论文文 题 目基于 JSP 技术和 Ajax 技术实现的聊天室设计 学生姓名王万爽 学 号35011219 院 系 计算机与通信工程学院 专 业计算机应用技术 班 级350112 指导教师李刚 顾问教师 二一三年十月 摘 要 I 摘摘 要要 随着互联网的飞速发展，聊天室这种比较古老的交流方式已经被众多人所 认可。通过聊天室在线聊天已成为网络上人与人之间的沟通、交流和联系的一 种方式。为此，越来越多的网站开始提供在线的聊天功能。与此同时，聊天室 也以其方便、快捷、低成本等优势受到众多企业的亲睐，很多企业的网站中也 加入了聊天室，以达到增进企业与消费者、消费者与消费者之间的相互交流和 联系的目的。 传统的互联网络聊天室，以显示在线用户和用户信息的实时传送，需要定 期刷新页面。刷新页面，不仅要占用一定的系统资源和网络带宽，也会出现 “白屏”现象，这对良好的用户体验是非常不利的。 Ajax 是一个新的 web 应用， 使用 Ajax 技术的发展不仅解决了页面刷新带来的白屏问题，也减少了对服务器 和网络传输的负载。 我做的这个设计就是通过 JSP 和 Ajax 实现的无刷新聊天室。 关键词：JSP；Ajax；网络聊天室；无刷新 Abstract II 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; 目 录 III 目目 录录 摘摘 要要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.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 是更适合 淮安信息职业技术学院毕业设计论文 2 在网络上的互动频繁轻量级的应用程序。在 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 技术的无刷新聊天室应用。 现在的聊天室通过四个主要功能模块实现了聊天室中用户登录、注销、环 境设置、发送消息、读取消息和查看在线用户列表等。聊天室系统为用户提供 了聊天场所,操作员可对后台网站的风格、广告链接等进行设置；用户可以根据 个人的习惯选择字体、文字颜色和表情等；前台聊天室具有私聊的功能,私聊的 第一章 绪论 3 内容仅供私聊双方查看；聊天者可自己手动清除聊天内容。操作员可通过客户 端处理模块获取界面元素从而得到聊天内容或与服务器交互更新客户端页面响 应用户事件。服务器端响应模块可提供聊天室界面元素信息获得提交数据。 1.3 课题的主要内容及章节安排 现在，多渠道的信息源、网络化的数据分布、快捷医用的交互操作、智能 化的分析决策等特点越来越成为衡量优良聊天软件的关键，因此，该网络聊天 室是基于jsp语言运行于MyEclipse Java平台上，利用的技术主要是，使用配置 文件作为数据管理。为实现和方便客户端间通信，在客户端进行了人性化的界 面设计,用户可以输入用户名，登陆界面，改变字体颜色等功能。 第一章对本次课题的背景及意义、课题现状、课题内容与目标进行了深入 的阐述。 第二章介绍了系统的开发环境和关键技术，例如 Ajax 技术、JSP 技术、滚 屏显示技术等等。 第三章是系统分析与设计。将对系统进行需求分析，对组成系统的功能模 块进行划分，对每个模块将要实现的功能进行阐述和说明。对系统的结构进行 设计，设计共享数据结构。 第四章是系统实现，分别介绍了服务器端和客户端每个功能的执行过程， 画出主要模块的流程图。 第五章是总结与致谢。 最后，对本设计进行归纳总结，全面阐述本次设计中的体会。 第二章 系统开发环境和关键技术 4 第二章 系统开发环境和关键技术 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); 第二章 系统开发环境和关键技术 5 参数说明：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 淮安信息职业技术学院毕业设计论文 6 可以通过修改 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 的应用程序的开发 第二章 系统开发环境和关键技术 7 变得迅速和容易。 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 对象。 2session 对象的 ID：当一个 淮安信息职业技术学院毕业设计论文 8 客户首次访问服务器上的一个 JSP 页面时，JSP 引擎产生一个 session 对象，同 时分配一个 String 类型的 ID 号，JSP 引擎同时将这个 ID 号发送到客户端，存 放在 Cookie 中，这样 session 对象和客户之间就建立了一一对应的关系。当客 户再访问连接该服务器的其他页面时，不再分配给客户新的 session 对象，直 到客户关闭浏览器后，服务器端该客户的 session 对象才取消，并且和客户的 会话对应关系消失。当客户重新打开浏览器再连接到该服务器时，服务器为该 客户再创建一个新的 session 对象。 四aplication 对象 1什么是 application: 服务器启动后就产生了这个 application 对象，当客户再所访问 的网站的各个页面之间浏览时，这个 application 对象都是同一个，直到服务 器关闭。但是与 session 不同的是，所有客户的 application 对象都是同一个， 即所有客户共享这个内置的 application 对象。 2application 对象常用方法: (1)public void setAttribute(String key,Object obj): 将参数 Object 指定 的对象 obj 添加到 application 对象中，并为添加的对象指定一个索引关键字。 (2)public Object getAttribute(String key): 获取 application 对象中含 有关键字的对象。 五out 对象 out 对象是一个输出流，用来向客户端输出数 据。out 对象用于各种数据的输出。 第二章 系统开发环境和关键技术 9 第三章 系统分析与设计 3.1 系统分析 3.1.1 聊天室功能需求分析 用户登录，包括用户是否在线 实时显示在线人员列表及在线人数 用户发言，包括显示聊天内容和滚屏显示聊天信息 安全退出聊天室，包括单击关闭按钮退出聊天室。 3.1.2 聊天室功能性能分析 普通用户能够登录的聊天室进行文本的聊天，能够方便的实现公共交谈、 选择颜色、添加文字表情等。可以用 Ajax 实现无刷新操作。 3.2 系统运行环境 在开发聊天室系统时，需要具备下面的软件环境： 服务器端： 操作系统：WindowsXP。 Web 服务器：Tomcat6.0。 Java 开发包：MyEclipse。 客户器端： IE6.0。 3.3 项目流程图和系统预览 (1)项目流程图 聊天室的系统流程，如图 3-1 淮安信息职业技术学院毕业设计论文 10 用户登录聊天室是否在线 进入聊天室 主界面 发送聊天内 容 显示聊天内 容 选择聊天对 象 选择表情文 字 文字颜色 输入发言内 容 是 否 图 3-1 项目流程图 (2)为了是使大家对本模块有一定的了解，下面将给出聊天室的主界面预览 效果图。聊天室的登录界面如图 3-2 登录界面.输入用户名，然后单击“进入” 按钮，将进入聊天室的主界面，如图 3-3 主界面。 图 3-2 登录界面 第三章 系统分析与设计 11 图 3-3 主界面 第四章 系统的实现 12 第四章 系统的实现 4.1 用户登录模块 当用户访问聊天室时，首先进入的是登录聊天室页面。在该页面中，用户输入自己 喜欢的用户名，如图 4-1 登录界面，单击进入按钮，系统将判断输入的用户名是否被占 用，如果被占用将给出提示。 图 4-1 登录界面 聊天室 functionfunction check() ifif(form1.username.value=“) alert(“请输入用户名！“);form1.username.focus();returnreturn falsefalse; elseelse ifif(form1.username.value=“) alert(“请不要输入非法字符！“);form1.username.focus();returnreturn falsefalse; 第四章 系统的实现 13 用户名： 4.2 聊天室主体功能模块 在用户登录页面中输入用户名，单击“进入”按钮即可进去聊天室的主界面。如图 4-2 聊天室主体功能模块，在页面中包括页面头部、在线人员列表区、聊天内容显示区和 用户发言区 4 部分。 图 4-2 聊天室主体功能模块 4.3 实时获取并显示在线人员列表 在设计聊天室程序时，为了让用户及时了解在线用户，并与其他用户交流，需要提 淮安信息职业技术学院毕业设计论文 14 供实时获取并显示在线人员列表的功能。这小节介绍聊天室的主界面中，左侧显示在线 人员列表及在线人数。如图 4-3 在线人员列表图。 图 4-3 在线人员列表图 为了实时显示在线人员列表，这里应用了 Ajax 技术。实现实时显示在线人员列表的 具体步骤如下： 1、编写自定义的 JavaScript 函数 showOnline(),用于实例化 Ajax 对象， showOline()函数的具体代码如下： functionfunction showOnline() varvarloader=newnewnet.AjaxRequest(“online.jsp?nocache=“+newnew Date().getTime(),deal_online,onerror,“GET“); 其中?nocache=“+newnew Date().getTime()的用处是更新在线人员列表。 2、Ajax 进行异步请求目标的 URL 地址是 onlin.jsp，即 JSP 文件。在该文件中，主 要是将保存在集合类中的在线人员列表显示到页面。Online.jsp 页面的代码如下： 欢迎来到心之语聊天室！ 所有 第四章 系统的实现 15 人 0) String username=“; amount=vector.size(); forfor(intint i=0;i )“ 当前在线人 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=functionfunction() showOnline(); /当页面载入后显示在线人员列表 4.4 实现用户发言 在聊天室程序中一个必不可少的功能就是实现用户发言，设计中，用户发言区位于 聊天室主界面的底部，如图：4-4 用户发言模块。 图 4-4 用户发言模块 实现用户发言的具体步骤如下： 1、在页面的合适位置添加用于收集用户发言信息的表单及表单元素，关键代码如下： 淮安信息职业技术学院毕业设计论文 16 $username 对 表情 无表情的 微笑着 笑呵呵地 热情的 温柔的 红着脸 幸福的 嘟着嘴 热泪盈眶的 依依不舍的 得意的 神秘兮兮的 恶狠狠的 大声的 生气的 幸灾乐祸的 同情的 遗憾的 正义凛然的 严肃的 慢条斯理的 无精打采的 说： 字体颜色： 默认颜色 红色热情 蓝色开朗 桃色浪漫 绿色青春 青色清爽 紫色拘谨 第四章 系统的实现 17 暗夜兴奋 深蓝忧郁 卡其制服 镏金岁月 湖波荡漾 发亮蓝紫 爱的暗示 墨绿深沉 烟雨蒙蒙 聊天对象文本框设置为只读属性是用户就不能手动输入聊天对象，因此还需要提供 选择聊天对象的功能，可以通过在主页面中添加选择聊天对讲的 JavaScript 自定义函数及 在线人员列表中添加超链接实现。实现将选择的聊天对象添加到聊天对象文本框的 JavaScript 代码如下： functionfunction set(selectPerson) /自动添加聊天对象 ifif(selectPerson!=“$username“) form1.to.value=selectPerson; elseelse alert(“请重新选择聊天对象！“); 2、编写自定义的 JavaScript 函数 send()，用于调用 Ajax 实现用户发言。在函数中， 首先验证用户输入信息的合法性然后再将提交的表单的内容连接为一个参数字符串，最 后实例化 Ajax 对象。Send()函数的具体代码如下： functionfunction send() /验证聊天信息并发送 ifif(form1.to.value=“) alert(“请选择聊天对象！“);returnreturn falsefalse; 淮安信息职业技术学院毕业设计论文 18 ifif(form1.content1.value=“) alert(“发送信息不可以为空！“);form1.content1.focus();returnreturn falsefalse; VarVarparam=“from=“+form1.from.value+“ varvarloader=newnewnet.AjaxRequest(“Messages?action=sendMessage“,deal_send,onerror, “POST“,param); 3、在聊天室相关的 Servlet 实现类中添加发送聊天信息的方法 sendMessages()。在 该方法中，首先获取用户发言的相关信息，并将发言信息保存在应用程序对象 ServletContext 中，然后通过 RequsetDispatcher 对象的 forward()方法将请求转发。 SendMessages()方法的具体代码如下： publicpublic voidvoid sendMessages(HttpServletRequest request, HttpServletResponse response) throwsthrows ServletException, IOException response.setContentType(“text/html;charset=UTF-8“); request.setCharacterEncoding(“UTF-8“); Random random = newnew 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(); trytry /发言时间 sourceMessage += “ + from + “ + face + “对“ + to + “说：“ + “ + content + “（“ + sendTime + “） “;application.setAttribute(“message“,sourceMessage); request.getRequestDispatcher(“Messages?action=getMessages 第四章 系统的实现 19 catchcatch (Exception ex) Logger.getLogger(Messages.classclass.getName().log(Level.SEVERE, nullnull, ex); 4.5 实时显示聊天内容 在聊天室程序中另一个必不可少的功能就是显示聊天内容。这个版块是在主界面的 右侧，如图 4-5 聊天内容模块。 图 4-5 聊天内容模块 在实现显示聊天内容功能时，为了实时显示聊天内容，这里应用了 Ajax 技术，技术 Ajax 重构的方法，实现实时显示聊天内容的具体步骤如下： 1、编写自定义的 JavaScript 函数 showContent()，用于实例化 Ajax 对象。 showContent()函数的具体代码如下： functionfunction showContent() varvarloader1=newnewnet.AjaxRequest(“Messages?action=getMessages 2、从上可以看出，Ajax 进行异步请求目标的 URL 地址为 MessagesAction？action=getMessage。从该 URL 地址可以看出，在进入主界面前会调用 聊天室相关的 Servlet 实现类中的 getMessages()。getMessage()方法的具体代码如下： publicpublic voidvoid getMessages(HttpServletRequest request,HttpServletResponse response) response.setContentType(“text/html;charset=UTF-8“); trytry request.getRequestDispatcher(“content.jsp“).forward(request, response); catchcatch (Exception ex) Logger.getLogger(Messages.classclass.getName().log(Level.SEVERE, nullnull, ex); 淮安信息职业技术学院毕业设计论文 20 3、编写显示聊天内容的 JSP 页面 content.jsp，在该页面中只需要应用 EL 表达式将 返回的执行结果输出即可，具体代码如下： $message 4、在聊天室主界面的右侧侠士聊天内容的单元格中添加一个 id 属性为 content 的 标记，用于实时显示聊天内容，具体代码如下：聊天内容 5、编写 Ajax 的回调函数 deal_content()，在这个函数中，首先获取 Ajax 处理页面的 返回值，然后取出字符串中的 Unicode 空白符，最后判断在获取信息时是否产生错误， 如果是，则退出聊天室，否则将获取的聊天内容辅助给 id 为 cotent 的标记的 innerHTML 属性，deal_content()函数的具体代码如下： functionfunction deal_content() varvar returnValue=thisthis.req.responseText;/获取Ajax处理页的返回值 varvar h=returnValue.replace(/s/g,“);/去除字符串中的Unicode空白符 ifif(h=“error“) /alert(“您的账户已经过期，请重新登录！“); Exit(); elseelse content.innerHTML=sysBBS+returnValue+“; document.getElementById(content).scrollTop = document.getElementById(content).scrollHeight*2;/当聊天信息超过一屏时， 设置最先发送的聊天信息不显示 6、为了让页面载入后就调用 Ajax 获取聊天内容，并且每隔一秒便获取一次数据，还 需要在页面中添加 JavaScript 代码，具体代码如下： window.setInterval(“showOnline();“,10000); window.onload=functionfunction() showOnline(); /当页面载入后显示在线人员列表 4.6 退出聊天室模块 在我设计的聊天室中提供了两种退出聊天室的方法，一种是单击主页面中的“退出 聊天室” 按钮，另一种是单击浏览器的“关闭”按钮。需要注意的是，无论采用哪种方 法都会弹出如图 4-6 退出提示。 第四章 系统的实现 21 图 4-6 退出提示 实现安全退出聊天室的具体步骤如下： 1、在主页面的合适位置添加“退出聊天室”按钮，并在按钮的 onClick 事件中调用 自定义的 javaScript()函数 Exit()，关键代码如下： 2、编写自定义的 JavaScript 函数 Exit()，在该函数中首先将页面重定向到退出聊 天室页面 leave.jsp,然后弹出“弹出欢迎您下次光临！”对话框，具体代码如下： functionfunction Exit() window.location.href=“leave.jsp“; alert(“欢迎您下次光临！“); 3、编写退出聊天室的页面 leave.jsp，在该页面中，首先销毁 Session，然后将页 面重新定向到登录页面。Leave.jsp 页面的完整代码如下： 第五章 总结与致谢 22 总结 经过一个多月的毕业设计与开发，聊天室已基本完成，系统需求功能基本 实现，测试运行基本与需求相符。该系统完成了用户登录、发送信息、公开聊 天、查看在线人员的功能。操作简便，易于使用。 在毕业设计的初期阶段，我主要学习了与本课题相关的理论知识，包括： Ajax、jsp 等相关知识。 在查阅大量资料制订了系统需求后，在老师的指导下我着手制定了系统的 需求分析规格说明书和系统概要说明书。接着便进入了系统详细设计和编码阶 段，在这个阶段，由于自己动手经验不足和对开发工具的陌生，系统遇到了很 多大大小小的问题，在一次次克服困难的过程中，我得到了极大的锻炼，基