Vite2 + Strve3：从 0 到 1 实现一款 Web 聊天室应用

之前，使用 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 服务大家也可以参考一下。

constws=require("nodejs-websocket");constserver=ws.createServer((conn)=>{conn.on("text",(str)=>{broadcast(str);});conn.on("error",(err)=>{console.log(err);});});server.listen(3000,function(){console.log("open");});//群发消息functionbroadcast(data){server.connections.forEach((conn)=>{conn.sendText(data);});}

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

最后，我把项目部署到线上了，https://www.maomin.club/site/myChat-byStrve/，有感兴趣的可以浏览下，但是要注意言辞哦，小心被~

本项目是基于 Strve.js 搭建的，如果你觉得还可以，麻烦帮我点个 Star~，支持一下，谢谢！

https://github.com/maomincoding/strve

关键词： 参考一下 如果你觉得 感兴趣的