对JavaScript和node.js研究并实现WEB聊天系统

Tommorow

发布日期: 2018-09-28 23:19:30 浏览量: 913
评分:
star star star star star star star star star star
*转载请注明来自write-bug.com

摘要

计算机硬件技术的发展带来了极其繁多的显示终端,数据的爆炸式增长也使得展现给用户的界面越来越复杂,交互也变得更加多样化,在这些变化的冲击之下,web随之更新换代,变化速度之快令人咋舌。面对以上问题,web开发技术时刻保持更新,而且开发技术和手段越来越丰富。

基于此,本文将对web领域的一部分新技术进行研究并加以实践。

首先是对JavaScript部分新特性和JavaScript开发模式做以详细研究和阐述。由于JavaScript对ECMAScrtpt 6规范的实现使得JavaScript拥有了众多新的特性,这些特性极大的丰富了开发方式,使得开发人员能以更少的代码完成更多的开发任务。Web系统越来越庞大,传统的JavaScript开发方式已不能满足需求,在这里也将阐述一下JavaScript模块化开发。

然后是对node.js进行详细的研究与阐述。Node.js的出现将JavaScript语言带向了服务器,打破了浏览器的束缚,使其拥有了更广阔的适用领域。

最后是web聊天系统的设计与实现。综合以上技术,糅合websocket和mongoDB数据库等技术,将这些技术综合运用并加以实践,以展望未来web技术的发展趋势。

关键词:JavaScript;模块化开发;node.js

ABSTRACT

Developmentof computer hardware technology has brought great variety of display terminals,the explosive growth of data is presented to the user interface makes theincreasingly complex interaction has become more diverse, under the impact ofthese changes, web attendant replacement fast pace of change is astounding.Faced with these problems, web development technology always kept up to date,and the development of technology and are becoming more abundant.

Basedon this, this article will be part of the new technologies in the field of webconduct and practice.

Thefirst is the JavaScript part of the new features and JavaScript developmentmodel to make a detailed study and elaboration. Because JavaScript toECMAScrtpt 6 specification implementations allow JavaScript has many newfeatures that greatly enriched the development mode, so that developers can domore with less code development tasks. Web system increasingly large,traditional JavaScript development methods cannot meet the demand, there willbe elaborate JavaScript modular development.

Thennode.js detailed study and elaboration. Node.js JavaScript language with theemergence of a server to break the shackles of the browser, it has a broaderfield of application.

Finally,the design and implementation of web chat system. Based on the abovetechnology, which combines websocket and mongoDB database technology, theintegrated use of these technologies to practice in the future developmenttrend of web technology.

KEYWORDS: JavaScript;modular development;node.js

第一章 绪论

第一节 研究背景

计算机技术的不断更新发展,使得我们的社会已然进入了互联网时代,在这个时代里,生活已经离不开互联网,这种大需求刺激着互联网市场的急速发展,各种各样的设备充斥着我们的生活,大量的数据围绕着我们,所以在在各种各样的设备上将数据和用户连接起来成为一个极具挑战性的工作。

首先我们来看看各种终端设备。几年前,最主要的设备就是pc了。那时候web刚刚起步,互联网时代也刚刚起步,能在pc能浏览一下东西就很不错了,网页也极其简单,交互方式也非常简陋。慢慢的出现了网页动画,提交表单等,使得web技术有了一点新的活力,JavaScript也开始慢慢流行起来,但是也只是做动画,提交以下表单而已,称之为玩具语言,作用相较其他语言显得十分单薄,只能在浏览器上做一些简单开发。后端技术是java和jsp的天下,没有之一,对产品的要求也是非常低的,保证运行流畅即可。回头看一眼当前,pc、手机、平板等,显示终端五花八门。交互方面,指间稍微一动,就能触发好几种不同的操作,再加上pc和移动端的操作方式不同,要处理的问题就更多了。页面的复杂度已经不能同日而语了,此情此景,开发技术只有不断的更新迭代才能创造出更好的产品,也才能满足当下的需求。这样导致技术的更新速度之快令人咋舌,尤其是web前端技术,在这种情况下我们只有不断地学习新的技术来运用到实践中创造出更好的产品。

接下来我们再看看数据方面。爆炸式增长的数据,给技术人员带来的压力显而易见。数据量和交互决定了页面的复杂度,前面我们说了交互,这里我们探讨一下数据量。近几年大数据已经不是什么新鲜事了,大量的数据需要展示给用户时,页面的复杂度也就直线上升了,服务端压力陡增,前端压力也不容小觑。开发代价变高,复用性也就慢慢的提了出来,这是一个用来减小开发代价的方法,过去的开发方式也就不适用于现在了,模块化,组件化开发慢慢的流行了起来,在这种情况下又刺激着新的技术发展,总之在技术的更新换代面前,从事此类工作的人员只能是不断的学习。

第二节 研究内容

Web是一个极大的领域,在这里我只是将web开发中近几年出现的新技术做一些研究,这些新的技术覆盖了前端、后端以及服务端。对这些技术进行深入的研究之后,为了将其应用到实际开发中,在研究之后我也将使用一个web聊天系统对这些新的技术加以实践,使用最新的技术来开发完成这个小项目。下面我们就来一一简单阐述一下本次研究涉及的新的技术点。

首先我们来看看前端方面涉及的新技术点。随着移动端越来越火,html5、css3开发也越来越备受瞩目,现在已经应用在实际的开发当中。页面复杂度的提升也刺激产生了更多的开发工具,模块化开发、组件化开发等等,模板引擎也不再是以前单一的后端模板引擎,前端也出了JavaScript模板引擎,用来更好的适应开发需求。面对这样的局面,JavaScript语言自身也积极发展,添加了更多的语言特性来保证自己不会在这发展的潮流中不会落伍,虽然这些新的特性还没有完全应用来实际开发当中,但是已经指日可待了。在这些新的技术点中每一个项单提出来都足以进行深入的研究,这里我将重点选取一部分内容进行深入研究,在前端方面我主要重点研究了JavaScript语言的部分常用的新特性以及前端模块化开发。Html5、css3、JavaScript模板引擎等在聊天系统开发过程中也将用到,在这里只是做一个简单介绍,不是重点。

