簡言 (YouChat)
基于webSocket的web通信應用（兼容移動端）捡多，后臺使用node+express搭建基礎(chǔ)http服務蓖康，使用socket.io搭建通訊層的ws服務。實現(xiàn)了全部成員的群聊垒手、針對某一成員的私聊以及新消息提示等一些常用功能蒜焊。前端用原生js編寫實現(xiàn)了發(fā)送表情以及發(fā)送本地圖片功能，還用到了 manifest 相關(guā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)建命令每次修改代碼都要運行一次)
登錄頁
群聊以及私聊功能
發(fā)送表情包發(fā)送本地圖片
移動端UI展現(xiàn)
h5 Notification 的表現(xiàn)效果
另外要說兩個知識點是 manifest 和 Notification
manifest
manifest是PWA用到的一個技術(shù)點，關(guān)于PWA早就想學習一下了榜掌，直到最近才看了官方的文檔优妙，我們用link標簽在頁面頭部引入一個manifest配置文件，在manifest配置文件里可以配置頁面圖標憎账、啟動動畫套硼、應用名稱等一些屬性，然后通過瀏覽器把應用發(fā)送到桌面下次就可以直接從桌面進入胞皱，表現(xiàn)的效果接近原生的app熟菲，因為隱藏了瀏覽器的一些工具欄等操作區(qū)看政。交互性能上也要好很多朴恳，下面是相關(guān)的表現(xiàn)UI抄罕。
桌面圖標
啟動動畫
主要功能
manifest只是PWA相關(guān)技術(shù)棧的一個技術(shù)點，PWA還涉及到離線加載等很多的東西于颖，本應用就只是用manifest配置了一下展現(xiàn)UI呆贿。
Notification
Notification是H5的api作用是基于瀏覽器來觸發(fā)消息通知而不是頁面，也就是說把頁面最小化或者切換到別的tab頁森渐，Notification的通知消息還是可以正常觸發(fā)做入。但是有一個限制在Chrome里必須是https協(xié)議，而safari則不對協(xié)議做限制同衣，UI表現(xiàn)在上面已經(jīng)給出來了竟块。
