一个关于vue+mysql+express的全栈项目（六）------ 聊天模型的设计

1、数据模型的设计

     这里咱们先不讨论群聊的模型，指讨论两我的之间的聊天，咱们能够把两我的实时聊天抽象为（点对点）的实时通信，以下图

    咱们上面的所说的模型其实也就是数据包的模型应该怎么设计，换句话说就是数据包的数据结构的设计，其实很简单，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();

2、数据的处理，

 通过上面的一顿抽象，其实也不算抽象，反正我以为是挺形象的，哈哈，为了最终达到微信同样的聊天效果，我画了下图（从数据存储，消息查询，消息列表的获取展现，聊天窗口的消息查询展现），供你们参考

下面是项目的部分截图

 

 项目地址：https://github.com/songdongdong123/vue_chat