接下来我们看看后端的新技术。我相信只要从事web开发的人在最近一段时间里就不可能没听过node.js,为什么node.js会这么火呢?简单来说就是它让JavaScript脱离了浏览器的束缚,让它跑在服务器上,JavaScript也可以进行服务器开发,这绝对是一个震撼人心的消息。从前端到后端通用JavaScript开发,这减少的学习成本不言而喻,想想都是一件极其有意思的事情。所以在后端新技术方面我将重点研究一下node.js开发,为大家讲解一下JavaScript是如何在node.js平台上进行服务器开发的。

凭借上面的知识点搭建系统架构已经不会有太大问题,但是开发过程中还会使用到其他的新的知识点,如mongoDB、websocket等,但是这些不是重点,在web聊天系统的设计与实现章节中做一个简单的讲解,不再为它单分一章出来。

综合以上内容,本文将对前端的JavaScript新特性、模块化开发、node.js开发做深入的讲解,其他提到的各个新的技术点将做简单介绍,不会进行深入的讲解。最后综合应用这些新的技术点来实现一个基于web的聊天系统,对此系统的实现过程做一个详细的介绍。

第三节 论文结构及内容安排

丰富多彩的web开发技术使得其极具研究价值,尤其在面对其技术点不断更新时更是吸引极多的工作人员对其做深入的研究。本文将选web技术中的几点新技术做深入研究,并将其付诸实践。以下为本论文的结构和内容安排。

  • 第一章为绪论,主要介绍了课题的研究背景,论文的研究内容以及论文的结构和内容安排。

  • 第二章为JavaScript部分新特性及模块化开发。此章将重点讲解JavaScript部分新特性为开发带来的好处与便利,与之前版本作对比。在模块化开发方面将带来新的模块化开发方式,将目前使用的模块化开发方式和未来即将使用的进行比说明,再将模块化开发方式和较早的传统开发方式做一对比,体现模块化开发方式的优点。

  • 第三章是对node.js平台的详细介绍,对其特点和实用性进行阐述。

  • 第四章主要内容为以web聊天系统作为实践对象,讲解说明在此项目中我是如何将这些新的技术融合在一起进行实践开发的,对项目中的关键技术点和关键代码进行详细介绍。

  • 第五章是对全文的总结和展望,此章将对前面讲解的内容进行一个总结,对未来的技术做一个展望。

第二章 JavaScript脚本及模块化开发

随着web的飞速发展,JavaScript语言也跟着向前推进,web与JavaScript互相成就,最近一段时间里JavaScript又实现了ECMAScript 6 规范的特性,使其功能更加强大与完善。与此同时web更加趋于复杂化,简单原始的开发模式已经不能满足开发者,模块化开发使得开发人员在做web开发的时候更加得心应手。在这一章里,我将阐述两点,首先是JavaScript的部分我在项目中使用到的很闪亮的新特性,以class特性作为示例讲解一下,然后将阐述一下模块化开发。

第一节 JavaScript中的class概念

1、ECMAScript]规范是什么

简单说明一下,ECMAScript是一个标准化的脚本程序设计语言,而JavaScript是对其标准(规范)进行实现与扩展,所以ECMAScript是一个标准或者说规范,而JavaScript对这个标准进行了语言实现。ECMAScript最新的且被JavaScript实现了的版本是ECMAScript 6标准。ECMAScript 7正在制定当中。

2、JavaScriptclass概念

类概念是所有面向对象编程语言中最重要的特性,也是衡量一个编程语言是否具有面向对象特性的最直接的判断准则。随着web复杂度变高,为了适应开发需求,ECMAScript规范也提出了class概念,JavaScript也对其进行了实现,目前因为浏览器的支持原因导致这部分新的特性无法在实践项目中直接使用。但是我们可以使用babel或者traceur这种翻译工具将使用ECMAScript 6规范写的代码翻译成符合ECMAScript 5规范的代码,这样就可以在开发中使用新的特性。接下来我们看看class概念在JavaScript中是什么样的,将其书写方式与class概念没有出现之前的书写方式进行对比说明一下。

首先我们来看一下class概念没有出现之前我们是如何实现类似class特性的。

  1. (1) function Box (width, height) {
  2. (2) this.name = box”;
  3. (3) this.width = width;
  4. this.height = height;
  5. }
  6. (4) Box.prototype = {
  7. (5) constructor: Box,
  8. (6) init: function() { },
  9. (7) input: function() { }
  10. }
  11. (8) var box = new Box(20, 30);
  12. (9) console.log(box.name); //”box”
  13. (10) console.log(box.width); //20
  14. (11) box.init();

上面这一段代码是在ECMAScript 6规范没有出来之前JavaScript语言对类概念的实现。 (1)是一个函数,函数和对象会有什么关系呢?我们再来往下看看(8)的代码,正是因为(8)使用了new关键字来调用这个函数,使得此函数执行完之后生成一个对象,而this指向的就是生成的此对象。再来看(4)处,每一个函数都有一个自带的属性prototype,此属性为一个对象。使用new关键字生成的每一个Box实例对象都能访问到此函数的属性prototype中的方法或者属性,如(9)(10)(11)所示。(5)处涉及JavaScript语言的一些原理问题,涉及内容较多,这里就不详细阐述了。要实现继承就更加麻烦,下面我们来简单看一下如何实现继承。

  1. function Person () { }
  2. Person.prototype = {
  3. constructor: Person,
  4. eat: function() { }
  5. }
  6. Function Worker () { }
  7. (1) Worker.prototype = new Person(); //将Person的方法和属性集成到Worker
  8. (2) Worker.prototype.checkSalary = function() { }; //给Worker添加自己的方法
  9. var worker = new Worker();
  10. (3) worker.eat(); //调用继承自Person的方法eat
  11. (4) worker.checkSalary(); //调用自己的方法checkSalary

