Vite2 + Strve3：从 0 到 1 实现一款 Web 聊天室应用
共 1004字，需浏览 3分钟
· 2022-06-09
前言
之前，使用 Vue3 做过一次聊天室，如果想看这篇文章的，可以去我的文章里搜一下。前几天Strve.js@3.1.0正式发布，所以想借此机会用它来实操一下。Vite与Strve3到底怎么从 0 到 1 实现一款 Web 聊天室应用的。
实战
首先，我们可以打开https://maomincoding.gitee.io/strvejs-doc/zh/tool/#create-strve-app这个网址。
然后，我们直接用 Create Strve App 来搭建 Strve 项目，我们这里选择yarn，因为我们要开发一款简单的单页面应用，所以这里暂时用不到 Strve Router，我们选用 strve 模板。
最后，搭建项目完成。
我们打开编辑器，项目结构是不是非常清爽。
上面提到，我们只是开发一款单页面应用，所以可以把多余文件删除掉，最后项目文件结构是这样。
下面，我们只需要关心 App.js 和 app.css 这两个文件就可以。
我们先看一下App.js。
WebSocket 服务大家也可以参考一下。
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');
});
// 群发消息
function broadcast(data) {
server.connections.forEach((conn) => {
conn.sendText(data);
});
}
最后，我们打包部署一下。
项目一览
最后，我把项目部署到线上了，https://www.maomin.club/site/myChat-byStrve/，有感兴趣的可以浏览下，但是要注意言辞哦，小心被~
结语
本项目是基于 Strve.js 搭建的，如果你觉得还可以，麻烦帮我点个 Star~，支持一下，谢谢！
https://github.com/maomincoding/strve