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

Kaede 發(fā)布于2019-08-23 12:47 / 2648人閱讀

摘要：前言本項目旨在從零到壹，制作一款界面精美的聊天軟件。因為本人是開發(fā)，設計功底欠缺，所以軟件設計的有點丑，如果有大神有更好的，歡迎。

Hola 前言

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

Github 地址

因為已工作，所以可能沒有多少時間來繼續(xù)跟進這個項目了，項目可優(yōu)化的點已在下文列出，歡迎大家 Fork 或 Star。

ps: 征 logo 一枚。因為本人是開發(fā)，設計功底欠缺，所以軟件 logo 設計的有點丑，如果有大神有更好的 logo，歡迎 email。

技術棧

開發(fā)環(huán)境

操作系統(tǒng)：macOS High Sierra v10.13.1

編輯器：Visual Studio Code v1.19.1

npm：v5.3.0

Node：v8.4.0

客戶端

UI設計：Sketch

軟件框架：Electron

界面實現(xiàn)：Vue.js + Vuex + Vue-Router + Webpack

通信模塊：socket.io-client

視頻聊天：原生 WebRTC

服務端

服務器：Node.js

后端框架：Koa2

通信模塊：socket.io

數(shù)據(jù)庫：Redis 和 MongoDB

軟件效果圖

實現(xiàn)功能

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

[x] 聊天區(qū)模塊

[x] 最近聯(lián)系人列表

[x] 歷史消息（暫未做上拉加載）

[x] 私聊

[x] 文本消息

[x] 圖片消息

[x] 視頻聊天

[x] 群聊

[x] 文本消息

[x] 圖片消息

[x] 聯(lián)系人模塊

[x] 聯(lián)系人列表

[x] 好友資料展示

[x] 群組資料展示

[x] 刪好友，退出或解散群組

[x] 功能區(qū)模塊

[x] 添加好友/群組

[x] 創(chuàng)建群組

[x] 設置區(qū)模塊

[x] 個人資料設置

[x] 軟件設置

[x] 國際化

[x] 中文

[x] 英文

項目目錄

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

反思 & 展望

該項目為我大學畢業(yè)設計的項目，因時間緊迫，只實現(xiàn)了基本的聊天、加刪好友等功能，很多功能還未實現(xiàn)，所以軟件還是有很多的瑕疵。為此，我特意思考了很長時間，將待改進的細節(jié)或新的功能總結(jié)如下：

[ ] 歷史消息做成上拉瀑布流加載的效果

[ ] 為消息注明消息時間、發(fā)送狀態(tài)、已讀未讀等狀態(tài)

[ ] 為最近聯(lián)系人列表添加最后一條消息的展示

[ ] 為最近聯(lián)系人添加未讀消息個數(shù)的統(tǒng)計

[ ] 添加好友或加入群組時要進行確認

[ ] 為軟件的新消息使用系統(tǒng)原生通知窗口通知

[ ] 為軟件增加原生菜單

[ ] 升級輸入框，從而可以向輸入框直接插入剪切板中的圖片

[ ] 自己搭建文件服務器，圖片服務器（或者使用第三方比如七牛云、阿里云的相關服務）

[ ] 為 WebRTC 實現(xiàn)后備方案，搭建 Relay Server，以增強視頻聊天的穩(wěn)定性

[ ] 增加網(wǎng)絡斷開處理的相關邏輯

[ ] 了解數(shù)據(jù)加密相關知識，為消息作加密處理

[ ] 為軟件做跨平臺處理，兼容性方面有待加強

[ ] 實現(xiàn)軟件自動更新

[ ] 接入智能機器人聊天

[ ] 實現(xiàn)本地存儲歷史消息（nedb）

[ ] 為軟件加入聊天情況分析（比如每天發(fā)了多少條消息，與誰聊天最頻繁等）

擴展閱讀

初探 Electron - 理論篇

初探 Electron - 升華篇

XCel 項目總結(jié) - Electron 與 Vue 的性能優(yōu)化

