




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
目录TOC\o"1-3"\h\u摘要 II目录 IV第一章绪论 11.1引言 11.2课题背景 21.3设计的内容、目的及意义 2第二章Nodejs软件说明 42.1Nodejs概述 42.2Nodejs的模块 52.3Nodejs及相关模块的安装 52.4测试程序 7第三章系统可行性分析 83.1技术可行性 83.2经济可行性 83.3系统开发运行环境 8第四章系统需求分析 94.1系统性能需求分析 94.2系统功能需求 94.3系统开发原则 11第五章系统总体设计 125.1系统设计的主要内容 125.2采用的主要技术 12第六章详细设计 146.1基本页面的实现 156.2用户登录界面 226.3发送图片 226.4发送表情 246.5文字颜色 266.6按键操作 286.7在线用户统计 28第七章系统测试 307.1测试准备 307.2测试过程 307.3测试结果 30第八章软件使用说明书 318.1产品概述 318.2服务器启动 318.3运行客户端 318.4开始聊天 32设计总结 33参考文献 34附录一外文翻译(原文) 35附录二外文翻译(中文翻译) 42致谢 46第一章绪论1.1引言即时通讯(InstantMessenger,简称IM),是指能够即时发送和接收互联网消息等的业务。自1998年面世以来,特别是近几年的迅速发展,即时通讯的功能日益丰富,逐渐集成了电子邮件、博客、音乐、电视、游戏和搜索等多种功能。即时通讯不再是一个单纯的聊天工具,它已经发展成集交流、资讯、娱乐、搜索、电子商务、办公协作和企业客户服务等为一体的综合化信息平台。是一种终端连网即时通讯网络的服务。即时通讯不同于e-mail在于它的交谈是即时的。大部分的即时通讯服务提供了状态信息的特性──显示联络人名单,联络人是否在在线与能否与联络人交谈。近年来,随着无线通信的快速发展,移动互联网为传统的Internet注入了新的活力,同时也为即时通讯带来了一场革命,交互双方已经不再局限于以网络终端设备为唯一的接入手段,PC机在传统的网络即时通讯中所起的作用正在被手机、平板电脑所取代。这使得即时通讯更加大众化和人性化,即使不会使用电脑的人现在也可以享受到即时通讯给人们带来的变化。纵观即时通讯软件业的迅速发展,设计并开发一个即时通讯平台,对于现阶段的学习和研究,都是极为有意义的,基于这个前提和起因,我选择了设计即时通讯系统作为我的毕业设计。即时通讯软件是目前计算机用户进行交流最普遍的方式之一,各种各样的聊天软件也层出不穷;服务提供商也提供了越来越丰富的通讯服务功能。即时通信中最基本的功能就是通过计算机之间的文本数据的互换的形式实现思想的交流和沟通,它的优点是方便快捷,为人们之间创建了一种新型的、廉价的、快速的、简便的沟通方式。本文分析了即时通讯系统的原理及其实现过程,探讨了Socket技术与多线程技术在不/S模式下的局域网即时通讯系统的应用。
本毕业设计就是模拟WebQQ聊天软件,开发一个包括文字聊天、文件传输等功能的聊天软件。系统主要采用不/S架构JavaScript开发平台、html5协议以及Socket等技术来完成。主要实现的功能有登录、聊天、发送表情图片以及文件传输等功能。系统采用,按照应用程序服务器端、应用程序客户端此设计思想,可以将任务合理分配到客户机端和服务器端从而降低了系统的通信开销。此系统共分为两个模块:客户端模块和服务器端模块。通过运行、测试与分析,该多功能聊天软件运行稳定、可靠,具有一定的实用价值。1.2课题背景
即时通讯(InstantMessenger,简称IM),是指能够即时发送和接收互联网消息等的业务。自1998年面世以来,特别是近几年的迅速发展,即时通讯的功能日益丰富,逐渐集成了电子邮件、博客、音乐、电视、游戏和搜索等多种功能。即时通讯不再是一个单纯的聊天工具,它已经发展成集交流、资讯、娱乐、搜索、电子商务、办公协作和企业客户服务等为一体的综合化信息平台。近年来,随着无线通信的快速发展,移动互联网为传统的Internet注入了新的活力,同时也为即时通讯带来了一场革命,交互双方已经不再局限于以网络终端设备为唯一的接入手段,PC机在传统的网络即时通讯中所起的作用正在被手机、平板电脑所取代。这使得即时通讯更加大众化和人性化,即使不会使用电脑的人现在也可以享受到即时通讯给人们带来的变化。在社区、论坛和普通网页中加入即时聊天功能,用户进入网站后可以通过聊天窗口跟同时访问网站的用户进行即时交流,从而提高了网站用户的活跃度、访问时间、用户黏度。把即时通讯功能整合到网站上是未来的一种趋势,这是一个新兴的产业,已逐渐引起各方关注即时通讯除了能加强网络之间的信息沟通外,最主要的是可以将网站信息与聊天用户直接联紧在一起。通过网站信息向聊天用户群及时群发送,可以迅速吸引聊天用户群对网站的关注,从而加强网站的访问率与回头率。但是运用nodejs技术开发的即时通讯系统并不多,本文的即时通讯系统即是运用这种技术开发设计的,对于开发者来说它的技术实现简单易懂,对于用户来说更容易掌握,界面图形化实现能更好的服务于大众。1.3设计的内容、目的及意义该系统的设计内容以即时通讯的发展为背景,基于nodejs技术设计、开发的即时通讯系统。该系统可用应用于企业局域网信息交流。该系统设计了局域网内用户信息的交流,文件的传输等功能。目前,即时通讯系统的流行与高速发展已经越来越快,给人们提供了更多的选择,一款好的即时通讯软件能使人们交流更加通畅便捷,从而提高人们的生活和工作效率。聊天软件作为使用最为广泛的即时性通讯工具,它在拥有文字聊天基础功能的同时,为满户的需求,还增加了文件传输的功能,成为现在最为主流的网上应用软件。本论文主要对聊天软件的文字聊天、文件传输功能进行分析与研究,总结出相关的理论与知识。运用nodejs技术开发设计的即时通讯系统,实现了新技术在即时通讯方面的应用,而且也丰富即时通讯软件,使nodejs技术的优越性得到了充分的体现,为有兴趣的开发者提供了素材。每一个流行语言的出现都会伴随着各种相关应用的诞生,而流行程度又决定了这些应用的多样性。用PHP实现的即时通讯系统就要比用Perl实现的多得多,社区力量的比较可见一斑,JavaScript社区的影响也越来越大。/popular/watched上50个最受关注的项目中13个是JavaScript相关的,可以看出JavaScript的繁荣程度。服务器端JavaScript:nodejs—出势必会引发一系列即时通讯系统的开发,本系统便是对此领域的探索。
第二章Nodejs软件说明2.1Nodejs概述Nodejs是一个可以快速构建网络服务及应用的平台。该平台的构建是基于Chrome'sJavaScriptruntime,也就是说,实际上它是对GoogleV8引擎(应用于GoogleChrome浏览器)进行了封装。V8引擎执行Javascript的速度非常快,性能非常好。Node对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。例如,在服务器环境中,处理二进制数据通常是必不可少的,但Javascript对此支持不足,因此,V8.Node增加了Buffer类,方便并且高效地处理二进制数据。因此,Node不仅仅简单地使用了V8,还对其进行了优化,使其在各环境下更加给力。V8引擎本身使用了一些最新的编译技术。这使得用Javascript这类脚本语言编写出来的代码运行速度获得了极大提升,却节省了开发成本。对性能的苛求是Node的一个关键因素。Javascript是一个事件驱动语言,Node利用了这个优点,编写出可扩展性高的服务器。Node采用了一个称为“事件循环(eventloop)”的架构,使得编写可扩展性高的服务器变得既容易又安全。提高服务器性能的技巧有多种多样。Node选择了一种既能提高性能,又能减低开发复杂度的架构。这是一个非常重要的特性。并发编程通常很复杂且布满地雷。Node绕过了这些,但仍提供很好的性能。虽然让Javascript运行于服务器端不是Node的独特之处,但却是其一强大功能。不得不承认,浏览器环境限制了我们选择编程语言的自由。任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。虽然还存在其他一些支持Javascript在服务器端运行的平台,但因为上述特性,Node发展迅猛,成为事实上的平台。Nodejs可以在不新增额外线程的情况下,依然可以对任务进行并行处理——Nodejs是单线程的。它通过事件轮询(eventloop)来实现并行操作,对此,我们应该要充分利用这一点——尽可能的避免阻塞操作,取而代之,多使用非阻塞操作。2.2Nodejs的模块Nodejs使用Module模块去划分不同的功能,以简化应用的开发。Modules模块有点象C语言中的类库。每一个Nodejs的类库都包含了十分丰富的各类函数,比如http模块就包含了和http功能相关的很多函数,可以帮助开发者很容易地对比如http,tcp/udp等进行操作,还可以很容易的创建http和tcp/udp的服务器。在程序中使用模块是十分方便的,只需要如下:在这里,引入了http类库,并且对http类库的引用存放在http变量中了。这个时候,nodejs会在我们应用中搜索是否存在node_modules的目录,并且搜索这个目录中是否存在http的模块。如果nodejs找不到这个目录,则会到全局模块缓存中去寻找,用户可以通过相对或者绝对路径,指定模块的位置,比如:varmyModule=require('./myModule.js');模块中包含了很多功能代码片断,在模块中的代码大部分都是私有的,意思是在模块中定义的函数方法和变量,都只能在同一个模块中被调用。当然,可以将某些方法和变量暴露到模块外,这个时候可以使用exports对象去实现。2.3Nodejs及相关模块的安装下面介绍下Nodejs的安装,首先在nodejs的网站上根据操作系统下载相关的安装包,对于Windows下的安装,可以如下进行:第一步:下载安装文件下载地址:官网/download/。第二步:安装nodejs下载完成后,双击node-v0.10.28-x86.msi,开始安装nodejs,默认是安装在C盘ProgramFiles文件夹下面。第三步:安装相关环境打开nodejs的安装目录下你会发现里面自带了npm,直接用npm安装坏境即可进入node.jscommandprompt命令窗口。在项目文件夹下安装相关环境键入命令:npminstallexpress回车等待安装express键入命令:npminstallsocket.io回车等待安装socket.io安装什么组件,取决于环境搭建需求。
2.4测试程序
新建一个server.js文件,内容如下
varhttp=require('http'),
server=http.createServer(function(req,res)
{res.writeHead(200,{'Content-Type':'text/plain'});res.write('helloworld!');res.end();});server.listen(80);console.log('serverstarted');软件安装成功后,运行nodeserver,检查服务器端是否准备就绪,打开浏览器输入localhost就可运行。
第三章系统可行性分析3.1技术可行性所谓可行性分析,是关于项目的内容以及条件:例如供应需求,设备规模,环境利益等方面进行调查和分析,预测项目完成后可能获得的经济和环境效益进行预测,提出项目是否应该投资以及运行方式的意见的一种系统分析方法。可行性研究是为保证投资效果而在项目实施之前从经济、技术、管理等角度对项目进行的全面综合分析。它的基本任务包括从经济视角出发进行全面的分析研究、对项目运营后所产生的经济效益进行预测、对己经确定的几种方案论证进行选择。它的目标是合理利用资源,实现预定的社会效益与经济效益。本文中主要讨论的是技术可行性。主要从项目实施的技术角度,合理设计技术方案,并进行比选和评价。NodeJS上的ExpressJS框架可以方便实现众多功能:新建Server,配置,设置路由,通过NPM命令‘npminstall’,运行NodeJs中的NPM包即可安装。因此,本系统的开发是完全可以实现的。3.2经济可行性基于局域网、B/S架构的即时通讯系统在很多资料上都能找到,包括书本和网络上都有很多类似的系统,开发这样一个系统所需要的花费不是很大,需要的开发工具、需要的软件等都可以在网上找到,不需要购买,所以不需要花费太多金钱,在经济上完全能够完成本系统的设计。3.3系统开发运行环境本设计是一个局域网即时通讯软件,要在短时间内开发出来并且满足客户要求,无论是硬件还是软件都要选择合适,要求如下:开发设备完善;开发机器的性能必须稳定;操作系统的选择应该适当;开发出的程序可以在尽可能多的平台上运行;可在WindowsXP或Windows7系统中完美运行。
第四章系统需求分析4.1系统性能需求分析此次开发的网络聊天工具可作为企业局域网的交流工具使用,通信的安全性不是很高,但要求信息的响应速度要较快,让用户充分享受到网络即时消息的方便和快捷。本聊天工具由服务器端程序和客户端程序两部分组成,整体采用JavaScript端平台开发,采用HTML通信协议,使用Socket技术。服务器是可以进行监听,记录客户端请求和验证客户端身份的合法性,客户端程序面向实际用户,它有必要的界面的按钮,向用户提供网络即时消息的功能。本聊天系统需包含如下基本功能:(1)客户端的主要功能:用户登录与好友聊天表情发送文件传输(2)服务器端的主要功能:启动和关闭后台服务器建立连接监听客户端请求4.2系统功能需求聊天工具由服务器端和客户端组成,要分析清楚两方面所要完成的任务,对设计来说,等于完成了一半。根据聊天的通信步骤,系统的功能模块如图4-1所示
即时通讯系统即时通讯系统客户端服务器端登录功能聊天功能字体颜色设计发送表情功能发送图片功能建立连接断开连接监听客户请求
返回响应发送请求返回响应发送请求图4-1
(1)服务器端服务器端完成3大功能:建立连接、断开连接、监听客户请求。这3大功能的具体含义如下:建立连接:系统启动时建立连接,绑定本地计算机的一个端口,不断地监听是否有客户端请求连接或者断开连接。断开连接:关闭监听窗体,系统断开连接。监听客户请求:服务器端是个信息枢纽,所有向服务器端请求的客户端的信息都要传到服务器端,再由服务器根据客户端的请求按要求分发出去,客户端再向服务器端发送各种请求,如:登录,退出等。(2)客户端客户端完成以下几大功能:用户注册、用户登录、聊天功能、表情图片发送功能。用户登录:客户端与服务器建立通信通道,接收来自服务器的监听。通过系统的登录界面,输入昵称,然后发送到服务器进行验证。如果验证通过,则打开程序的主界面。聊天功能:客户在与好友建立通信连接后,便可以与好友进行聊天,聊天时发送的是文本信息。表情图片发送功能:用户之间可以相互发送表情和图片。4.3系统开发原则考虑到系统的可重用性和伸缩性,需要将本系统的网络通信底层和应用系统分离开。这样,基于可重用的网络通信层,可以实现其他各种实时性较高的应用系统。本系统在架构设计上分4个层次,从上到下一次为即时通讯系统、CSocket、CAsyncSocket和WindowsSocketsAPI。本系统最底层是Socket通信层,将负责客户端和服务器之间快速的数据交换,它通过接口层和最上面应用层保持实时数据联系。用户将通过网页进入到本系统。Socket底层设计分两大部分:协议设计和连接处理设计;CSocket层的目的是提供底层和系统的一个中介媒体的作用,但是不能设计的太复杂,以免延误数据传送时间。第五章系统总体设计5.1系统设计的主要内容本聊天工具采用客户端/服务器端的模式来设计,可以将任务合理分配到客户端和服务器端,从而降低了系统的通信开销。(1)客户端客户层端也叫应用表示层,是应用程序的用户接口部分。给聊天工具设计一个客户层具有很多优点,这是因为客户层担负着用户与应用之间的对话功能。它用于检查用户的输入数据,显示应用的输出数据,为了使用户能直观地进行操作,客户层需要使用图形用户接口。若聊天用户变更,系统只须改写显示控制和数据检查程序即可,而不会对影响造成影响。数据检查的内容只限于数据的形式和值的范围,不包括有关业务本身的处理逻辑。(2)服务层服务层又叫功能层,相当于应用的本体,它是将具体的业务处理逻辑编入程序中。例如,用户需要检索数据,系统设法将有关检索要求的信息一次性地传送给功能表;而用户登录后,聊天登录信息是由功能层处理过的检索结果数据,它也是一次性传送给表示层的。在应用设计中,必须避免在表示层和功能层之间进行多次的数据交换,这就需要尽可能进行一次性的业务处理,达到优化整体设计的目的。5.2采用的主要技术(1)NodejsNodejs是一个可以快速构建网络服务及应用的平台。该平台的构建是基于Chrome'sJavaScriptruntime,也就是说,实际上它是对GoogleV8引擎(应用于GoogleChrome浏览器)进行了封装。V8引擎执行Javascript的速度非常快,性能非常好。Node对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。例如,在服务器环境中,处理二进制数据通常是必不可少的,但Javascript对此支持不足,因此,V8.Node增加了Buffer类,方便并且高效地处理二进制数据。因此,Node不仅仅简单地使用了V8,还对其进行了优化,使其在各环境下更加给力。V8引擎本身使用了一些最新的编译技术。这使得用Javascript这类脚本语言编写出来的代码运行速度获得了极大提升,却节省了开发成本。对性能的苛求是Node的一个关键因素。Javascript是一个事件驱动语言,Node利用了这个优点,编写出可扩展性高的服务器。Node采用了一个称为“事件循环(eventloop)”的架构,使得编写可扩展性高的服务器变得既容易又安全。提高服务器性能的技巧有多种多样。Node选择了一种既能提高性能,又能减低开发复杂度的架构。这是一个非常重要的特性。并发编程通常很复杂且布满地雷。Node绕过了这些,但仍提供很好的性能。虽然让Javascript运行于服务器端不是Node的独特之处,但却是其一强大功能。不得不承认,浏览器环境限制了我们选择编程语言的自由。任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。虽然还存在其他一些支持Javascript在服务器端运行的平台,但因为上述特性,Node发展迅猛,成为事实上的平台。Nodejs可以在不新增额外线程的情况下,依然可以对任务进行并行处理——Nodejs是单线程的。它通过事件轮询(eventloop)来实现并行操作,对此,我们应该要充分利用这一点——尽可能的避免阻塞操作,取而代之,多使用非阻塞操作。(2)基于Socket的编程从概念上理解,Socket是网络编程中最常见的是客户/服务器模式,也是我们本聊天工具的基础。以该模式编程时,服务器端有一个进程或多个进程在指定的端口等待客户来连接,一旦连接成功,便按设计的数据交换方法和格式进行数据传输。客户端向服务器端提出连接请求,连接之后进行通信。Socket是一种用于表达两台机器之间连接终端的软件抽象。对于一个给定的连接,在每台机器上都有一个Socket,可以想象一条虚拟的电缆工作在两台机器之间,电缆插在两台机器的Socket上。当然,物理硬件和两台机器之间的“电缆”这些连接装置都是未知的,抽象的,所以目的就是为了让我们不必了解更多的细节。简单说,一台计算机上的Socket同另一台计算机通话创建一个通信信道,程序员可以用这个信道在两台机器之间发送消息。第六章详细设计详细设计阶段的根本目标是确定应该怎样具体实现所要求的系统,也是就是说,经过这个阶段的设计工作,应该得出对目标系统的精确描述,详细设计结果基本上决定了最终的程序代码的质量,为了实现该即时通讯系统需要布置服务器,设计显示页面,聊天功能设置,及表情发送,文件传输等按钮的设置。利用上面的如上的测试代码,创建一个HTTP服务器并监听端口。从命令行运行nodeserver或者nodeserver.js,服务器便可启动了,此刻我们就可以在浏览器栏输入localhost进行访问,也可以输入本机IP。
6.1基本页面的实现主界面的构建,因为是比较大众化的应用了,界面不用多想,脑海中已经有大致的雏形,它有一个呈现消息的主窗体,还有一个输入消息的文本框,同时需要一个发送消息的按钮,这三个是必备的。另外就是,这里还准备实现以下四个功能,所以界面上还有设置字体颜色,发送表情,发送图片和清楚记录四个按钮。最后的页面显示如下:HTML代码如下:<!doctypehtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="author"content="Wayou"><metaname="description"content="hichat|asimplechatapplicationbuiltwithnode.jsandwebsocket"><metaname="viewport"content="width=device-width,initial-scale=1"><title>hichat</title><linkrel="stylesheet"href="styles/main.css"><linkrel="shortcuticon"href="favicon.ico"type="image/x-icon"><linkrel="icon"href="favicon.ico"type="image/x-icon"></head><body><divclass="wrapper"><divclass="banner"><h1>HiChat:)</h1><spanid="status"></span></div><divid="historyMsg"></div><divclass="controls"><divclass="items"><inputid="colorStyle"type="color"placeHolder='#000'title="fontcolor"/><inputid="emoji"type="button"value="emoji"title="emoji"/><labelfor="sendImage"class="imageLable"><inputtype="button"value="image"/><inputid="sendImage"type="file"value="image"/></label><inputid="clearBtn"type="button"value="clear"title="clearscreen"/></div><textareaid="messageInput"placeHolder="entertosend"></textarea><inputid="sendBtn"type="button"value="SEND"><divid="emojiWrapper"></div></div></div><divid="loginWrapper"><pid="info">connectingtoserver...</p><divid="nickWrapper"><inputtype="text"placeHolder="nickname"id="nicknameInput"/><inputtype="button"value="OK"id="loginBtn"/></div></div><scriptsrc="/socket.io/socket.io.js"></script><scriptsrc="scripts/hichat.js"></script></body></html>样式文件main.css代码如下:html,body{margin:0;background-color:#efefef;font-family:sans-serif;}.wrapper{width:500px;height:640px;padding:5px;margin:0auto;background-color:#ddd;}#loginWrapper{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(5,5,5,.6);text-align:center;color:#fff;display:block;padding-top:200px;}#nickWrapper{display:none;}.banner{height:80px;width:100%;}.bannerp{float:left;display:inline-block;}.controls{height:100px;margin:5px0px;position:relative;}#historyMsg{height:400px;background-color:#fff;overflow:auto;padding:2px;}#historyMsgimg{max-width:99%;}.timespan{color:#ddd;}.items{height:30px;}#colorStyle{width:50px;border:none;padding:0;}/*customthefileinput*/.imageLable{position:relative;}#sendImage{position:absolute;width:52px;left:0;opacity:0;overflow:hidden;}/*endcustomfileinput*/#messageInput{width:440px;max-width:440px;height:90px;max-height:90px;}#sendBtn{width:50px;height:96px;float:right;}#emojiWrapper{display:none;width:500px;bottom:105px;position:absolute;background-color:#aaa;box-shadow:0010px#555;}#emojiWrapperimg{margin:2px;padding:2px;width:25px;height:25px;}#emojiWrapperimg:hover{background-color:blue;}.emoji{display:inline;}footer{text-align:center;}为了让项目有一个良好的目录结构便于管理,我们在WWW文件夹下新建一个styles文件夹存放样式文件main.css,然后新建一个scripts文件夹存放需要的js文件比如hichat.js,而我们的服务器文件server.js位置不变还是放到最外层。同时再新建一个content文件夹用于存放其他资源比如图片等,其中content文件夹里再建一个emoji文件夹用于存放表情gif图,最后我们项目的目录结构应该是这样的:├─node_modules└─www├─content│└─emoji├─scripts└─styles6.2用户登录界面6.3发送图片基本的聊天功能已经实现,下一步,我们想让用户可以发送图片,那样程序便更加完美了。图片不同于文字,但通过将图片转化为字符串形式后,便可以像发送普通文本消息一样发送图片了,只是在显示的时候将它还原为图片。在这之前,我们已经将图片按钮在页面放好了,其实是一个文件类型的input,下面只需在它身上做功夫便可。用户点击图片按钮后,弹出文件选择窗口供用户选择图片。之后我们可以在JavaScript代码中使用FileReader来将图片读取为base64格式的字符串形式进行发送。而base64格式的图片直接可以指定为图片的src,这样就可以将图片用img标签显示在页面了。为此我们监听图片按钮的change事件,一但用户选择了图片,便显示到自己的屏幕上同时读取为文本发送到服务器。代码如下:document.getElementById('sendImage').addEventListener('change',function(){//检查是否有文件被选中if(this.files.length!=0){//获取文件并用FileReader进行读取varfile=this.files[0],reader=newFileReader();if(!reader){that._displayNewMsg('system','!yourbrowserdoesn\'tsupportfileReader','red');this.value='';return;};reader.onload=function(e){//读取成功,显示到页面并发送到服务器this.value='';that.socket.emit('img',e.target.result);that._displayImage('me',e.target.result);};reader.readAsDataURL(file);};},false);现在启动服务器打开程序,我们就可以发送图片了。6.4发送表情文字总是很难表达出说话时的面部表情的,于是表情就诞生了。前面已经介绍过如何发送图片了,严格来说,表情也是图片,但它有特殊之处,因为表情可以穿插在文字中一并发送,所以就不能像处理图片那样来处理表情了。根据以往的经验,其他聊天程序是把表情转为符号,比如我想发笑脸,并且‘:)’这个符号代表笑脸表情,然后数据传输过程中其实传输的是一个冒号加右括号的组合,当每个客户端接受到消息后,从文字当中将这些表情符号提取出来,再用gif图片替换,这样呈现到页面我们就能看到表情文字的混排了。首先得将所有可用的表情图片显示到一个小窗口,这个窗口会在点击了表情按钮后显示如下图,在HTML代码中已经添加好了这个窗口了,下面只需要实现代码不分。部分代码如下:_showEmoji:function(msg){varmatch,result=msg,reg=/\[emoji:\d+\]/g,emojiIndex,totalEmojiNum=document.getElementById('emojiWrapper').children.length;while(match=reg.exec(msg)){emojiIndex=match[0].slice(7,-1);if(emojiIndex>totalEmojiNum){result=result.replace(match[0],'[X]');}else{result=result.replace(match[0],'<imgclass="emoji"src="../content/emoji/'+emojiIndex+'.gif"/>');};};returnresult;}6.5文字颜色万幸,HTML5新增了一个专门用于颜色选取的input标签,并且Chrome对它的支持非常之赞,直接弹出系统的颜色拾取窗口。IE及FF中均是一个普通的文本框,不过不影响使用,只是用户只能通过输入具体的颜色值来进行颜色设置,没有Chrome里面那么方便直观。代码如下document.getElementById('sendBtn').addEventListener('click',function(){varmessageInput=document.getElementById('messageInput'),msg=messageInput.value,//获取颜色值color=document.getElementById('colorStyle').value;messageInput.value='';messageInput.focus();if(msg.trim().length!=0){//显示和发送时带上颜色值参数that.socket.emit('postMsg',msg,color);that._displayNewMsg('me',msg,color);};},false);预览效果如下图6.6按键操作将以下代码天剑到hichat.js中,这样在输入昵称后,按回车键就可以登陆,进入聊天界面后,回车键也可以发送消息。document.getElementById('nicknameInput').addEventListener('keyup',function(e){if(e.keyCode==13){varnickName=document.getElementById('nicknameInput').value;if(nickName.trim().length!=0){that.socket.emit('login',nickName);};};},false);document.getElementById('messageInput').addEventListener('keyup',function(e){varmessageInput=document.getElementById('messageInput'),msg=messageInput.value,color=document.getElementById('colorStyle').value;if(e.keyCode==13&&msg.trim().length!=0){messageInput.value='';that.socket.emit('postMsg',msg,color);that._displayNewMsg('me',msg,color);};},false);6.7在线用户统计这里实现显示在线用户数及在聊天主界面中以系统身份显示用户连接离开等信息。在server.js中出了loginSuccess时间,后面还有一句代码,通过io.sockets.emit向所有用户发送一个system时间,传送了刚登入用户的昵称,所有人接收到这个时间后,会在聊天串口显示一条系统消息’某某加入了聊天室’。同时考虑到在前端我们无法得知用户是进入还是离开,所以在这个system事件里我们多传递一个数据来表明用户是进入还是离开。Hichat中的代码如下:this.socket.on('system',function(nickName,userCount,type){//判断用户是连接还是离开以显示不同的信息varmsg=nickName+(type=='login'?'joined':'left');varp=document.createElement('p');p.textContent=msg;document.getElementById('historyMsg').appendChild(p);//将在线人数显示到页面顶部document.getElementById('status').textContent=userCount+(userCount>1?'users':'user')+'online';});预览效果如下:
第七章系统测试7.1测试准备测试系统Windows7,测试浏览器GoogleChrome。7.2测试过程首先测试服务器端口是否就绪,利用前面的测试代码就可以了,在命令行输入nodeserver或者nodeserver.js回车等待,显示info-socket.iostarted即表示服务器以就绪,然后打开浏览器输入localhost:3000如果进入聊天界面,表示系统测试成功,输入昵称就可进入系统聊天。7.3测试结果上面详细描述了基于nodejs的即时通讯系统的实现过程,经过对页面的美化设计就可完善该系统,设计实现一个完整的即时通讯系统。经过以上测试,系统响应速度较快,但聊天界面稍显简单,后期还可以加入语音聊天、群组聊天、视频聊天等比较常见的功能。
第八章软件使用说明书本章演示在单机条件下运行聊天工具,模拟实现聊天过程。8.1产品概述本即时通讯系统是基于nodejs技术设计实现的,主要功能是实现用户的在线聊天,发送表情图片等信息,同时可以修改聊天字体颜色。界面简洁美观,可以增进用户之间的交流。8.2服务器启动完成系统设计后启动服务器,在Windows控制台下执行如下命令:nodeserver或nodeserver.js图8-1服务器运行界面图示显示服务器已经启动。8.3运行客户端打开浏览器,输入localhost:3000,系统就可运行系统运行之后,进入登录界面:输入昵称就可进入聊天。8.4开始聊天在浏览器中打开两个窗口,系统显示“2useronline”,在聊天界面输入消息就可发送,对方就可收到消息,同时可以发送表情图片等。如图7-2所示图8-2设计总结经过几个月的毕业设计,即时通讯系统终于完成了。本文在对相关理论知识的基础上设计了一个基于nodejs的即时通讯系统,分析系统的工作流程,并应用JavaScript端平台具体实现了一些基本的功能,如:登录、即时聊天、表情发送、字体颜色设置等。本系统功能虽简单,但目的的了解基于nodejs应用程序的开发过程,如果要完善系统还需更多的时间。毕业设计的过程是一个学习与研究的过程,而且,我深刻地认识到如果在实践中学习与研究,所学习的知识和技能就会更扎实。我使用HTML,Nodejs,Socket等相关技术完成系统,虽然系统已基本完成,但我对于nodejs的核心技术和高级编程还是很陌生,不能熟练运用。在此次的毕业设计中,我深深地体会到进行软件开发不是一件容易的事情,它需要开发者具备全面的专业知识、严谨的工作态度、缜密的思维以及较高的分析问题、解决问题的能力,而我在很多方面还有欠缺。总之,我以后要多专心研究软件开发,以更加饱满的热情投入到本专业的学习中去,认真做好每一件事情,争取得到更多的收获。
参考文献1.黄凯,陶宏才.即时通讯系统服务器端简要设计[J].成都信息工程学院学报,20062.钟荣柏.即时通讯系统在线视频的研究与实现[J].湖北广播电视大学学报,20073.张永强,乔世权,孙亮.企业级即时通讯系统的设计与实现[J].陕西科技大学学报,20084.雷东升.网络即时通讯系统[J].计算机与现代化,20085.肖在昌,杨文晖,刘兵.基于WebSocket的实时技术[J].电脑与电信,20126.朱挺.即时通讯系统的研究与实现分析[J].中国新通信,20137.林妍.局域网内即时通讯系统的设计[J].中国新通信,20138.赖晓京.基于Html5WebSocket的即时通讯系统[J].电子技术与软件工程,20139.郑明,沈威,白天,刘桂霞,宫雷光.基于XML的新型即时通讯系统[J].吉林大学学报(工学版),201210.高原.服务器端javascript技术研究[J].信息与电脑(理论版),201211.李晶.NodeJS——服务器端JavaScript运行环境[J].程序员,201012.安靖,刘志.HTML5对Web应用产生的影响及安全问题研究[J].信息网络安全.201113.JohnResig.VersionsofJavaScript.E,200914.TilkovS,VinoskiS.UsingJavaScripttoBuildHigh-PerformanceNetworkPrograms[J].IEEEInternetComputing,201015.FetteI,MelnikovA.RFC6455:TheWebSocketProtocol[J].InternetEngineeringTaskForce(IETF),2011附录一外文翻译(原文)TheNodeJsCommunity
ANodeJSprocessrunsalmostcompletelyonasingleprocessingcore,becauseofthisbuildingscalableserversrequiresspecialcare.WiththeabilitytowritenativeextensionsandarobustsetofAPIsformanagingprocesses,therearemanydifferentwaystodesignaNode.JSapplicationthatexecutescodeinparallel:inthispostwe’llevaluatethesepossibledesigns.Thispostalsointroducesthecompute-clustermodule:asmallNode.JSlibrarythatmakesiteasytomanageacollectionofprocessestodistributecomputation.TheProblemWechoseNode.JSforMozillaPersona,wherewebuiltaserverthatcouldhandlealargenumberofrequestswithmixedcharacteristics.Our“Interactive”requestshavelowcomputationalcosttoexecuteandneedtogetdonefasttokeeptheUIfeelingresponsive,while“Batch”operationsrequireaboutahalfsecondofprocessortimeandcanbedelayedabitlongerwithoutdetrimenttouserexperience.Tofindagreatapplicationdesign,welookedatthetypeofrequestsourapplicationhadtoprocess,thoughtlongandhardaboutusabilityandscalingcost,andcameupwithfourkeyrequirements:•saturation:Thesolutionwillbeabletouseeveryavailableprocessor.•responsiveness:Ourapplication’sUIshouldremainresponsive.Always.•grace:Whenoverwhelmedwithmoretrafficthanwecanhandle,weshouldserveasmanyusersaswecan,andpromptlydisplayaclearerrortotheremainder.•simplicity:Thesolutionshouldbeeasytoincrementallyintegrateintoanexistingserver.Armedwiththeserequirements,wecanmeaningfullycontrasttheapproaches:Approach1:Justdoitonthemainthread.Whencomputationisperformedonthemainthread.theresultsareterrible:Youcannotsaturatemultiplecomputationcores,andwithrepeatedhalfsecondstarvationofinteractiverequestsyoucannotberesponsivenorgraceful.Theonlythingthisapproachhasgoingforitissimplicity:SynchronouscomputationinaNode.JSprogramthatisexpectedtoservemorethanonerequestatatimeisabadidea.ThekeypointisusageofanasynchronousAPIinNodeJSdoesnotnecessarilyyieldanapplicationthatcanusemultipleprocessors.Approach2:DoitAsynchronouslywithThreadedLibraries!Givenalibrarythatiswritteninnativecodeandcleverlyimplemented,itispossibletoexecuteworkindifferentthreadsfromwithinNodeJS.Manyexamplesexist,onebeingtheexcellentbcryptlibraryfromNickCampbell.Ifyoutestthisoutonafourcoremachine,whatyouwillseewilllookfantastic!Fourtimesthethroughput,leveragingallcomputationresources!Ifyouperformthesametestona24coreprocessor,youwon’tbeashappy:youwillseefourcoresfullyutilizedwhiletherestsitidle.TheproblemhereisthatthelibraryisusingNodeJS’sinternalthreadpoolforaproblemthatitwasnotdesignedfor,andthisthreadpoolhasahardcodedupperboundof4.Deeperproblemsexistwiththisapproach,beyondfromthesehardcodedlimits:•FloodingNodeJS’sinternalthreadpoolwithcomputationworkcanstarvenetworkorfileoperations,whichhurtsresponsiveness.•There’snogoodwaytocontrolthebacklog–Ifyouhave5minutesofcomputationworkalreadysittinginyourqueue,doyoureallywanttopilemoreon?Librariesthatare“internallythreaded”inthismannerfailtosaturatemultiplecores,adverselyaffectresponsiveness,andlimittheapplication’sabilitytodegradegracefullyunderload.Approach4:Usenode’sclustermodule!NodeJS0.6.xandupofferaclustermodulewhichallowsforthecreationofprocesseswhich“sharealisteningsocket”tobalanceloadacrosssomenumberofchildprocesses.Whatifyouweretocombineclusterwithoneoftheapproachesdescribedabove?Theresultantdesignwouldinherittheshortcomingsofsynchronousorinternallythreadedsolutions:whicharenotresponsiveandlackgrace.Simplyspinningnewapplicationinstancesisnotalwaystherightanswer.Approach4:Introducingcompute-clusterOurcurrentsolutiontothisprobleminPersonaistomanageaclusterofsingle-purposeprocessesforcomputation.We’vegeneralizedthissolutioninthecompute-clusterlibrary.compute-clusterspawnsandmanagesprocessesforyou,givingyouaprogramaticmeansofrunningworkonalocalclusterofchildprocesses.Itispossibletointegratecompute-clusterbehindanexistingasynchronousAPIwithoutmodifyingthecaller,andtostartreallyperformingworkinparallelacrossmultipleprocessorswithminimalcodechange.Sohowdoesthisapproachachievethefourcriteria?saturation:Multipleworkerprocessesuseallavailableprocessingcores.responsiveness:Becausethemanagingprocessisdoingnothingmorethanprocessspawningandmessagepassing,itremainsidleandcanspendmostofitstimehandlinginteractiverequests.Evenifthemachineisloaded,theoperatingsystemschedulercanhelpprioritizethemanagementprocess.simplicity:Integrationintoanexistingprojectiseasy:Byhidingthedetailsofcompute-clusterbehindasimpleasynchronousAPI,callingcoderemainshappilyobliviousofthedetails.Nowwhataboutgracefullydegradingduringoverwhelmingburstsoftraffic?Again,thegoalistorunatmaximumefficiencyduringbursts,andserveasmanyrequestsaspossible.Ifyouconsiderthenumberofpackagesonpypi,npm,andrubygems,andthereleasedatesofpython(1991),ruby(1995)andnode.js(2009),itlooksalotlikethosecommunitiesaregettingnewpackagesatthefollowingrates,peryear:It’simportanttonotethatI’monlyshowingtheotherlanguagesasameasuringstick.Thereareprobablyalotofreasonsforthedisparityhere(includingmyimprecisemath),andI’mnottryingtosayanythinglike“node.js>ruby>python”butobviouslynewnode.jspackagesarebeingpublishedtonpmatastaggeringrate.Ijustcheckednpm(onaSundaynight)and20newversionsofpackageshavebeenpublishedtonpminthelasthouralone.Thisisaprettyamazingfeatfornode.js.Howisthispossible?BatteriesNOTincludedIfyou’veneededanHTTPclientinPython,you’veprobablyaskedyourself“shouldIuseurllib,urllib2,orhttplibforthis?”likesomanypeoplebeforeyou.Welltheanswerisprobablythatyoushoulduserequests.It’sjustareallysimple,intuitiveHTTPclientlibrarythatwrapsupalotofweirdnessandbugsfromthestandardlibraries,butit’snotastandardlibraryliketheothers.The“Batteriesincluded”philosophyofPythonwasdefinitelytherightapproachduringthemid90’sandoneofthereasonsthatIlovedPythonsomuch;thiswasatimebeforemodernpackagemanagement,andbeforeitwaseasytofindandinstallcommunity-createdlibraries.NowadaysthoughIthinkit’scounter-productive.Developersinthecommunityrarelywanttobothertryingtocompetewiththestandardlibrary,sopeoplearelesslikelytotrytowritelibrariesthatimproveuponit.Developersarelesslikelytousenon-standardlibrariesintheirprojectstoo.I’veheardmanyinstanceofpeoplesufferingthroughusinganinferiorstandardlibraryjusttohave“nodependencies”.Butinthisdayandageofcheapmassivestorageandmodernpackagemanagement,thereareveryfewreasonsforapolicyof“nodependencies”.Conversely,thenode.jscoredevelopersseemtoactuallywanttominimizethestandardlibraryasmuchaspossible.Theyhaverepeatedlyremovedfeaturesfromthestandardlibrarytofreethemuptobeimplementedbythecommunityinstead.Thisallowsforthemostvarietyandletsthebestimplementationwin(butonlyuntilsomeonemakesabetterone,ofcourse!).Imaginehowliberatingthisisforstandardlibrarymaintainerstoo.Thenode.jsstandardlibraryiscomparativelytiny,freeingthecoredeveloperstojustdealwiththecorenecessities.TheTinyModuleAestheticJustlikethe140chara
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 白酒酿造过程中的食品安全管理考试考核试卷
- 林木育种与气候变化考核试卷
- 玻璃个人防护装备考核试卷
- 2025保险公司合同条款汇编
- 2025赴澳大利亚团旅游的合同
- 2025建筑项目安全生产文明施工承包合同书
- 第01讲 丰富的图形世界(原卷板)
- 气象灾害防御条例解读
- 【语用新题】2025届高三下4月名校模考试题
- 二零二五版心理咨询师聘用合同
- 课件-2025年春季学期 形势与政策 第一讲-加快建设社会主义文化强国
- 2025年山东惠民县农业投资发展限公司招聘10人历年高频重点提升(共500题)附带答案详解
- 大学美育知到智慧树章节测试课后答案2024年秋长春工业大学
- 《基于嵌入式Linux的农业信息采集系统设计与研究》
- 外科创伤处理-清创术(外科课件)
- 小型手推式除雪机毕业设计说明书(有全套CAD图)
- 《城市级实景三维数据规范》
- 2024年中国酸奶袋市场调查研究报告
- 合同到期不续签的模板
- 搬迁服务项目 投标方案(技术标)
- 2005室外给水管道附属构筑物阀门井05S502
评论
0/150
提交评论