使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

　　拿到一个项目，我们应该如何去完成这个项目呢。 是直接上手？ 还是先进行分析，然后再去解决呢？毫无疑问，如果直接上手解决，那么可能会因为知道目标所在，而导致出现各种问题。 所以，我们应该系统的分析这个项目，然后再去完成。 

第一步： 需求

　　除了上面的基本需求之外，我们还需要实现登录、注册的相关功能，这样可以保证用户的唯一性，并在后台做出记录。 

第二步：确定技术栈

• express --- 首先，作为前端使用node就可以取代后端java、php开发的工作，对于这个项目是必须的。作为node的框架，express可以帮助我们减少不必要的代码，从而高效完成工作。 
• react、react-router、redux --- 作为非常流行的前端框架，组件化的设计思想是本项目的最大优势，可以进行尝试使用。因为本项目需要使用登录、注册，所以要做成web单页面应用，因为需要使用到react-router。另外，对于数据的管理较为复杂，需要使用到redux, 对于redux我们可以查看这篇文章。
• webpack打包 --- webpack是当前最流行的打包工具，通过webpack，我们可以实现前端工程化，对代码的管理以及后期的维护都有很大的帮助，但是可能上手不太容易，需要花费时间进行探索。
• socket.io --- socket.io是对websock（实现全双工通信的应用层协议）的封装，对于实时的聊天很有帮助。 因为聊天需要某个人发送消息给服务器端, 但是其他用户怎么快速得到你的消息呢？ 这就需要服务器端及时将这个消息推送到其他的用户了，但是其他用户并没有向服务器端发出请求，所以原来采用的就是轮询的方式，通过这种方式可以完成功能，但是会增加客户端和服务器端的负担。 这篇文章也介绍了一些使用场景。(注意： 有时候，也许我们在请求中看不到websocket协议相关，而是http协议，这也是正常的，因为有可能浏览器后者服务器不支持，就要使用其他方式来实现。)
• mongodb --- 因为项目需求中提到刷新页面之后，还需要展示加入过的房间的历史聊天记录，通常在前端可能是可以通过localStorage来实现的，但是使用localStorage是有问题的，对于其他人的推送消息，我们都需要调用localStorage，并且如果你一旦更换浏览器，那么数据就没有办法保存了。 但是如果我们使用mongodb作为node来操作的数据库，那么我们就可以在用户进入某个房间的时候，及时将存储在数据库中的数据（所以，每次用户发送的数据，都要根据相应的房间号存储到mongodb数据库中）推送给用户。
• ant.design --- ant.design是蚂蚁金服的一个基于react的前端UI框架，可以方便我们使用设计好的、一致性强的UI。 
• less --- 对于html5，在某些pc浏览器上可能支持的不好，所以目前并没有广泛使用，但是对于less，它使用嵌套语法、变量、minxin等使得css的书写更加清晰、整洁，并且它最终是可以编译为css的，所以鼓励使用less。 
• es6 --- 同less一样，我们使用es6可以使得语法更简洁，效率更高效，只需要使用babel进行转译即可，所以推荐所有的项目都使用es6甚至是es7的语法来实现。 

第三步： 技术学习

　　确定了以上技术栈之后，我们就需要学习没有用过的技术了。 有人提倡的是边做项目边学习，这种方法是没有错的。 但是我认为提前学习是一种比较好的做法，即首先需要对相应技术的基本概念、api等做一个初步的了解，在这个基础上做项目，我们就可以知道应该在遇到问题时使用那些方法来解决，这时再进入边做项目边学习的阶段是比较理想的了。 

　　比如上面的技术socket.io、redux、react-router、ant.design都是我之前没有用过的，就需要做一个简单的学习，大概记录一下博客加深印象即可。 

第四步： 项目架构

　　实际上对于一个项目，最重要的是项目的架构实现，当我们组织好了项目的架构并对webpack打包的部署完成之后，再去写项目的逻辑就会简单的多了，因为我们已经有了整体的思路。 如果项目的整体架构考虑不周，那么就有可能造成代码的可读性、可扩展性、可维护性很差，使得项目质量不高。

• src文件夹 - 项目的核心代码文件,其中应该区分为客户端和服务器端。
• config文件夹 - 项目打包、api等的配置文件。 （通过不同文件的分离，使得项目易于管理）
• build文件夹 - 与webpack相关的build文件。
• static文件夹 - 存放一些css、js、img等静态文件。
• package.json - 该文件记录了整个项目的基本信息如入口、名称、仓库、依赖等等。
• index.html - REACT技术使用的就是单页应用，所以，这里只需要一个html页面。
• ... 

　 以上大概就是本项目的架构了，至于.gitignore、REDEME.md等是一个项目所必须的且不重要，不再赘述 。 

第五步： 开始写代码

　　就是从头开始一步一步完成这个项目，无需多说。

第六步： 遇到的难点以及解决思路、方案

　　做项目中难免会遇到一些问题，并且有时候还比较难解决，这时就需要我们及时的记录。 一来是可以记录问题、随时着手解决；二来是可以通过记录在以后遇到问题时可以及时的查看记录，不再踩相同的坑或者再去从头寻找、思考解决思路。 

原文：http://www.cnblogs.com/zhuzhenwei918/p/7239007.html