精读express系列——实战篇(2)

foreword(前言)

上一篇文章中,主要介绍了一个基本的项目环境搭建、express-generator的简单使用以及对其构建的项目结构的梳理。

本篇文章是针对IM(InstantMessaging)聊天应用的项目预演篇,将会从以下几个角度进行展开:

  • 梳理应用所需的技术难点并找到合适的解决方案;
  • 技术选型
  • 梳理项目业务模块;
  • 梳理项目业务流程;
  • 基本的 UI 设计;

技术难点与解决方案

1.如何实现低延迟“即时通讯”?

我们要做的是一个IM(InstantMessaging)聊天应用,那么其核心功能是“即时通讯”,也是我们本次项目的核心技术难点。

比较传统的方法有这几个:短轮询、Comet、SSE(服务器推送事件(Server-sent Events)),而目前比较流行的方法是websocket。(针对这几类解决方案,可以点击这里查看详情:http://www.52im.net/thread-338-1-1.html)

为了兼容一些低版本的浏览器,之后我们将选用Socket.IO来实现“即时通讯”,Socket.IO除了支持websocket协议,同时也对传统的IM解决方案(短轮询、Comet、SSE)做了封装,根据不同的浏览器支持,采用不同的解决方案。

2.如何实现“登录校验”

http是无状态的协议,所以通常会用session结合cookie来完成登录状态校验,但缺点是session必须保存在服务端内存中,当请求用户比较多的时候,这对服务器来说是很大的开销,所以session结合cookie的方式被我们放弃。

我们将采用token的方式来完成登录的校验,优点是:

  • 无状态、可扩展
  • 支持移动设备
  • 安全性
  • 多平台跨域

技术选型

在固定的一个周期内,如何进行技术选型,个人觉得可以考虑以下几点:(从技术本身、团队这两个纬度考虑)

  • 当前的技术方案中,是否有某个是平常个人或团队一直在使用的,如果是,优先选择它;
  • 技术方案本身是否具有良好的未来规划,与其他技术方案相比,它有什么特长和优势,如果没有,果断放弃;
  • 相应的框架、库或者协议,是否有良好的规范与标准,源码质量如何;
  • 其背后是否有稳定维护团队;
  • 其是否有活跃的社区;

1.后端接口如何实现?

本系列就是研究express,所以后端使用express搭建服务和编写接口;

2.前端界面如何构建?

express本身封装了模板引擎,并且目前有很多基于express的第三方知名的模板引擎,用它吗?如今已经是前后端分离的时代,况且使用模板引擎其实和jsp类似(具体我也没怎么使用过模板引擎,个人一看到这个,就产生了类似jsp的厌恶感),虽然带有点个人倾向,不过接下来的项目本来就是我个人开发,何必要使用个不熟悉又厌恶的东西呢?

vue、react、angular三个前后端分离框架,我用vue用的多一些,并且vue也比较好编写,一年前写的毕设也是基于vue和express+mysql实现的(想想写的不要太垃圾。。。),所以我选择vue来搭建前端页面。

3.数据库怎么选?

mysql确实是我稍微熟悉的数据库,但是mongodb可以通过json的形式管理数据库,并且搭配简单的nodejs驱动,express可以非常简单地以API的形式进行数据库的增删改查,另外mongodb目前的社区仍然比较活跃,在最近的数据库排名中,mongodb是排名前五名中唯一的nosql数据库,基于这几点,非常吸引我,所以我选择了mongodb。

项目业务模块

精读express系列——实战篇(2)_第1张图片

项目业务流程

以下为目前初步的思路,具体在实际开发中视情况做出一些调整。

精读express系列——实战篇(2)_第2张图片

基本的UI设计

1.首页

精读express系列——实战篇(2)_第3张图片

2.聊天室

精读express系列——实战篇(2)_第4张图片

3.新朋友

精读express系列——实战篇(2)_第5张图片

4.联系人

精读express系列——实战篇(2)_第6张图片

5.联系人(搜索)

精读express系列——实战篇(2)_第7张图片

6.联系人(添加好友)1

精读express系列——实战篇(2)_第8张图片

7.联系人(添加好友)2

精读express系列——实战篇(2)_第9张图片

8.联系人(添加好友)3

精读express系列——实战篇(2)_第10张图片

9.联系人(添加好友)4

精读express系列——实战篇(2)_第11张图片

10.登录

精读express系列——实战篇(2)_第12张图片

11.注册1

精读express系列——实战篇(2)_第13张图片

12.注册2

精读express系列——实战篇(2)_第14张图片

本篇文章github讨论地址

https://github.com/yaodebian/blog/issues/24

下一期target

本篇文章没什么干货,主要分析了要实现IM需要攻克的几个技术难点及解决方案、技术选型、项目有哪些业务模块、基本的业务流程(不知道有没有讲清楚,总感觉写的比较虚)、大致的UI原型设计。

下一篇文章,我将把从前端到后端到数据库的链路打通,并大致实现即时通讯。

五一前三天在玩或者和同学同事聚餐,最后两天才写的文章,写的比较赶。。。接下来将不断改善。由于本周剩下没多少天,周末只有一天休息,所以本系列下一篇将在下周完稿,但这不代表本周断更,本周将总结一些其他的知识点。

last(最后)
非常感谢您能阅读完这篇文章,您的阅读是我不断前进的动力。

对于上面所述,有什么新的观点或发现有什么错误,希望您能指出。

最后,附上个人常逛的社交平台:
知乎:https://www.zhihu.com/people/bi-an-yao-91/activities
csdn:https://blog.csdn.net/YaoDeBiAn
github: https://github.com/yaodebian

我的邮箱:[email protected] or [email protected]

个人目前能力有限,并没有自主构建一个社区的能力,如有任何问题或想法与我沟通,请通过上述某个平台联系我,谢谢!!!

你可能感兴趣的:(前端系列周刊,node.js)