❤Nodejs 第十五章（简单websocket聊天实现）
一、先试试我们正常的websocket实现
（1）新建一个空文件夹wsyarn
wsyarn
（2）初始化
yarn init
（3）安装需要的依赖包
yarn add ws --save-dev
yarn add express --save-dev
（4）新建WebSocketServer.js,构建服务端（WebSocketServer.js)
const webSocket = require("ws"); //引入ws服务器模块
const ws = new webSocket.Server({
port: 8000 }); //创建服务器,端口为8000
let clients = {
};
let clientNum = 0;
ws.on("connection", (client) => {
//连接客户端
//给客户端编号,也就是参与聊天的用户
client.name = ++clientNum;
clients[client.name] = client;
// 用户的聊天信息
client.on("message", (msg) => {
console.log("用户" + client.name + "说:" + msg);
//广播数据发送输出
broadcast(client, msg);
});
//报错信息
client.on("error", (err) => {
if (err) {
console.log(err);
}
});
// 下线
client.on("close", () => {
delete clients[client.name];
console.log("用户" + client.name + "下线了~~");
});
});
//广播方法
function broadcast(client, msg) {
for (var key in clients) {
clients[key].send("用户" + client.name + "说：" + msg);
}
}
（5）新建server.js,构建客户端静态服务器
const express = require("express"); //引入express模块
const path = require("path"); //引入磁盘路径模块
const app = express();
const port = 3000; //端口
const host = "127.0.0.1"; //主机
app.use(express.static(path.resolve(__dirname, "./client"))); //设置要开启服务的路径
app.listen(port, host, () => {
//监听服务
console.log(`客户端服务器为:http://${
host}:${
port}`);
});
（6）新建index.html,构建客户页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>客户端</title>
</head>
<body>
<h1>聊天室</h1>
<div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
<br />
<div>
<input type="text" id="msg" style="width: 200px;">
</div>
<button id="submit">提交</button>
<script>
document.querySelector('#submit').addEventListener('click', function () {
var msg2 = msg.value
ws.send(msg2)
msg.value = ''
}, false);
// 客户端连接到服务端配置
const ws = new WebSocket("ws://127.0.0.1:8000"); //连接到客户端
//上线
ws.onopen = () => {
ws.send("我上线啦");
};
//发送信息
ws.onmessage = (msg) => {
const content = document.getElementById("content");
content.innerHTML += msg.data + "<br>";
};
//报错
ws.onerror = (err) => {
console.log(err);
};
//下线
ws.onclose = () => {
console.log("close");
};
</script>
</body>
</html>
（7） 启动 WebSocketServer.js ,server.js
node WebSocketServer.js
node server.js
（8）拿俩浏览器打开打开index.html 浏览
实现聊天OK！
二、在我们的项目之中实现websocket（基于Node20+Vite）
1、安装
yarn add ws
2、导入相关的模块
// 本地websocket连接
import WebSocket from "ws";
// import http from "http";
3、创建ws通信
const wss = new WebSocket.Server({
port: 8888 });
这个时候我们发现报错：
一直提示我们WebSocket.WebSocketServer is not a constructor
这是怎么回事？来看看官方的更改吧
三、Node更新（在 Node.js 和 Vite 中使用 WebSocket 可能需要适应新版本带来的变化）
使用 WebSocket 在 Node.js 20 和 Vite 中
Node.js 的最新版本带来了一些重大更新，特别是在处理网络协议如 WebSocket 方面。如果你在使用 Node.js 20 版配合 Vite 时遇到 WebSocket 相关问题，下面的信息可能对你有所帮助。
Node.js 对 WebSocket 的更新
从 Node.js 15 版本起，Node.js 开始推荐使用内置的 http 和 https 模块直接支持 WebSocket，而不是依赖第三方库。此外，Node.js 引入了实验性的 http/websocket 模块来提供原生的 WebSocket 支持。
兼容性和问题
使用 Vite 时可能会遇到的兼容性问题主要来自于 Node.js 和 Vite 对现代 JavaScript 特性的支持。Vite 主要针对前端资源优化，而不直接处理 WebSocket 等后端服务。
解决方案
使用 Node.js 内置模块
如果你的 Node.js 版本支持，可以尝试使用内置的 http/websocket 模块：
import {
WebSocketServer } from 'http/websocket';
const wss = new WebSocketServer({
port: 3000 });
wss.on('connection', function connection(ws) {
ws.on('message', function message(data) {
console.log('received: %s', data);
});
ws.send('something');
});
使用第三方库 ws
对于需要更多功能的场景，可以使用 ws 库，它广泛兼容多个 Node.js 版本：
yarn add ws
import WebSocket, {
WebSocketServer } from 'ws';
const wss = new WebSocketServer({
port: 3000 });
wss.on('connection', function connection(ws) {
ws.on('message', function message(data, isBinary) {
const message = isBinary ? data : data.toString();
console.log('received: %s', message);
});
ws.send('Hello!');
});
检查 Vite 配置
确保 Vite 配置正确，没有干扰到 Node.js 模块的正常使用。特别是 optimizeDeps 配置和相关插件设置。
结语：本来我的Node是嵌套在我的Vite+vue3 项目之中的，最后听从了群友的建议，最后还是将前后端（也就是vie+vue3 另外一套是Node+mysql进行了分离）
