一个关于vue+mysql+express的全栈项目(六)------ 聊天模型的设计
一、数据模型的设计
这里我们先不讨论群聊的模型,指讨论两个人之间的聊天,我们可以把两个人实时聊天抽象为(点对点)的实时通讯,如下图
我们上面的所说的模型其实也就是数据包的模型应该怎么设计,换句话说就是数据包的数据结构的设计,其实很简单,A发送给B,已经B发送给A,我们在传输的时候,全部带上他们的唯一标识,也就是userid,如下图所示
如上图所示我们很容易就会发现,这两个数据包虽然带了各自的userid但是还是不够准确,因为我们只是带了自己的userid,所以我们不知道发给谁,那么很简单,我们再加上接收消息人的userid,也就是你要发给消息给谁就带上谁的userid
其实看到这里我们的数据模型已经出来了,我们规范一下写法,如下图所示:
解释一下chaid和read,因为通过观察我们发现微信有个未读消息的数量,这个未读消息的数量我们使用read这个字段来统计,默认每次发送的消息都是未读的,chaid是由from和to也就是两个userid进行排序组合产生的,是为了我们最后在消息列表对
聊天信息进行分组展示的,类似微信的聊天列表,下面是我们的最终的数据结构
const chat = sequelize.define(
// 转发列表
'chat',
{
'chatid': {
'type': Sequelize.TEXT,
'allowNull': false
},
'form': {
'type': Sequelize.STRING,
'allowNull': false,
'references': {
'model': 'accounts',
'key': 'user_id'
}
},
'to': {
'type': Sequelize.STRING,
'allowNull': false
},
'read': {
'type': Sequelize.BOOLEAN,
'defaultValue': false
},
'content': {
'type': Sequelize.TEXT,
'defaultValue': ''
}
}
)
chat.sync();
二、数据的处理,
经过上面的一顿抽象,其实也不算抽象,反正我觉得是挺形象的,哈哈,为了最终达到微信一样的聊天效果,我画了下图(从数据存储,消息查询,消息列表的获取展示,聊天窗口的消息查询展示),供大家参考
下面是项目的部分截图
项目地址:https://github.com/songdongdong123/vue_chat
一个关于vue+mysql+express的全栈项目(六)------ 聊天模型的设计的更多相关文章
- 一个关于vue+mysql+express的全栈项目(一)
最近学了mysql数据库,寻思着能不能构思一个小的全栈项目,思来想去,于是就有了下面的项目: 先上几张效果图吧 目前暂时前端只有这几个页面,后端开发方面,有登录,注册,完善用户信息,获取用 ...
- 一个关于vue+mysql+express的全栈项目(三)------ 登录注册功能的实现(已经密码安全的设计)
本系列文章,主要是一个前端的视角来实现一些后端的功能,所以不会讲太多的前端东西,主要是分享做这个项目学到的一些东西,,,,, 好了闲话不多说,我们开始搭建后端服务,这里我们采用node的express ...
- 一个关于vue+mysql+express的全栈项目(五)------ 实时聊天部分socket.io
一.基于web端的实时通讯,我们都知道有websocket,为了快速开发,本项目我们采用socket.io(客户端使用socket.io-client) Socket.io是一个WebSocket库, ...
- 一个关于vue+mysql+express的全栈项目(二)------ 前端构建
一.使用vue-cli脚手架构建 <!-- 全局安装vue-cli --> npm install -g vue-cli <!-- 设置vue webpack模板 --> vu ...
- 一个关于vue+mysql+express的全栈项目(四)------ sequelize中部分解释
一.模型的引入 引入db.js const sequelize = require('./db') sequelize本身就是一个对象,他提供了众多的方法, const account = seque ...
- Vue、Node全栈项目~面向小白的博客系统~
个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议 ...
- 《从零开始做一个MEAN全栈项目》(3)
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 上一篇文章给大家讲了一下本项目的开发计划,这一章将会开始着手搭建一个MEAN项目.千里之行,始于足下, ...
- 《从零开始做一个MEAN全栈项目》(2)
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技 ...
- 《从零开始做一个MEAN全栈项目》(1)
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 在本系列的开篇,我打算讲一下全栈项目开发的优势,以及MEAN项目各个模块的概览. 为什么选择全栈开发? ...
随机推荐
- USACO Training3.3亚瑟王的宫殿【搜索】By cellur925
题目传送门 因为太蒟了,所以参考了dalao@zbtrs == 对此表示感谢并侵删. 看起来我们就知道这是搜索题. 最后的情况分两种:有骑士背国王/国王自食其力走到集合点. 首先,我们不知道大家 ...
- SpringBoot | 读取配置文件信息
server.port=8081 #修改端口号 server.servlet.context-path= /SpringBoot #修改URL #自定义配置 tz.name = xiaoming tz ...
- UWP 剪贴板
一:剪贴板 一般的复制,用户自己光标选中文本,crtl +c复制就可以了.但是有时候也需求有一个复制的按钮,当用户点击复制按钮,就可以把当前的某些内容复制到剪贴板里. 这里就用到了DataPackag ...
- AtCoder Grand Contest 001 D - Arrays and Palindrome
题目传送门:https://agc001.contest.atcoder.jp/tasks/agc001_d 题目大意: 现要求你构造两个序列\(a,b\),满足: \(a\)序列中数字总和为\(N\ ...
- django 相关问题
和数据库的连接 session的实现 django app开发步骤 python环境准备 数据库安装 model定义 url mapping定义 view定义 template定义 如何查看数据库里的 ...
- No space left on device
No space left on device 数据库无法启动, 发现是内存没有清空导致. 处理过程: ipcs ipcrm
- 在sz
在大城市,sz, 每天骑单车去公交车站. 每天用高德地图 坐快线巴士 车上下班要3个小时. 用guomei 的回收管家 回收 旧空调. 我在kfc 看书 在班车上睡觉/眯眼 在办公室睡觉,看书,工作 ...
- 514 Freedom Trail 自由之路
详见:https://leetcode.com/problems/freedom-trail/description/ C++: class Solution { public: int findRo ...
- java中stringBuilder的用法
java中stringBuilder的用法 String对象是不可改变的.每次使用 System.String类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需 ...
- List的深度copy和浅度拷贝
List<Student> list= Arrays.asList( new Student("Fndroid", 22, Student.Sax.MALE, 180) ...