571
社区成员
发帖
与我相关
我的任务
分享当今时代,实时聊天已经融入了我们的生活。公司开会、学校讲课、淘宝购物等等,都需要用到实时聊天。那么,如何从头实现一个实时聊天系统呢?在这个学期,我学习到了一些关于前端的新知识,填补了长久以来的知识漏洞,并利用所学的知识,实现了一个简单的多人聊天室。
socket.io+express+Node.js+Vue
WebSocket
wedsocket 和 http的关系

首先,相对于HTTP这种非持久的协议来说,Websocket是一个持久化的协议。
WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)
首先HTTP有1.1和1.0之说,也就是所谓的keep-alive,把多个HTTP请求合并为一个,但是Websocket其实是一个新协议,跟HTTP协议基本没有关系,只是为了兼容现有浏览器的握手规范而已。
socket.io是WebSocket的一个服务端框架。
在Node.js出现之前,JavaScript只是运行在浏览器上的语言,前端开发者可以通过JavaScript来操作dom,控制浏览器的界面。而在Node.js出现之后,JavaScript从一个只能运行在浏览器上的被前端开发者用来操作dom的语言,华丽转身,开始在服务端大显身手,借助JavaScript天生的事件驱动机制加V8高性能引擎,使编写高性能Web服务变得更加得心应手。Node.js凭借其不自带IO功能、能良好支持事件机制并且拥有一大群程序员的特质,“无可避免”地成为编写高性能Web服务器的选择。
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。
Express 不对 Node.js 已有的特性进行二次抽象,我们只是在它之上扩展了 Web 应用所需的基本功能。
Vue.js 是一个优秀的前端界面开发 JavaScript 库。
它具有量级轻便、允许双向数据绑定、功能组件化等特点,在实现虚拟Dom的基础上,提供视图、数据、结构相分离的机制,数据修改更加便捷,只需要对数据而不必对逻辑代码进行操作修改。和react比较而言,同样都是操作虚拟dom,vue的运行速度更快。
系统角色:用户,可以通过账号密码进行登录、聊天,其主要用例为登入、登出以及发送消息、接收消息、创建群聊等。

功能模块包含client和server,两者通过socket进行通信。
支持群组聊天和一对一聊天。

登录功能流程图:

运行页面展示:







使用express作为后端框架,Vue作为前端框架,socket.io实现通信,用js语言完成以上模块的调用,实现登录(登入登出)、消息群发和一对一聊天的功能。

最后,感谢学习过程中孟老师和同学们的答疑帮助、你们对我不厌其烦的指点。
作者:NP438