使用Node.js與Strve.js@4.3.0實戰一款全新的群聊應用
前言
Strve.js現在已經基本穩定在4.3.0版本,與之前的穩定版本相比,比如增加了常用的生命周期鉤子函數。另外,如果你想直接在瀏覽器中使用Strve.js,可以使用IIFE版本。還有很多亮點,比如支持父子組件傳值等等。其他優化大家可以打開官方文檔仔細查閱下。
最近,把Strve.js文檔又重新整理優化了下,我把它也部署到了gitee上,下面是優化后的文檔。
文檔地址:
https://maomincoding.gitee.io/strvejs-doc/zh/
01
02
03
現在前端界這么多框架或者庫,你有能力,有信心去和它們爭一碗羹嗎?你付出這么多精力值得嗎?你自己能力還需提升,開發這個框架有人用嗎?它與現在市面上的框架相比有啥優勢嗎?這些問題不斷在我耳朵響起。是的,開發一款框架或者庫實屬不易,我之前也說過開發Strve.js完全是自己的興趣,想用自己的能力去實現一個屬于自己的框架,而沒有去想與Vue、React去競爭。我想一個人要知道自己想要什么特別重要,不要去管別的,去做就好了。Strve.js這個框架呢,我也會在我能力不斷提升的同時去精進它,去優化它。
上面說得這些,只是覺得國內文人相輕的現象有點嚴重,闡述下自己的觀點。
好了,既然我自己說Strve.js這么好用,不如我們實戰一下項目,從實戰中見真知。我們轉到這篇文章的正題,如何用Strve.js@4.3.0開發一款新的群聊應用呢?那么我們下面就開始吧!
實戰
我們最終實現的群聊應用是這樣的,客戶端使用Strve.js@4.3.0搭建,服務端使用Node.js搭建。
第一步
我們使用CreateStrveApp創建項目(具體怎么使用大家可以去文檔查閱,這里就不再介紹了)。
04
第二步
大體介紹下各個目錄,server目錄是群聊應用的服務端,其他文件以及目錄是群聊應用的客戶端。
05
第三步
因為群聊應用的界面相對簡單,我們只關注App.js文件。
你會看到我們可以不用任何babel插件編譯,而是直接在JS文件中寫HTML標簽,省去了編譯的過程。另外每個功能都是一個函數,非常靈活。如果你想改變頁面數據你只需要關心與頁面掛鉤的那幾個數據即可。還有一點,我們要是想使用DOM元素的方法屬性的話,可以在標簽上直接聲明,利用domInfoAPI就可以取到了。
06
第四步
服務端是使用Node.js編寫,相對簡單。核心是使用了nodejs-websocket插件。
07
演示
08
09
10
結語
謝謝大家的閱讀。
關于群聊項目源碼,如果大家有需要的,可以查看下方鏈接:
https://github.com/maomincoding/newChartRoomByStrve
另外,Strve.js也會不斷發展下去,謝謝大家。
中文文檔:
https://maomincoding.gitee.io/strvejs-doc/zh/
Github:
https://github.com/maomincoding/strve