【譯】Electron 自動更新的完整教程（Windows 和 OSX）

Getting Started with WebRTC

通俗易懂：一篇掌握即時通訊的消息傳輸安全原理

即時通訊安全篇（三）：常用加解密算法與通訊安全講解

socket.io斷線后重連和消息離線存儲如何實現(xiàn)

Socket.IO stream

運用google-protobuf的IM消息應用開發(fā)（前端篇）

Can one hack “paste image” support into a textarea in Firefox?

在線和離線事件

云服務器 GPU云服務器基于webrtc的多人視頻聊天服務實例基于rtc視頻聊天架構基于webrtc實現(xiàn)一對一聊天一款強大的php大馬

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99008.html

翻譯 | 擺脫瀏覽器限制的JavaScript

摘要：在考慮宇航員的生命安全時，輕微的打嗝或者服務中斷都會釀成生死事故。也許最大的挑戰(zhàn)來自谷歌主導的簡稱。在最近的開發(fā)者峰會，以及今年的會議上，谷歌都為安排了大量討論。由微軟提供，是廣受歡迎的編輯器，到月份已經(jīng)獲得了超過五百萬用戶。譯者：安冬（滬江Web前端開發(fā)工程師）本文原創(chuàng)翻譯，轉(zhuǎn)載請注明作者及出處。原文地址：http://developer.telerik.com/... 技術世界...

xfee 2019-08-20 19:02 評論0 收藏0
從用 AngularJS 開發(fā) PC 客戶端說起

摘要：你們說能不能就用的開發(fā)模式來實現(xiàn)客戶端啊這樣版版版就都有了。有道云筆記可能就是最貼近我們想法的產(chǎn)品，有客戶端，有版。這個項目由發(fā)起和維護。最近一個多月一直在用 AngularJS 做公司的一個項目（還沒有做完），我之前主要是用 PHP 開發(fā)服務端的，AngularJS 也是現(xiàn)學現(xiàn)賣，整個過程還是比較有意義的，覺得很有必要寫篇文章記錄一下。緣起事情是這樣的……我們團隊的產(chǎn)品是一款 ...

waltr 2019-08-19 17:15 評論0 收藏0
從用 AngularJS 開發(fā) PC 客戶端說起

摘要：你們說能不能就用的開發(fā)模式來實現(xiàn)客戶端啊這樣版版版就都有了。有道云筆記可能就是最貼近我們想法的產(chǎn)品，有客戶端，有版。這個項目由發(fā)起和維護。最近一個多月一直在用 AngularJS 做公司的一個項目（還沒有做完），我之前主要是用 PHP 開發(fā)服務端的，AngularJS 也是現(xiàn)學現(xiàn)賣，整個過程還是比較有意義的，覺得很有必要寫篇文章記錄一下。緣起事情是這樣的……我們團隊的產(chǎn)品是一款 ...

Reducto 2019-06-27 11:49 評論0 收藏0
一個程序員的正版清單

摘要：有部分前端人員使用的是盜版的。非編程相關其它一些我使用的，但與編程關系不大的正版工具。尊重別人，更是尊重自己做為一個程序員，使用正版，我認為這不是自做清高的事情，這是對自己職業(yè)的一種基本尊重。 ...

wudengzan 2021-09-24 09:48 評論0 收藏0
GitNote 基于 Git 的跨平臺筆記軟件正式發(fā)布

摘要：基于的跨平臺筆記軟件為什么自從工作之后我開始進行筆記記錄這是一個很棒的習慣我曾經(jīng)使用過麥庫等都是一些不錯的筆記軟件但是都有一些各式各樣的問題不能滿足我的使用年我用編寫了第一款筆記軟件支持和富文本編輯器但是沒有云同步功能年我用和編寫了一個編輯 GitNote 基于 Git 的跨平臺筆記軟件為什么自從工作之后,我開始進行筆記記錄,這是一個很棒的習慣.我曾經(jīng)使用過 EDiary Ever...

liaosilzu2007 2019-08-23 15:05 評論0 收藏0