用原生js+node實現基於WebSocket的聊天應用

簡言 (YouChat)

基於webSocket的web通訊應用（兼容移動端），後臺使用node+express搭建基礎http服務，使用socket.io搭建通信層的ws服務。實現了所有成員的羣聊、針對某一成員的私聊以及新消息提示等一些經常使用功能。前端用原生js編寫實現了發送表情以及發送本地圖片功能，還用到了 manifest 相關的一些概念，能夠經過桌面直接進入。

Git倉庫

github.com/cp0725/YouC…

啓動流程

cd/YouChat

npm install

node server.js

本地訪問地址 http://127.0.0.1:8686/YouChat

(沒顧上作動態編譯 webpack 是構建命令每次修改代碼都要運行一次)

登陸頁

羣聊以及私聊功能

發送表情包發送本地圖片

移動端UI展示

h5 Notification 的表現效果

另外要說兩個知識點是 manifest 和 Notification

manifest manifest是PWA用到的一個技術點，關於PWA早就想學習一下了，直到最近纔看了官方的文檔，咱們用link標籤在頁面頭部引入一個manifest配置文件，在manifest配置文件裏能夠配置頁面圖標、啓動動畫、應用名稱等一些屬性，而後經過瀏覽器把應用發送到桌面下次就能夠直接從桌面進入，表現的效果接近原生的app，由於隱藏了瀏覽器的一些工具欄等操做區。交互性能上也要好不少，下面是相關的表現UI。

桌面圖標

啓動動畫

主要功能

manifest只是PWA相關技術棧的一個技術點，PWA還涉及到離線加載等不少的東西，本應用就只是用manifest配置了一下展示UI。

Notification Notification是H5的api做用是基於瀏覽器來觸發消息通知而不是頁面，也就是說把頁面最小化或者切換到別的tab頁，Notification的通知消息仍是能夠正常觸發。可是有一個限制在Chrome裏必須是https協議，而safari則不對協議作限制，UI表如今上面已經給出來了。