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

前言

之前，使用 Vue3 做过一次聊天室，如果想看这篇文章的，可以去我的文章里搜一下。前几天Strve.js@3.1.0正式发布，所以想借此机会用它来实操一下。Vite 与 Strve3 到底怎么从 0 到 1 实现一款 Web 聊天室应用的。

实战

首先，我们可以打开maomincoding.gitee.io/strvejs-doc…这个网址。

然后，我们直接用 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);
	});
}

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

项目一览

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

结语

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

github.com/maomincodin…