Vite2 + Strve3：從 0 到 1 實現(xiàn)一款 Web 聊天室應(yīng)用

前言

之前，使用 Vue3 做過一次聊天室，如果想看這篇文章的，可以去我的文章里搜一下。前幾天[email protected]正式發(fā)布，所以想借此機會用它來實操一下。Vite與Strve3到底怎么從 0 到 1 實現(xiàn)一款 Web 聊天室應(yīng)用的。

實戰(zhàn)

首先，我們可以打開https://maomincoding.gitee.io/strvejs-doc/zh/tool/#create-strve-app這個網(wǎng)址。

然后，我們直接用 Create Strve App 來搭建 Strve 項目，我們這里選擇yarn，因為我們要開發(fā)一款簡單的單頁面應(yīng)用，所以這里暫時用不到 Strve Router，我們選用 strve 模板。

最后，搭建項目完成。

我們打開編輯器，項目結(jié)構(gòu)是不是非常清爽。

上面提到，我們只是開發(fā)一款單頁面應(yīng)用，所以可以把多余文件刪除掉，最后項目文件結(jié)構(gòu)是這樣。

下面，我們只需要關(guān)心 App.js 和 app.css 這兩個文件就可以。

我們先看一下App.js。

WebSocket 服務(wù)大家也可以參考一下。

const?ws?=?require('nodejs-websocket');
const?server?=?ws.createServer((conn)?=>?{
?conn.on('text',?(str)?=>?{
??broadcast(str);
?});
?conn.on('error',?(err)?=>?{
??console.log(err);
?});
});
server.listen(3000,?function?()?{
?console.log('open');
});
//?群發(fā)消息
function?broadcast(data)?{
?server.connections.forEach((conn)?=>?{
??conn.sendText(data);
?});
}

最后，我們打包部署一下。

項目一覽

最后，我把項目部署到線上了，https://www.maomin.club/site/myChat-byStrve/，有感興趣的可以瀏覽下，但是要注意言辭哦，小心被~

結(jié)語

本項目是基于 Strve.js 搭建的，如果你覺得還可以，麻煩幫我點個 Star~，支持一下，謝謝！

https://github.com/maomincoding/strve