基于Web的在线聊天系统设计与实现

[小白]

     当今时代，实时聊天已经融入了我们的生活。公司开会、学校讲课、淘宝购物等等，都需要用到实时聊天。那么，如何从头实现一个实时聊天系统呢？在这个学期，我学习到了一些关于前端的新知识，填补了长久以来的知识漏洞，并利用所学的知识，实现了一个简单的多人聊天室。

涉及技术

WebSocket

Socket.io

Node.js

Express

Vue

涉及技术

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

    socket.io是WebSocket的一个服务端框架。

Node.js

    在Node.js出现之前，JavaScript只是运行在浏览器上的语言，前端开发者可以通过JavaScript来操作dom，控制浏览器的界面。而在Node.js出现之后，JavaScript从一个只能运行在浏览器上的被前端开发者用来操作dom的语言，华丽转身，开始在服务端大显身手，借助JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务变得更加得心应手。Node.js凭借其不自带IO功能、能良好支持事件机制并且拥有一大群程序员的特质，“无可避免”地成为编写高性能Web服务器的选择。

Express

    Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。

    Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。

Vue

    Vue.js 是一个优秀的前端界面开发 JavaScript 库。

    它具有量级轻便、允许双向数据绑定、功能组件化等特点，在实现虚拟Dom的基础上，提供视图、数据、结构相分离的机制，数据修改更加便捷，只需要对数据而不必对逻辑代码进行操作修改。和react比较而言,同样都是操作虚拟dom,vue的运行速度更快。

设计方案

用例图

        系统角色：用户，可以通过账号密码进行登录、聊天，其主要用例为登入、登出以及发送消息、接收消息、创建群聊等。

系统功能结构

功能模块包含client和server，两者通过socket进行通信。

支持群组聊天和一对一聊天。

 

Server端

登录功能流程图：

 

 运行页面展示：

消息发送与消息接收

具体功能实现

启动服务器

 

服务器判断用户是否已经登录

 判读用户是否已经存在

 

 处理用户登录

 用户登录成功，服务器解析接收到的消息并指定转发或广播（消息发送接收核心功能）

服务端显示历史消息

 消息提示

 总结

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

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

 

作者：NP438

[CSDN-Ada助手]

您可以前往 CSDN问答-前端 发布问题, 以便更快地解决您的疑问