使用Node.js與[email protected]實戰(zhàn)一款全新的群聊應(yīng)用

前言

Strve.js現(xiàn)在已經(jīng)基本穩(wěn)定在4.3.0版本，與之前的穩(wěn)定版本相比，比如增加了常用的生命周期鉤子函數(shù)。另外，如果你想直接在瀏覽器中使用Strve.js，可以使用IIFE版本。還有很多亮點，比如支持父子組件傳值等等。其他優(yōu)化大家可以打開官方文檔仔細(xì)查閱下。

最近，把Strve.js文檔又重新整理優(yōu)化了下，我把它也部署到了gitee上，下面是優(yōu)化后的文檔。

文檔地址：

https://maomincoding.gitee.io/strvejs-doc/zh/

現(xiàn)在前端界這么多框架或者庫，你有能力，有信心去和它們爭一碗羹嗎？你付出這么多精力值得嗎？你自己能力還需提升，開發(fā)這個框架有人用嗎？它與現(xiàn)在市面上的框架相比有啥優(yōu)勢嗎？這些問題不斷在我耳朵響起。是的，開發(fā)一款框架或者庫實屬不易，我之前也說過開發(fā)Strve.js完全是自己的興趣，想用自己的能力去實現(xiàn)一個屬于自己的框架，而沒有去想與Vue、React去競爭。我想一個人要知道自己想要什么特別重要，不要去管別的，去做就好了。Strve.js這個框架呢，我也會在我能力不斷提升的同時去精進(jìn)它，去優(yōu)化它。

上面說得這些，只是覺得國內(nèi)文人相輕的現(xiàn)象有點嚴(yán)重，闡述下自己的觀點。

好了，既然我自己說Strve.js這么好用，不如我們實戰(zhàn)一下項目，從實戰(zhàn)中見真知。我們轉(zhuǎn)到這篇文章的正題，如何用[email protected]開發(fā)一款新的群聊應(yīng)用呢？那么我們下面就開始吧！

實戰(zhàn)

我們最終實現(xiàn)的群聊應(yīng)用是這樣的，客戶端使用[email protected]搭建，服務(wù)端使用Node.js搭建。

第一步

我們使用CreateStrveApp創(chuàng)建項目（具體怎么使用大家可以去文檔查閱，這里就不再介紹了）。

第二步

大體介紹下各個目錄，server目錄是群聊應(yīng)用的服務(wù)端，其他文件以及目錄是群聊應(yīng)用的客戶端。

第三步

因為群聊應(yīng)用的界面相對簡單，我們只關(guān)注App.js文件。

你會看到我們可以不用任何babel插件編譯，而是直接在JS文件中寫HTML標(biāo)簽，省去了編譯的過程。另外每個功能都是一個函數(shù)，非常靈活。如果你想改變頁面數(shù)據(jù)你只需要關(guān)心與頁面掛鉤的那幾個數(shù)據(jù)即可。還有一點，我們要是想使用DOM元素的方法屬性的話，可以在標(biāo)簽上直接聲明，利用domInfoAPI就可以取到了。

第四步

服務(wù)端是使用Node.js編寫，相對簡單。核心是使用了nodejs-websocket插件。

演示

結(jié)語

謝謝大家的閱讀。

關(guān)于群聊項目源碼，如果大家有需要的，可以查看下方鏈接：

https://github.com/maomincoding/newChartRoomByStrve

另外，Strve.js也會不斷發(fā)展下去，謝謝大家。

中文文檔：

https://maomincoding.gitee.io/strvejs-doc/zh/

Github：

https://github.com/maomincoding/strve