基於Vue的點對點聊天專案

故事膠片發表於2018-06-14

前提

一個基於平臺內部的聊天專案,需要實現使用者之間可以相互聊天傳送訊息,可以新增好友等功能。且訊息必須是實時性的,並且使用者下線後再次上線可以接受離線訊息。

技術棧

Vue.js + Html5 + CSS3 + Sass + Vuex + Axios + Websocket 等

原始碼

Github

專案例項

  • 因為專案介面為線上介面 本地執行會報錯 你可以將本地loaclhost 地址 指向 stone.snail.com
  • 或者直接訪問 線上地址另一個專案社群 註冊賬號 返回後即可體驗

技術難點

  • 實現從好友列表到聊天列表的發起
  • 訊息的儲存
  • 上下線狀態的即時變動
  • 收到訊息即使提醒以及未讀訊息的數量
  • 好友刪除的通知 等等

專案執行

  • git clone https://github.com/jiaopianjun/echat.git
  • npm install
  • npm run dev

專案截圖

好友介面

聊天介面

新增好友介面

聊天介面

聊天介面

相關文章