上述实现继承的方式只是JavaScript语言中众多实现继承的方式的一种,这种实现方式相对简单容易理解,但是弊端也多,我们简单来说一下这种方式的实现原理。在(1)处我们将Worker函数的prototype属性设置为Person对象的一个实例对象这样我们就可以访问Person对象中的属性和方法了,在(2)处我们继续添加属于Worker对象自己的方法,在(3)(4)处访问继承来的方法和自己本身的方法。

纵观以上的实现方式,都是开发者利用JavaScript语法特性自己想办法实现class概念,在JavaScript语言中尚不存在class概念,在这种情况下实现class概念的方式非常多样化,导致代码规范难以统一,而且众多的实现方式都有自己的局限。终于,在万众期待之下,ECMAScript 6制订了class概念,JavaScript并对其class概念进行了实现,接下来我们就看看利用JavaScript新特性class概念来书写上面的代码是什么样的。

  1. class Person {
  2. (1) constructor (name, age) {
  3. this.name = name;
  4. this.age = age;
  5. }
  6. getName () {
  7. return this.name;
  8. }
  9. }
  10. class Worker extends Person {
  11. constructor (name, age, salary) {
  12. (2) super (name, age); //调用父亲的构造方法
  13. this.salary = salary;
  14. }
  15. getSalary () {
  16. return this.salary;
  17. }
  18. }
  19. var worker = new Worker(“张三”, 12, 50);
  20. worker.getName(); //”张三”
  21. worker.getSalary(); //50

上述代码是使用了其新特性class概念之后关于类的书写方式,简单明了,相信每一个有一点编程经验的人都能看懂。不过可惜浏览器暂时不支持这样的新特性,不过这只是时间问题。(1)处是一个名为constructor的方法,这是Person类的构造方法,每一个类都必须有一个constructor方法作为其构造方法。再来看看(2)处调用super方法,super指的是父类,直接调用super方法即执行父类的构造方法,通过super.XXXX即调用父类的某一个方法。除了这两点之外,剩下的代码都是简单易懂的。

Class概念的出现,使得功能块的封装开发变得更加简单,而且统一了代码风格,新的开发方式明显减少了代码量,相比程序员自己想办法实现class简单了许多。

3、JavaScript新特性总结

在上面我只是以class特性作为一个例子进行简单介绍一下这些新的JavaScript特性为开发带来的益处,长时间以来页面的复杂度越来越高,使得开发人员不得不去想办法实现各种各样的开发方式,而这种开发方式并不是一种已定的规范,只是开发人员利用JavaScript语言特性去实现自己的想法,导致这样的实现方式多种多样,虽然最后也能满足开发需求,但是导致代码风格迥异,后期维护非常麻烦。在这时ECMAScript 6规范的制定和JavaScript对其的实现使得开发人员有现成的规范去遵从,代码风格一下实现了统一,而且减少了大量的辅助代码,在之前为了实现某一特性必须添加非常多的辅助代码,JavaScript对这些新特性已经实现,那么开发人员只需要遵从其语言规范进行开发即可。类似这样的新特性还有很多,异步操作控制、对数组的扩展、二进制数组、module等等,篇幅有限,这里仅拿class特性作为示例进行讲解,想要了解更多的话,可以直接去google搜索ECMAScript 6即可找到非常多的资料,可以进行查阅。

第二节 模块化开发

首先来用一张图来直观的看一下模块化开发的概念,如下:

如上图,page1.js是page1页面的入口文件,下面则是page1.js文件的组成部分,最底层则是无法抽离的最小模块,整个page1.js文件则由多个模块文件组成。这就是模块化开发的直观概念,下面将详细阐述模块化开发阿德各个细节。

1、模块化是什么

模块化在较早之前就已经出现了,页面复杂度提高,如果不对其进行模块化,将导致页面不可控,代码后期维护将变得异常困难,合作开发、代码复用也会变得非常困难。为了方便开发,便于维护管理代码,将页面划分功能区域,将能抽离出来的一些功用方法抽离出来,比如header、footer、弹窗、对话框等这样的页面结构,访问cookie、正则匹配等这样的公用方法,这些都是可以抽离出来的,这样抽离出来之后对于代码复用、维护优化非常有帮助。所以模块化开发是势在必行的,而且模块化开发已经使用了很久了。

2、如何实施模块化开发

在进行模块化开发之前,我们首先得考虑如何开展模块化。

从整个网站来说,所有的页面中必然会有相同的功能区,比如头、尾、翻页、小工具等,这些都是可以抽离出来的。再从单独一个页面来说,一个页面大多情况下可以划分成多个互相独立的功能区域,这些独立的功能区域也可以对其进行模块化,这样可以使得代码更加整洁,简单,方便后期的优化与维护,一个上千行代码的文件显然要比一个几百行代码的文件难阅读的多,模块化之后可以将其拆分成多个几百行代码的文件,这样阅读和维护就变得简单易懂了。从公用功能来看,cookie管理,正则匹配,对字符串的一些特殊处理等,这样的功能是完全可以抽离出来的。总结以上,在进行模块化之前必须要详细规划出有哪些内容可以抽离出来进行模块化,盲目的模块化很容易导致做很多重复的工作。

当我们清楚的划分出了要模块化的内容之后就可以进行模块化开发了,开发过程不存在太大问题,使用相应的语言完成相应的功能即可。这里我们还有一个问题,那就是模块化之后如何加载使用,在ECMAScript 6规范出来之前,JavaScript语言自身是没有直接加载文件功能的,也就是说模块化出来的文件如何加载这是一个大问题。比如某一个文件中要用到cookie相关的方法,而cookie相关方法我们已经抽离出来开发完成了,那么怎么引入到当前文件去使用呢?接下来我们一起来看看。

3、目前的模块化开发技术

模块化主要有三个部分,抽离、开发、加载使用,抽离和开发不存在技术上的难点,详细理解功能需求,分析抽离,再将抽离出来的功能用JavaScript去实现就好。主要的难点在加载使用上,因为目前浏览器支持的JavaScript语言特性中不存在加载文件不这样的功能,也就是说抽离出来开发完成之后的文件无法加载使用,这将是一个毁灭性问题,但是最终开发人员还是经过一段时间的研究解决了这个问题,目前的模块化开发使用的就是这种方法。

