共享网页聊天室的设计与实现

系统概述

技术结构

webpack

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

在该例中,我们用其编译和合并压缩 ES5 以上 JS、SASS/SCSS、各种图片和字体资源等,并建立开发模式下热重载服务端,以方便系统调试。

jQuery

jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。

在该例中,我们用其操作 DOM 节点。

WebSocket

WebSocket 是基于TCP的一种新的网络协议,不同于 HTTP 一次请求一次响应的机制,它允许服务器主动发送信息给客户端,由此衍生了许多基于 WebSocket 的 web 即时应用。

在该例中,我们采用 node 第三方 ws 模块以建立网页即时通讯服务端。

核心功能

  • 当打开页面时,系统会为用户随机分配一个名称
  • 用户可以手动修改名称,系统将向所有客户端广播消息以同步数据
  • 当用户 建立/关闭 连接时,系统将广播消息通知所有客户端创建新的联系人项目
  • 用户可以向所有参与者或指定参与者发送消息

原型设计

原型图

process on 链接地址

流程设计

流程图

process on 链接地址

流程描述

打开页面

  1. 打开页面时,客户端为用户分配随机用户名,并向服务端发送 open 消息 // 消息格式 {  type: 'open',  payload: {    name } }
  2. 服务端接收 open 消息,转发至服务端 Mediator
  3. Mediator 根据 contactCounter 生成客户端 id 号,并新增 contact 对象,之后进入回调流程 4、5
  4. 服务端向新建连接的客户端发送 load 消息,之后进入流程 6 // 消息格式 {  type: 'load',  payload: {    from: {id, name},    contactList: mediator.contactList(), // 联系人列表    talkHistory: mediator.talkHistory().filter(item => item.to.id === 0) // 聊天记录中群发的消息 } }
  5. 服务端向原有客户端发送 contact 消息,之后进入流程 7 // 消息格式 {  type: 'contact',  payload: {    id, name } }
  6. 新建连接的客户端接收 load 消息,转发至 Mediator,初始化联系人列表和聊天历史记录并渲染 UI
  7. 原有客户端接收 contact 消息,转发至 Mediator,新增联系人列表项并渲染 UI

发送消息

  1. 用户输入并发送信息,客户端向服务端发送 message 消息 // 消息格式 {  type: 'message',  payload: {    from: {id,name},    to: {id,name},    msg,    timestamp } }
  2. 服务端接收 message 消息,转发至服务端 Mediator
  3. Mediator 根据 talkCounter 生成聊天记录 id 号,并新增聊天记录,之后进入回调流程 4
  4. 服务端向目标客户端发送 message 消息,消息格式同流程 1
  5. 客户端接收 message 消息,转发至客户端 Mediator
  6. 客户端 Mediator 新增聊天记录项并渲染 UI

修改用户名

  1. 用户修改用户名时,客户端向服务端发送 nickname 消息 // 消息格式 {    type: 'nickname',    payload: {      id: targetId,      name: modifiedName   } }
  2. 服务端接收 nickname 消息,转发至服务端 Mediator
  3. Mediator 修改目标用户的信息和与之相关的所有聊天历史记录,之后进入回调流程 4
  4. 服务端向所有建立连接的客户端发送 reload 消息 // 消息格式 {  type: 'reload',  payload: {    contactList: mediator.contactList(), // 联系人列表    talkHistory: mediator.talkHistory().filter(record => { // 过滤和当前 client 有关的聊天记录      return record.from.id === client.id || record.to.id === client.id || record.to.id === 0   }) } }
  5. 客户端接收 reload 消息,转发至客户端 Mediator
  6. 客户端 Mediator 更新联系人列表和聊天历史记录并渲染 UI

关闭页面

  1. 关闭页面时,服务端捕获 close 事件并向所有客户端发送 lose 消息 // 消息格式 {  type: 'lose',  payload: {    id } }
  2. 客户端接收 lose 消息,转发至客户端 Mediator
  3. Mediator 移除联系人列表项并渲染 UI

补充说明

  • 系统只建立一个共享聊天室,其中 WebSocket Server 服务于所有 Client 端。
  • 系统不以任何方式留存用户信息,打开页面即视为新的客户端建立连接,关闭页面即视为客户端永久断开连接。
  • 兼容 Chrome, Firefox, Sogou 浏览器,不兼容 IE

源码下载

GitHub

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

HTTP 协议漫谈

简介 网络上已经有不少介绍 HTTP 的好文章,对HTTP的一些细节介绍的比较好,所以本篇文章不会对 HTTP 的细节进行深究,而是从够高和更结构化的角度将 H...

314110
来自专栏博客园迁移

jenkins自动部署应用到tomcat中,编译后shell脚本的简单示例

1.先配置好jenkins需要用到的其他外部组件  jdk,maven,git/svn

23930
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Pydio托管文件共享服务器

随着云的采用增加,越来越多的数据被远程存储。从音乐到图片再到个人文档,很多人都将文件上传到他们不管理的服务器上。如果您希望将文件保存在您控制的服务器上,则可以使...

40400
来自专栏用户2442861的专栏

Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置

两年半前写的关于Maven的介绍,现在看来都还是不错的,自己转下。写博客的一大好处就是方便自己以后查阅,自己总结的总是最靠谱的。

40410
来自专栏铭毅天下

干货 | Elasticsearch 集群健康值红色终极解决方案

题记 Elasticsearch当清理缓存( echo 3 > /proc/sys/vm/drop_caches )的时候,出现 如下集群健康值:red,红...

91180
来自专栏androidBlog

Git config 使用说明

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

18400
来自专栏Jerry的SAP技术分享

CRM中间件里的发布-订阅者模式

从事务码SMW01里能观察到一个BDOC可能被发送往不止一个目的site去,比如下图所示的5个site都会收到该site,而高亮显示的SMOF_ERPSITE代...

47090
来自专栏编程微刊

微信小程序从零开始开发步骤(六)4种页面跳转的方法

18630
来自专栏Golang语言社区

HTTP协议漫谈

简介 园子里已经有不少介绍HTTP的的好文章。对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将H...

372130
来自专栏云知识学习

Windows Server 2008 R2修改远程桌面连接数

计算机---属性---远程设置---勾选"允许运行任意版本远程桌面的计算机连接(较不安全)"……

1.4K130

扫码关注云+社区

领取腾讯云代金券