簡言 (YouChat)
基于webSocket的web通信應(yīng)用（兼容移動端），后臺使用node+express搭建基礎(chǔ)http服務(wù)，使用socket.io搭建通訊層的ws服務(wù)。實(shí)現(xiàn)了全部成員的群聊、針對某一成員的私聊以及新消息提示等一些常用功能。前端用原生js編寫實(shí)現(xiàn)了發(fā)送表情以及發(fā)送本地圖片功能，還用到了 manifest 相關(guān)的一些概念，可以通過桌面直接進(jìn)入。
Git倉庫
https://github.com/cp0725/YouChat
啟動流程
cd/YouChat
npm install
node server.js
本地訪問地址 http://127.0.0.1:8686/YouChat
(沒顧上做動態(tài)編譯 webpack 是構(gòu)建命令每次修改代碼都要運(yùn)行一次)
登錄頁
群聊以及私聊功能
發(fā)送表情包發(fā)送本地圖片
移動端UI展現(xiàn)
h5 Notification 的表現(xiàn)效果
另外要說兩個(gè)知識點(diǎn)是 manifest 和 Notification
manifest
manifest是PWA用到的一個(gè)技術(shù)點(diǎn)，關(guān)于PWA早就想學(xué)習(xí)一下了，直到最近才看了官方的文檔，我們用link標(biāo)簽在頁面頭部引入一個(gè)manifest配置文件，在manifest配置文件里可以配置頁面圖標(biāo)、啟動動畫、應(yīng)用名稱等一些屬性，然后通過瀏覽器把應(yīng)用發(fā)送到桌面下次就可以直接從桌面進(jìn)入，表現(xiàn)的效果接近原生的app，因?yàn)殡[藏了瀏覽器的一些工具欄等操作區(qū)。交互性能上也要好很多，下面是相關(guān)的表現(xiàn)UI。
桌面圖標(biāo)
啟動動畫
主要功能
manifest只是PWA相關(guān)技術(shù)棧的一個(gè)技術(shù)點(diǎn)，PWA還涉及到離線加載等很多的東西，本應(yīng)用就只是用manifest配置了一下展現(xiàn)UI。
Notification
Notification是H5的api作用是基于瀏覽器來觸發(fā)消息通知而不是頁面，也就是說把頁面最小化或者切換到別的tab頁，Notification的通知消息還是可以正常觸發(fā)。但是有一個(gè)限制在Chrome里必須是https協(xié)議，而safari則不對協(xié)議做限制，UI表現(xiàn)在上面已經(jīng)給出來了。
