Hola～ 一款基於Electron的聊天軟件

Hola

前言

本項目旨在從零到壹，製做一款界面精美的聊天軟件。

Github 地址

由於已工做，因此可能沒有多少時間來繼續跟進這個項目了，項目可優化的點已在下文列出，歡迎你們 Fork 或 Star。

ps: 徵 logo 一枚。由於本人是開發，設計功底欠缺，因此軟件 logo 設計的有點醜，若是有大神有更好的 logo，歡迎 email。

技術棧

• 開發環境

  • 操做系統：macOS High Sierra v10.13.1
  • 編輯器：Visual Studio Code v1.19.1
  • npm：v5.3.0
  • Node：v8.4.0

• 客戶端

  • UI設計：Sketch
  • 軟件框架：Electron
  • 界面實現：Vue.js + Vuex + Vue-Router + Webpack
  • 通訊模塊：socket.io-client
  • 視頻聊天：原生 WebRTC

• 服務端

  • 服務器：Node.js
  • 後端框架：Koa2
  • 通訊模塊：socket.io
  • 數據庫：Redis 和 MongoDB

軟件效果圖

實現功能

• [x] 登陸註冊模塊（<手機號+驗證碼>形式的登陸註冊）

• [x] 聊天區模塊

  • [x] 最近聯繫人列表
  • [x] 歷史消息（暫未作上拉加載）

  • [x] 私聊

    • [x] 文本消息
    • [x] 圖片消息
    • [x] 視頻聊天

  • [x] 羣聊

    • [x] 文本消息
    • [x] 圖片消息

• [x] 聯繫人模塊

  • [x] 聯繫人列表
  • [x] 好友資料展現
  • [x] 羣組資料展現
  • [x] 刪好友，退出或解散羣組

• [x] 功能區模塊

  • [x] 添加好友/羣組
  • [x] 建立羣組

• [x] 設置區模塊

  • [x] 我的資料設置

  • [x] 軟件設置

    • [x] 國際化

      • [x] 中文
      • [x] 英文

項目目錄

.
├── LICENSE         
├── README.md
├── client          # 客戶端代碼
├── docs            # 各類文檔（需求文檔、UI文檔、流程圖、數據庫設計等）
├── preview.png     # 軟件預覽圖
└── server          # 服務端代碼

反思 & 展望

該項目爲我大學畢業設計的項目，因時間緊迫，只實現了基本的聊天、加刪好友等功能，不少功能還未實現，因此軟件仍是有不少的瑕疵。爲此，我特地思考了很長時間，將待改進的細節或新的功能總結以下：

• [ ] 歷史消息作成上拉瀑布流加載的效果
• [ ] 爲消息註明消息時間、發送狀態、已讀未讀等狀態
• [ ] 爲最近聯繫人列表添加最後一條消息的展現
• [ ] 爲最近聯繫人添加未讀消息個數的統計
• [ ] 添加好友或加入羣組時要進行確認
• [ ] 爲軟件的新消息使用系統原生通知窗口通知
• [ ] 爲軟件增長原生菜單
• [ ] 升級輸入框，從而能夠向輸入框直接插入剪切板中的圖片
• [ ] 本身搭建文件服務器，圖片服務器（或者使用第三方好比七牛雲、阿里雲的相關服務）
• [ ] 爲 WebRTC 實現後備方案，搭建 Relay Server，以加強視頻聊天的穩定性
• [ ] 增長網絡斷開處理的相關邏輯
• [ ] 瞭解數據加密相關知識，爲消息做加密處理
• [ ] 爲軟件作跨平臺處理，兼容性方面有待增強
• [ ] 實現軟件自動更新
• [ ] 接入智能機器人聊天
• [ ] 實現本地存儲歷史消息（nedb）
• [ ] 爲軟件加入聊天狀況分析（好比天天發了多少條消息，與誰聊天最頻繁等）

擴展閱讀

• 初探 Electron - 理論篇
• 初探 Electron - 昇華篇
• XCel 項目總結 - Electron 與 Vue 的性能優化
• 【譯】Electron 自動更新的完整教程（Windows 和 OSX）
• Getting Started with WebRTC
• 通俗易懂：一篇掌握即時通信的消息傳輸安全原理
• 即時通信安全篇（三）：經常使用加解密算法與通信安全講解
• socket.io斷線後重連和消息離線存儲如何實現
• Socket.IO stream
• 運用google-protobuf的IM消息應用開發（前端篇）
• Can one hack 「paste image」 support into a textarea in Firefox?
• 在線和離線事件