为了解决这个JavaScript文件加载问题,开发人员开发出了几种加载工具,目前项目中经常使用且很出名的就是require.js和sea.js,sea.js是由阿里巴巴的大牛玉伯开发的,require.js则是国外的,无论怎样这两个工具都是为了解决模块化开发的最后一个问题,即文件加载。接下来我们以require.js为例来看看在项目中如何进行模块文件的加载。

首先在项目中先引入require.js,下面的代码将演示如何使用require.js。

  1. //定义一个模块,此模块只有一个toString方法,存在于module路径下的toString文件中
  2. define(function () {
  3. var toString = function (arr) {
  4. return arr.join(‘,’);
  5. }
  6. return toString;
  7. });
  8. //在一个文件中使用上面的模块
  9. (1) require([‘module/toString’], function(toString) {
  10. var arr = [‘h’, o’, m’, e’];
  11. var str = toString(arr);
  12. console.log(str); //home
  13. });

首先根据require.js接口定义了一个模块toString,然后在另一个文件使用它,(1)处第一个参数为一个数组,数组中是要加载的文件的文件名,第二个参数为一个函数,函数的形参和数组中的文件名一一对应,即为数组中的文件取一个在当前文件中使用的名字。正是因为有了类似require.js这样的工具使得模块化开发成为了现实,目前几乎所有大型web项目都在使用这样的模块化开发。

即便这样问题解决了,但是大家从来都没有停止追求如果JavaScript语言自身有这样的功能那该多好啊,经过努力,JavaScript实现了ECMAScript 6规范,使得类似上面这样的文件加载不需要再使用工具了,JavaScript语言自身就可以解决,不过可惜浏览器暂时还不支持,所以实际项目中依旧使用的是工具,不过更新换代的速度是很快的,用不了多久这些工具都会被淘汰的,下面我们看看马上就要被使用的JavaScript自身的文件加载方式。

4、未来的模块化开发技术

这算不上什么未来的技术,JavaScript自身的模块加载功能已经是实现了,只是我们暂时没有办法将它使用到实际项目开发中。我相信用不了多久,这种新的技术就会进入实际开发当中。无论怎么变,抽离和开发是不会变的,变化的是加载,在众多加载工具流行的现在,JavaScript也不甘寂寞,module特性的出现,一举解决了加载问题,使得开发过程中完全可以抛弃这些加载工具,而直接使用JavaScript就够了,接下来我们看看如果纯粹使用JavaScript进行模块化开发是什么样。

  1. //定义一个模块,此模块只有一个Person类,存在于module路径下的Person文件中
  2. class Person {
  3. constructor () { }
  4. eat () { }
  5. }
  6. (1) export default Person
  7. //在一个文件中使用上面的模块
  8. (2) import Person from module/Person’; //引入上面的Person文件
  9. var jack = new Person();
  10. jack.eat();

看了上面的使用工具进行模块化开发,现在看到这个感觉一下简单太多了,在(1)处我们将开发完成的Person模块导出一下,在(2)处将其引入到一个文件当中,取名为Person,然后就可以正常使用了。简单易懂。

5.模块化开发总结

从最早的一个页面一段JavaScript代码,到使用工具进行模块化开发,再到马上就要进行的使用JavaScript自身进行模块化开发,短短的几年就达到了这样一个水平,web的发展速度之快,令人瞠目结舌。但这些都只是新技术的一部分而已。在未来页面势必比现在的更加复杂,这就要求模块化做的更加彻底,否则后期维护与优化将成为重灾区。

第三节 本章小结

本章首先用JavaScript一个新的特性class概念作为实例讲述了一下自ECMAScript 6规范出现之后,JavaScript语言特性的一些变化以及这些变化对开发带来的好处,然后对JavaScript模块化开发有进行了阐述,讲述了从早期到现在模块化开发经历的变化过程,其中也附带了JavaScript新的特新module。

综上两方面我们讲解的都是JavaScript技术,JavaScript作为前端开发最重要的技术点,这几年来不断的更新发展,而在最近这一年多里更是让人眼前一亮,随着对ECMAScript 6规范的实现,其能力越来越强,而作为web开发人员,我们有一种对新技术追求的天性,面对web的快速发展,我们也必须跟上时代的变化来适应越来越复杂的需求。阐述完前端的JavaScript技术之后,在下一章我们将来研究一下一门后端技术node.js,这也是近年来火的不行的一门技术,我们将用接下来一章的内容对其进行阐述。

第三章 node.js平台

在上一章我们阐述了前端开发技术JavaScript语言的一些新的特性,以及模块化开发接下来咱们把目标转向后端技术。一说后端技术,我们首先想到的是java、php等,既然论文的题目是基于web新技术的研究,那么我们肯定不会说这些了。我们这里的研究对象是node.js。在近几年里,node.js慢慢的给自己开辟了一片新天地,虽然它是在2009年被开发出来的,但是真正火起来是在近几年,同时也是在近几年里被越来越多的开发人员使用在实际的项目开发中。

第一节 node.js的诞生

在2009年node的创始人Ryan Dahl将其面向世人做了介绍,从此node问世。在在它面世之后即带来了巨大的反响,在github上受关注项目排行榜上位列第二,最重要的是它已经被使用在实际的项目当中了,说明它能够接受挑战。

有关Node.js的技术报道越来越多,Node.js的写法也是五花八门,有写成NodeJS的,有写成Nodejs的,到底哪一种写法最标准呢,我们不妨遵循官方的说法。在Node.js的官方网站上,一直将其项目称之为“Node”或者“Node.js”,没有发现其他的说法,在这里我将使用后者,将其称为node.js。

第二节 node.js是什么

