前言
之前，使用 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。
import { h, setData } from 'strvejs';
import './style/app.css';
let socket = null;
const path = 'ws://localhost:3000/'; // 服务端地址
const bg = randomRgb();
const name = new Date().getTime().toString();
const chatArr = [];
let textValue = '';
init();
function App() {
return h/*html*/ `
<div class="home">
<div class="content">
<ul $key class="chat-box">
${chatArr.map(
(item) => h/*html*/ `
<li class="chat-item">
${
item.name === name
? h/*html*/ ` <div class="chat-msg mine"> <p class="msg mineBg msg-m">${item.txt}</p> <p class="user" style="background: ${bg}"> ${useName(item.name)} </p> </div>`
: h/*html*/ ` <div class="chat-msg other"> <p class="user" style="background:${item.bg}" $key> ${useName(item.name)} </p> <p class="msg otherBg msg-o" $key>${item.txt}</p> </div> `
}
</li>`
)}
</ul>
</div>
<div class="footer">
<textarea
id="textValue"
$key
placeholder="说点什么..."
autofocus
onChange=${onTextValue}
></textarea>
<div class="send-box">
<p class="send active" onClick=${send}>发送</p>
</div>
</div>
</div>
`;
}
function useName(name) {
const username = name.toString();
return username.substring(name.length - 5, name.length);
}
// 随机获取头像背景
function randomRgb() {
let R = Math.floor(Math.random() * 130 + 110);
let G = Math.floor(Math.random() * 130 + 110);
let B = Math.floor(Math.random() * 130 + 110);
return 'rgb(' + R + ',' + G + ',' + B + ')';
}
// WebSocket初始化
function init() {
if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持socket');
} else {
socket = new WebSocket(path);
socket.onopen = open;
socket.onerror = error;
socket.onclose = closed;
socket.onmessage = getMessage;
}
}
function open() {
alert('服务连接成功');
}
function error() {
alert('连接错误');
}
function closed() {
alert('服务关闭');
}
// 监听信息
function getMessage(msg) {
const obj = JSON.parse(msg.data);
setData(() => {
chatArr.push(obj);
}).then(() => {
const chatbox = document.querySelector('.chat-box');
chatbox.scrollTop = chatbox.scrollHeight;
});
}
function onTextValue(v) {
textValue = v.target.value;
v.target.value = '';
}
// 发送消息
function send() {
if (textValue.trim().length > 0) {
const obj = {
name: name,
txt: textValue,
bg: bg,
};
socket.send(JSON.stringify(obj));
textValue = '';
document.querySelector('#textValue').focus();
}
}
export default App;
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
