做一个简易聊天室

聊天室是怎么工作的

你用微信聊天的时候，消息是实时到达的，不需要你刷新页面。这背后用的技术叫 WebSocket——它就像一条电话线，一头是你，一头是服务器，接通后双方可以随时说话，不用每次都重新拨号。

相比之下，普通的网页请求像写信：你写一封信寄出去（请求），等对方回信（响应），再寄一封……效率太低了。WebSocket就是把"写信"升级成了"打电话"。

我们要做什么

一个多人聊天室：

第一步：初始化项目

mkdir chat-room
cd chat-room
npm init -y
npm install express ws

ws 是一个 WebSocket 库，帮我们处理实时通信。

第二步：写服务端

创建 server.js：

var express = require("express");
var http = require("http");
var WebSocket = require("ws");

var app = express();
app.use(express.static("public"));
var server = http.createServer(app);
var wss = new WebSocket.Server({ server: server });

var clients = [];

wss.on("connection", function(ws) {
var username = "匿名用户";
clients.push(ws);

ws.on("message", function(data) {
var msg = JSON.parse(data);

if (msg.type === "join") {
username = msg.name;
broadcast({
type: "system",
text: username + " 加入了聊天室"
});
} else if (msg.type === "chat") {
broadcast({
type: "chat",
name: username,
text: msg.text,
time: new Date().toLocaleTimeString("zh-CN")
});
}
});

ws.on("close", function() {
clients = clients.filter(function(c) {
return c !== ws;
});
broadcast({
type: "system",
text: username + " 离开了聊天室"
});
});
});

function broadcast(message) {
var data = JSON.stringify(message);
for (var i = 0; i < clients.length; i++) {
if (clients[i].readyState === WebSocket.OPEN) {
clients[i].send(data);
}
}
}

server.listen(3000, function() {
console.log("聊天室运行在 http://localhost:3000");
});

broadcast函数是广播——把消息发给所有在线的人，就像在教室里大声说话，所有人都能听到。

第三步：做聊天页面

创建 public/index.html：

简易聊天室

怎么测试

运行 node server.js，然后在浏览器里打开两个 http://localhost:3000 的窗口，分别输入不同的昵称，就能互相聊天了。

总结

一个能用的聊天室，核心代码不到100行。WebSocket是现代Web开发的重要技术，掌握了它你就能做很多实时应用：在线协作文档、多人游戏、实时通知等。