摘要:前言本項(xiàng)目旨在從零到壹,制作一款界面精美的聊天軟件。因?yàn)楸救耸情_發(fā),設(shè)計(jì)功底欠缺,所以軟件設(shè)計(jì)的有點(diǎn)丑,如果有大神有更好的,歡迎。
Hola 前言
本項(xiàng)目旨在從零到壹,制作一款界面精美的聊天軟件。
Github 地址技術(shù)棧因?yàn)橐压ぷ鳎钥赡軟]有多少時(shí)間來繼續(xù)跟進(jìn)這個(gè)項(xiàng)目了,項(xiàng)目可優(yōu)化的點(diǎn)已在下文列出,歡迎大家 Fork 或 Star。
ps: 征 logo 一枚。因?yàn)楸救耸情_發(fā),設(shè)計(jì)功底欠缺,所以軟件 logo 設(shè)計(jì)的有點(diǎn)丑,如果有大神有更好的 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設(shè)計(jì):Sketch
軟件框架:Electron
界面實(shí)現(xiàn):Vue.js + Vuex + Vue-Router + Webpack
通信模塊:socket.io-client
視頻聊天:原生 WebRTC
服務(wù)端
服務(wù)器:Node.js
后端框架:Koa2
通信模塊:socket.io
數(shù)據(jù)庫:Redis 和 MongoDB
軟件效果圖 實(shí)現(xiàn)功能[x] 登錄注冊(cè)模塊(<手機(jī)號(hào)+驗(yàn)證碼>形式的登錄注冊(cè))
[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] 設(shè)置區(qū)模塊
[x] 個(gè)人資料設(shè)置
[x] 軟件設(shè)置
[x] 國際化
[x] 中文
[x] 英文
項(xiàng)目目錄. ├── LICENSE ├── README.md ├── client # 客戶端代碼 ├── docs # 各種文檔(需求文檔、UI文檔、流程圖、數(shù)據(jù)庫設(shè)計(jì)等) ├── preview.png # 軟件預(yù)覽圖 └── server # 服務(wù)端代碼反思 & 展望
該項(xiàng)目為我大學(xué)畢業(yè)設(shè)計(jì)的項(xiàng)目,因時(shí)間緊迫,只實(shí)現(xiàn)了基本的聊天、加刪好友等功能,很多功能還未實(shí)現(xiàn),所以軟件還是有很多的瑕疵。為此,我特意思考了很長時(shí)間,將待改進(jìn)的細(xì)節(jié)或新的功能總結(jié)如下:
[ ] 歷史消息做成上拉瀑布流加載的效果
[ ] 為消息注明消息時(shí)間、發(fā)送狀態(tài)、已讀未讀等狀態(tài)
[ ] 為最近聯(lián)系人列表添加最后一條消息的展示
[ ] 為最近聯(lián)系人添加未讀消息個(gè)數(shù)的統(tǒng)計(jì)
[ ] 添加好友或加入群組時(shí)要進(jìn)行確認(rèn)
[ ] 為軟件的新消息使用系統(tǒng)原生通知窗口通知
[ ] 為軟件增加原生菜單
[ ] 升級(jí)輸入框,從而可以向輸入框直接插入剪切板中的圖片
[ ] 自己搭建文件服務(wù)器,圖片服務(wù)器(或者使用第三方比如七牛云、阿里云的相關(guān)服務(wù))
[ ] 為 WebRTC 實(shí)現(xiàn)后備方案,搭建 Relay Server,以增強(qiáng)視頻聊天的穩(wěn)定性
[ ] 增加網(wǎng)絡(luò)斷開處理的相關(guān)邏輯
[ ] 了解數(shù)據(jù)加密相關(guān)知識(shí),為消息作加密處理
[ ] 為軟件做跨平臺(tái)處理,兼容性方面有待加強(qiáng)
[ ] 實(shí)現(xiàn)軟件自動(dòng)更新
[ ] 接入智能機(jī)器人聊天
[ ] 實(shí)現(xiàn)本地存儲(chǔ)歷史消息(nedb)
[ ] 為軟件加入聊天情況分析(比如每天發(fā)了多少條消息,與誰聊天最頻繁等)
擴(kuò)展閱讀初探 Electron - 理論篇
初探 Electron - 升華篇
XCel 項(xiàng)目總結(jié) - Electron 與 Vue 的性能優(yōu)化
【譯】Electron 自動(dòng)更新的完整教程(Windows 和 OSX)
Getting Started with WebRTC
通俗易懂:一篇掌握即時(shí)通訊的消息傳輸安全原理
即時(shí)通訊安全篇(三):常用加解密算法與通訊安全講解
socket.io斷線后重連和消息離線存儲(chǔ)如何實(shí)現(xiàn)
Socket.IO stream
運(yùn)用google-protobuf的IM消息應(yīng)用開發(fā)(前端篇)
Can one hack “paste image” support into a textarea in Firefox?
在線和離線事件
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/99008.html
摘要:在考慮宇航員的生命安全時(shí),輕微的打嗝或者服務(wù)中斷都會(huì)釀成生死事故。也許最大的挑戰(zhàn)來自谷歌主導(dǎo)的簡(jiǎn)稱。在最近的開發(fā)者峰會(huì),以及今年的會(huì)議上,谷歌都為安排了大量討論。由微軟提供,是廣受歡迎的編輯器,到月份已經(jīng)獲得了超過五百萬用戶。 譯者:安冬 (滬江Web前端開發(fā)工程師)本文原創(chuàng)翻譯,轉(zhuǎn)載請(qǐng)注明作者及出處。原文地址:http://developer.telerik.com/... 技術(shù)世界...
摘要:你們說能不能就用的開發(fā)模式來實(shí)現(xiàn)客戶端啊這樣版版版就都有了。有道云筆記可能就是最貼近我們想法的產(chǎn)品,有客戶端,有版。這個(gè)項(xiàng)目由發(fā)起和維護(hù)。 最近一個(gè)多月一直在用 AngularJS 做公司的一個(gè)項(xiàng)目(還沒有做完),我之前主要是用 PHP 開發(fā)服務(wù)端的,AngularJS 也是現(xiàn)學(xué)現(xiàn)賣,整個(gè)過程還是比較有意義的,覺得很有必要寫篇文章記錄一下。 緣起 事情是這樣的……我們團(tuán)隊(duì)的產(chǎn)品是一款 ...
摘要:你們說能不能就用的開發(fā)模式來實(shí)現(xiàn)客戶端啊這樣版版版就都有了。有道云筆記可能就是最貼近我們想法的產(chǎn)品,有客戶端,有版。這個(gè)項(xiàng)目由發(fā)起和維護(hù)。 最近一個(gè)多月一直在用 AngularJS 做公司的一個(gè)項(xiàng)目(還沒有做完),我之前主要是用 PHP 開發(fā)服務(wù)端的,AngularJS 也是現(xiàn)學(xué)現(xiàn)賣,整個(gè)過程還是比較有意義的,覺得很有必要寫篇文章記錄一下。 緣起 事情是這樣的……我們團(tuán)隊(duì)的產(chǎn)品是一款 ...
摘要:有部分前端人員使用的是盜版的。非編程相關(guān)其它一些我使用的,但與編程關(guān)系不大的正版工具。尊重別人,更是尊重自己做為一個(gè)程序員,使用正版,我認(rèn)為這不是自做清高的事情,這是對(duì)自己職業(yè)的一種基本尊重。 ...
摘要:基于的跨平臺(tái)筆記軟件為什么自從工作之后我開始進(jìn)行筆記記錄這是一個(gè)很棒的習(xí)慣我曾經(jīng)使用過麥庫等都是一些不錯(cuò)的筆記軟件但是都有一些各式各樣的問題不能滿足我的使用年我用編寫了第一款筆記軟件支持和富文本編輯器但是沒有云同步功能年我用和編寫了一個(gè)編輯 GitNote 基于 Git 的跨平臺(tái)筆記軟件 為什么 自從工作之后,我開始進(jìn)行筆記記錄,這是一個(gè)很棒的習(xí)慣.我曾經(jīng)使用過 EDiary Ever...
閱讀 3315·2021-11-16 11:45
閱讀 2667·2021-09-22 15:23
閱讀 571·2021-07-30 14:58
閱讀 468·2019-08-30 15:54
閱讀 2245·2019-08-29 16:19
閱讀 3024·2019-08-29 12:45
閱讀 945·2019-08-23 17:57
閱讀 1798·2019-08-23 17:54