在其官网上(http://www.nodejs.org)给node.js下的定义是:“一个搭载在chrome JavaScript运行引擎上的平台,用于构建高速、可伸缩的网络程序。Node采用事件驱动、非阻塞I/O模型,使它既轻量又高效并成为构建运行在分布式设备上的数据密集型实时程序的完美选择”。在这句话中包含了非常多的概念,我们来分开理解一下。

“一个搭载在chrome JavaScript运行引擎上的平台,用于构建高速、可伸缩的网络程序”,即node.js是一个平台,搭载在JavaScript运行引擎上,那么在node.js平台上做开发使用的是JavaScript语言,其实此引擎就是google的V8引擎,一个速度非常快的JavaScript引擎,因为它去掉了中间环节,执行的不是字节码,用的也不是解释器,而是直接编译成了本地机器码。虽然在node.js平台上开发使用的是JavaScript语言,但是node.js本身是用C++开发出来的。后半句说它可以用来构建网络程序,即可以在node.js平台上进行web后端开发,是的,你没有看错,总结上面两点,即在node.js平台上可以使用JavaScript语言进行web后端开发。

“Node采用事件驱动、非阻塞I/O模型”,首先来看事件驱动,比如A是事件发出者,B是事件执行者,A对B说我有个事情a你去做,B说好的,B当前没事做,所以直接上手开始做a事情,此时A又给B说这里有个事情b你去做,B说好的,B当前正在做a事情,那么b事情就等着,B完成了a事情,告诉A说a事情做完了,a事情的结果给你,然后B开始做b事情,就这样一直做下去。其中还会出现这样的问题,B做a事情需要一个斧子,结果在做a事情的途中斧子坏了,导致a事情无法正常进行而中断,虽然a事情还没有做完,但是B此时无事可做,所以B丢下a事情去做b事情,等到斧子好了并且B没有其他事情可做的时候,B就回头继续去做a事情。这个例子的前面做事情的部分是事件驱动模型,而斧子坏了是非阻塞I/O模型。如果是阻塞I/O模型的话,B必须等到斧子好了完成a事情之后才能开始b事情,如果斧子长时间不好,那么B将一直处于无事可做的状态而且不能去做其他的事,这就是阻塞I/O模型。

“它成为构建数据密集型实时程序的完美选择”,这里数据密集型很重要,这里的数据密集型可以理解为并发量非常高,比如一个网站用户访问量非常高,可能同时会出现成千上万的用户同时访问,那么就说这个网站的并发量非常高,事件驱动加上非阻塞I/O模型是非常适合这种情况的,相反的node.js不适合构建计算密集型程序。

最后一点node.js是一个异步平台,它把JavaScript带到服务端的方式和浏览器吧JavaScript带到客户端的方式几乎一模一样,也就是说在node平台上,JavaScript也是异步单线程执行的。

第三节 node.js带给了我们什么

在以往,提到后端语言,在我们眼里,就是java、php等,但是node.js给人眼前一亮的是它将一个大家原本认为只能在浏览器里跑一跑的语言JavaScript带到了后端,这无疑是一个让人很振奋的消息,试想前端用JavaScript,后端用JavaScript,目前也有适用于JavaScript的数据库,这样一来,从前端到后端只通过一种语言JavaScript就可以做到全部的开发,这无疑极大的降低了前端开发者的学习成本,使得前端开发者可以做更多的事情了,而且不用学习新的语言。

虽然在node.js平台上JavaScript可以做几乎其他后端语言可以做的一切事情,但是我们还是极少仅仅使用一种方式去做后端开发,首先是有太多已经完成的项目使用的就是java或者php,迁移是一件非常麻烦的事情,再者每一种语言都有自己的局限,我们完全可以使用多种方式配合来完成后端开发。目前的选择方式一般是将后端和UI层相关的数据处理交给node.js去开发,将服务化的数据处理交给java或者php,这样就可以使得后端开发人员将注意力全部集中在数据服务化上,和UI相关的数据处理就不需要自己去做了,可以交给前端的开发者使用node.js去处理这一部分数据。

综合上面,node.js带给我们的是对后端的拓展,而不是颠覆,它给我们提供了一种新的数据处理方式以及开发方式,java、node、php等它们各自扮演着自己的角色,各自发挥着自己的作用,让它们发挥各自的优点,这样才能使得开发更加的容易便捷。

第四节 node.js的特点

Node.js在设计上也是比较大胆,它以单进程、单线程模式运行,事件驱动机制是Node.js通过内部单线程高效率地维护事件循环队列来实现的,没有多线程的资源占用和上下文切换,这意味着面对大规模的http请求,Node.js凭借事件驱动搞定一切,习惯了传统语言的网络服务开发人员可能对多线程并发和协作非常熟悉,但是面对Node.js,我们需要接受和理解它的特点。

Node.js的异步性使得它可以处理高并发量的事务,虽然高并发,但是由于JavaScript是单线程执行的,所以并不会消耗太多CPU,单核CPU使用起来也是没有任何问题的。非阻塞I/O模型使得大量的并发活动不会因为一个事务的阻塞导致其他事务无法正常处理,即使一个事务处理出现了问题,其他的事务也不会受其影响而正常执行,除非有数据上的耦合。

有了上述的优点之后,不足之处也就很明显了,首先对高并发处理得心应手,那么高计算量事务呢,一个长时间占用CPU的高计算量事务会导致其他事务无法开始执行,因为JavaScript是单线程的,很明显它并不适合高计算量事务的处理,这也就意味着它无法合理的使用多核CPU,会导致CPU性能的浪费。虽然有上述这些缺陷,但是我们依旧有手段来解决这些问题,在node.js上JavaScript是单线程的,但是node.js平台的底层是多线程的,我们同时开多个node.js服务,也就是开多个进程,每个进程跑一个node.js服务,每个node.js服务监控一个端口,再通过nginx服务器做反向代理来处理这些不同的监听端口,就可以实现类似多线程的效果。但是不足依旧是不足,通过这些手段来弥补也只是大家努力想出的办法,对于node.js本身来说,这些是它承认的不足之处,也从来没想过往这方面发展,node.js一直注重于做好单线程、异步性来处理高并发的事务,对自己的发展点一直确立的非常清楚。

第五节 本章小结

这一章内容我们详细讲解了node.js平台,从它的诞生,一直到现在它带给我们的变化。Node.js作为一个新面孔,这里从它是什么,有什么用,以及它的优缺点这几方面做了一个深入的讲解。究其变化,node.js带来了一种新的后端开发方式,将JavaScript从浏览器带到了服务器,使得后端开发分的得更加细致,将服务化和UI数据层分离开发。对于热衷于JavaScript语言的开发者来说,这无疑又拓宽了其开发领域。

综合前面两章内容,我们讲解了JavaScript一些新的特性和模块化开发,这一章讲解了node.js开发,接下来一章将以实践出发,以基于web的聊天室立项,将前面提到的多种新的技术应用到此实践项目当中,实现此聊天室功能。接下来我将讲解一下开发此web聊天室的大致过程以及部分核心技术,对一些疑难点的解决方式加以讲解。

第四章 web的聊天室的设计与实现

前面几章讨论了前端和后端的部分新技术,在这一章里,我讲以前面提到的技术作为基础,再结合mongoDB、websocket等关键技术来实现web聊天室。在章节最后部分是重点功能实现的代码讲解。

第一节 功能说明

聊天室系统在网络生活中最为常见,微信、QQ等,这里将其最重要的好友管理和聊天功能进行了实现。此系统流程图如下:

如图首先是具体化一个用户,具体化用户的过程由注册账号和登录这两个步骤,完成这两步之后,正式成为此系统用户之后就可以使用其他功能,未注册登录之前其他功能均不可见。

登录之后来到个人信息功能模块,在这里可以看到自己的个人信息,包括用户名、头像等等。个人信息模块还包含一个非常大的功能模块,好友管理,好友管理包括查看当前自己的好友及好友个人信息、删除好友、发送好友添加申请、管理其他用户发送给自己的好友申请。

然后来到聊天模块,在这里可以看到自己已经添加的好友,可以选择一个与其通过发送文字进行聊天,在聊天过程中可以查看历史消息,历史消息分批加载。

最后就是两个简单模块,关于我们和退出登录,关于我们介绍了毕设的大致内容,点击退出登录之后退出当前账号的登录模式。

以上即是这个web聊天室的全部功能模块,接下来我们看看它的技术架构。

第二节 系统技术架构

首先综合来看一下系统结束架构,如下图为此系统技术架构,用以展现从UI层到数据库层所使用到的技术。

结合上图可以一目了然的看到在各个层所使用的技术,以及此技术点所起到的作用,为了能更清楚的说明此系统技术架构,接下来将分别阐述各个层的技术框架。

1、前端技术框架

首先我将此系统定位在单页面纯异步应用,即所有的内容都在一个页面中进行,页面只同步加载一次。纯异步即所有的数据都是通过异步请求得到的,页面中不存在后端直接添加的数据。纯异步通过ajax实现就可以了,没有太多问题。主要在与单页面,要想实现单页面就得按需加载且保证页面不会刷新,URL改变,但是保证页面不会刷新,只有一个办法,那就是改变URL中的hash部分,如http://www.cuc.com#computer ,在这个URL中#computer就是hash,这部分的改变不会引起页面刷新,在html5中有一个事件是hashchange,这个事件检测的就是URL中hash的改变,这样一来就可以实现页面不刷新且能按需加载,根据hash值的不同加载不同的页面内容。

基于web就免不了和页面打交道,原始的JavaScript操作页面比较麻烦,此时我们需要一个简单DOM操作的工具,这里选择jQuery。将异步获取的数据渲染到页面上我们还需要一个JavaScript模板引擎,我们选择art-template,这是腾讯的一位开发者写的。有了这些我们就可以进行开发了,但是等等,前面有一章内容讲解了JavaScript新特性,这些新的特性在浏览器里暂时是不支持,怎么使用它们?不用担心,google给我们提供了一个翻译工具叫traceur,通过这个工具可以将浏览器不认识的符合ECMAScript 6规范的代码翻译成浏览器认识的符合ECMAScript5规范的代码,这样我们就可以在项目中放心的使用最新的JavaScript特性了。

综上,在前端部分,使用hashchang实现单页面应用,ajax实现异步化,art-template做JavaScript模板引擎,jQuery简化DOM操作,traceur翻译ECMAScript 6。前端技术就是这些,这里有新有旧,hashchange、ECMAScript 6这是新的技术点,而jQuery、ajax、JavaScript模板引擎这些则是旧的技术。

说完前端的技术架构,接下来讲讲后端的技术架构。

2、后端技术框架

第三章讲解了后端技术node开发,相应的这个系统的后端技术我们就选择在node平台上进行开发,关于node是什么前面已经讲解的很清楚了,这是一个全新的技术,所以整个后端技术架构以node展开,而且全部是新技术。

首先我们选择node平台上的Express框架,Express是用JavaScript开发的用于node平台上进行后端开发的框架,就像java的一些框架一样。后端模板引擎选择ejs,ejs就是freemarker一样,同样的概念。这样就有了主体框架,遵循Express框架规范进行开发就行。

聊天系统,那么消息通道就是非常重要的一块。在以往我们可以使用轮询和“长连接”,为什么“长连接”有引号呢?因为它并非真正的长连接,只是大家这么叫了而已。“长连接”指前端发一个请求,后端接受请求,等到后端有数据时返回请求,前端接受了返回数据之后立马发送一个新的请求建立另一个新连接,就这样周而复始,这样一看,其实它就是不间断的发送请求而已,并非真正的长连接。所谓长连接指发送一个请求,这个请求不会断掉,一直在这个请求中来回传输数据。这样一看我们前面说的都不是长连接。这里我将引入另一个新技术,websocket,这是html5中出的一种新的web协议,类似http协议,通过websocket可以建立真正的长连接。Socket.io在websocket基础上开发出了直接建立长连接的方式,不需要再进行底层的包装,这里我们使用socket.io来建立长连接。

最后重申一点,node平台上开发用的是JavaScript语言,以上说的所有使用的都是JavaScript进行开发的。这样后端开发的必备技术框架就准备全了。接下来我们看看服务端,也就是数据库。

3、服务端技术框架

前面两节,我们讨论了前端和后端的技术架构,现在只剩下服务端技术架构,即数据库,接下来我们看看数据库模型。

从之前的内容来看,前端的开发语言必然是JavaScript,后端使用的是node.js平台,那么开发语言必然是JavaScript,这样一来数据库方面如果可以选择一个符合JavaScript数据结构的,那么开发起来会和谐很多。虽然在node平台上使用JavaScript开发也可以访问SQL数据库,但是SQL数据库的数据结构不符合JavaScript数据结构,不是很方便,这里我们再来推出一种新的数据库模型,mongodb数据库。

Mongodb数据库对于此项目的好处在于其是使用JavaScript数据结构来存储数据的,即JSON格式,这样一来使用JavaScript去访问数据库得到的数据更加便于处理,不需要繁琐的数据处理过程。

综合以上三部分,前端、后端、服务端的技术架构和选型,可以看到,在这个系统中开发语言只有一个,那就是JavaScript,这是一件非常棒的事情,想想我们习惯的web开发方式是至少两种语言,前端一种语言,后端一种语言,也就是说必须在学习至少两种语言以上才能正常的进行web开发,而现在一种语言就可以完成以上任务。

第三节 系统实现

1、系统功能模块设计

详细的功能模块划分可以使得开发过程更加清晰快捷,开发效率也能有大幅度的提高,下图即是此系统的功能模块设计图:

从此图可以清晰的看到在此系统中我的好友模块和聊天模块最为繁琐复杂,其他部分均是每一个系统必备的部分。

2、系统文件结构设计

一个成熟且需要长期维护开发的系统,文件结构的设计直接影响其是否能进行长期维护开发,同时也决定了其维护成本的大小,是否便于交接等问题。麻雀虽小,五脏俱全,此聊天系统也是尽最大努力使其便于维护开发且便于理解。如下图为此系统的文件设计图:

这里我们直接从每个文件夹的功能说起,文件结构在设计图中非常清楚,不需要再累赘的讲解。node_modules文件夹包含着本系统开发过程中使用到的npm程序包,如上图有ejs模板、数据库连接包mongodb等,这些npm包当使用到的时候直接引入文件进行使用即可;Router即为后端文件所在的位置;Upload是上传的图片的暂时存储位置,等到上传完毕之后移动到相应的最终位置;Static中包含了所有的静态文件,css、js、图片等;Views文件夹中包含了所有的页面文件,即html文件。

综上,文件结构设计就结束,为了更好的进行开发和维护,文件结构非常重要,无论系统大小如何,这都是必须好好做的一个步骤。

3、系统关键功能实现

在此系统中最先想到的关键点莫过于两点,单页面应用和消息通道,虽然其他关键点还有很多,篇幅限制,我将以单页面应用和消息通道作为示例来简单讲解一下。

首先来看单页面应用,前面几章我们提到了一个html5事件hashchange,它监听着URL中hash的变化。

  1. bindEvent: function() {
  2. (1) $(window).on(‘hashchange’, $.proxy(this.hashChanged, this)); //绑定hashchange事件
  3. }
  4. hashChanged: function() {
  5. let self = this;
  6. let params = { hash: location.hash }; //获取当前页面的hash值
  7. (2) $.get(this.url, params, function(res) { //将hash值发送给后端
  8. (3) self.jQmainSection.html(res);
  9. });
  10. }

上述代码便是实现单页面的关键代码,(1)处将hashchang事件绑定在window上,这样hash有变化时将触发给其绑定的事件hashChanged,在hashChanged事件中(2)处将此hash值发送到后端服务,后端服务根据hash值判断需要加载的内容,(3)处将返回的内容展示在页面的主体部分。

再来看看消息通道的建立。

  1. //客户端代码
  2. init (from, callback) {
  3. (1) this.io = io.connect();
  4. (2) this.io.emit('new user', from); //新用户进来触发后端new user事件
  5. (3) this.io.on('to'+from, function (data) { //定义收到消息事件
  6. callback(data);
  7. });
  8. }
  9. sendMessage (from, to, message) {
  10. (4) this.io.emit('private message', from, to, message) //触发后端私信发送方法
  11. }
  12. //后端服务代码
  13. ioListen: function() {
  14. let self = this;
  15. (5) this.io.on('connection', function(socket) { //建立socket.io服务
  16. (6) socket.on('new user',function(data){ //定义new user方法
  17. (7) if(self.users[data]){ //判断接收消息通道是否存在
  18. }else{
  19. let nickname = data;
  20. (8) self.users[nickname]= socket; //保存此用户建立的消息通道
  21. }
  22. });
  23. (9) socket.on('private message', function (from, to, msg) { //定义私信发送方法
  24. storeMessage.store(from, to, msg); //存储聊天信息
  25. if(self.users[to]) {
  26. (10) self.users[to].emit('to'+to, msg); //触发前端接收消息事件
  27. }
  28. });
  29. });
  30. }

Socket.io服务的建立和通信是需要客户端和后端共同完成的,以事件发布订阅模型来实现。说明一下,在代码中io.on表示定义事件,io.emit表示触发事件。在客户端(1)处表示实例化一个socket.io通道,如果后端的也实例化了socket.io的话即表示此通道建立,此时将触发后端代码中(5)处的connection事件,将其执行。然后客户端(2)处触发执行new user事件,此事件定义在后端(6)处,客户端触发此事件,在后端执行此事件。执行过程中判断此用户要使用的消息通道是否已经建立,在后端(7)处进行判断,如果不存在,则在(8)处为其创建一个并存储下来。在客户端(3)处以用户名来定义一个事件,在后端(10)处触发执行,在客户端(4)处触发进行一对一通信的事件private message事件,此事件定义在后端(9)处。

综合以上,socket.io的使用需要客户端和后端服务协同进行,且以发布者订阅者模型进行开发。

综上以hashchange和消息通道代码作为实例讲解了关键功能的实现,在系统中大大小小的功能点还有很多,但是篇幅有限,只能以此两点作为示例。

第三节 本章小结

这一章主要以基于web的聊天室作为实践项目,综合运用前面几章提到的技术点

来实现此系统。从此系统的功能、技术架构、实现过程这三方面进行了讲解,在讲解过程中将在系统开发中使用到的但是在前面没有着重介绍的技术点进行了介绍,比如mongodb、socket.io等。麻雀虽小,五脏具全,虽然系统内容不太多,但是从技术和实现过程来说,开发需要考虑的点和常用的技术也都使用到了,在此过程中还使用到了许多暂时在实际项目中不能使用的技术点,这也是做此系统的实际意义所在,学习综合运用新的技术。

下面一章将是对以上所有内容的总结,展望一下新技术的发展。

第五章 总结与展望

到这里,文章要讲解的内容就全部结束了,纵观文章,以技术点作为开始,以实践作为结束,技术结合实践。开始以前端开发最主要的技术JavaScript语言作为主要内容,展望其发展,研究其新特性,然后再以后端平台node.js作为内容对其进行深入研究,完成这两者之后,将其带入了实际项目。在实践的过程中又将涉及到的其他的新技术点进行了讲解。综合以上所有的内容,在众多的技术点中新技术点最多,也是最重要的,这也是此文章的重点所在,基于web新技术的研究与实践,前半部分阐述研究所得,后半部分将研究结合实践。相对于web新技术而言这些也只是沧海一粟而已。

近年web的发展速度令人瞠目结舌,这些变化首先是从需求开始的,web需求导致市场的庞大,各大公司都想分一杯羹,这时势必要求开发人员顶住压力做出更好的更能满足需求的东西,这些新需求相较以往的需求往往更加复杂,规模也更加庞大,这就需要开发人员需要使用更好的开发方式来做开发,在如此推动之下技术也将势必被推着前进。Web技术的变化速度之快也源于此,在众多技术速度最快的莫过于前端,对开发人员的学习能里要求也非常高。

前面讲解的使用到的有一部分因为浏览器或者其他平台的问题导致暂时还没有使用到实际的开发中来,但是以web的发展速度来看,用不了多久,目前的这些新技术将完全使用到实际开发中,不仅如果还会出现更多的新技术,不断的学习将是永久的。最后用一句话来结束总结,那就是拥抱变化。

附 录

附录一:基于web聊天室页面截图

1.功能选择区

2.注册功能区

3.登录功能区

4.添加好友功能区

5.好友申请列表

6.好友资料

7.删除好友

8.选择好友聊天

9.关于我们

参考文献

[1] Mike Cantelon,Marc Harter, T.J.Holowaychuk, Nathan Rajlich 著. Node.js实战. 吴海星,译. 人民邮电出版. 2014.5

[2] Kristina Cbodorow著. MongoDB权威指南. 邓强,王海辉译. 人民邮电出版社. 2014.1

[3] Nicholas C.Zakas 著. JavaScript高级程序设计. 李松峰 曹力 译. 人民邮电出版社. 2012.3

[4] David Flanagan 著. JavaScript权威指南. 淘宝前端团队译. 机械工业出版社. 2012.4

[5] Douglas Crockford 著. JavaScript语言精粹. 赵泽欣,鄢学鹍译. 电子工业出版社. 2009.4

[6] 高云 著. jQuery技术内幕. 机械工业出版社.2014.1

[7] Eric A. Meyer 著. CSS权威指南. 尹志忠,侯妍 译. 中国电力出版社.2007.10

[8] 阮一峰 著. ECMAScript 6入门. http://es6.ruanyifeng.com/

[9] art-template. http://aui.github.io/artTemplate/

[10] node.js. https://nodejs.org/en/

[11] express.js. http://www.expressjs.com.cn/4x/api.html

[12] socket.io. http://socket.io/

[13] traceur.js. https://github.com/google/traceur-compiler/wiki/Getting-Started

[14] MongoDB. https://docs.mongodb.com/

[15] MongoDB. https://github.com/mongodb/node-mongodb-native

[16] jQuery. https://jquery.com/

[17] body-parser. https://github.com/expressjs/body-parser

[18] formidable. https://github.com/felixge/node-formidable

[19] ejs. https://github.com/tj/ejs

[20] FormData. https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

[21] CSS. http://w3help.org/zh-cn/kb/

[22] Mozilla网络开发者. https://developer.mozilla.org/cn/

致 谢

经过长达几个月的研究和学习,毕业设计的论文接近了尾声。完成论文的过程很辛苦,但是看到成果却无比的欣慰。在整个论文的研究及完成过程中,我学到了非常多的知识。仅凭我一己之力,不会有这篇论文的诞生。我需要感谢很多人在我完成论文过程中给予的关怀和帮助。

首先要感谢我的论文导师。在一开始从选题的决定到最后论文的提纲,老师都给予我莫大的帮助,而且其热心程度令我非常感动,只要我有问题随时都能找到老师,随时都能对我不理解的地方做出指导。最感动的一次莫过于老师提前出会议室来帮我解决问题,而且当时我并不着急,有时间可以等,非常感谢。在这几个月的时间里,老师能分出一部分精力为我做指导,我感到无比的感谢和庆幸,再次感谢老师。

其次要感谢大学四年来计算机学院所有的领导、老师对我的关怀和照顾。计科的四年让我学习到专业知识的同时更懂得了许多做人的道理,计科人踏实务实的精神在论文创作的过程当中一直激励着我。

最后要谢谢实习过程中碰到各种各样的工作人员,这里面有领导,有开发人员,还有其他形形色色的人,在学习路上,他们给我了莫大的帮助和激励,也是他们让我知道了学习之路原来这么广阔,每一个都足以成为我的导师。

再次向所有曾经帮助支持我的老师、同学和朋友们表达深深的谢意!

由于学术水平有限,本篇论文存在的不足之处还请老师,同学们指正。今后我也将不断努力,争取在web开发领域有更深入的研究。

上传的附件 cloud_download 对JavaScript和node.js研究并实现WEB聊天系统.7z ( 16.26mb, 7次下载 )
error_outline 下载需要13点积分

keyboard_arrow_left上一篇 : 基于百度云和NFC技术的会展导游系统APP设计与实现 基于Arduino和Java实现的教室桌面控制系统 : 下一篇keyboard_arrow_right



Tommorow
2018-09-28 23:21:52
对Node.js和JavaScript进行介绍,并糅合websocket和mongoDB数据库等技术,设计并实现WEB聊天系统

发送私信

成功其实很简单,就是当你坚持不住的时候,再坚持一下

9
文章数
8
评论数
最近文章
eject