一個關於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