1. 前言
随着互联网的发展，人们之间的信息交流在不断的创新和演化，聊天室也成为了一种常见的社交方式。而现在，我们将使用JavaScript构建一个实时的聊天室。
2. 开始
2.1 需求分析
首先，我们需要确定聊天室的功能需求。我们需要实现以下功能：
用户能够登陆聊天室
用户能够发送消息到聊天室
用户能够查看聊天室中的所有消息
聊天室中的所有用户都能够实时接收到新消息
用户能够退出聊天室
根据以上需求，我们可以确定我们需要使用WebSocket作为聊天室的通信协议。
2.2 创建服务端
我们使用Node.js来创建服务端。首先我们需要安装WebSocket模块：
npm i websocket
然后创建一个服务器文件 server.js：
const WebSocketServer = require("websocket").server;
const http = require("http");
//创建一个 http server
const httpServer = http.createServer((req, res) => {
res.end();
});
//将服务挂载到80端口上
httpServer.listen(80, () => {
console.log("server is listening on 80 port");
});
//创建 webSocket server
const wsServer = new WebSocketServer({
httpServer,
});
//记录所有的连接
const clients = [];
wsServer.on("request", (request) => {
//连接成功
const connection = request.accept(null, request.origin);
clients.push(connection);
//监听消息
connection.on("message", (message) => {
//广播消息到所有连接
clients.forEach((client) => {
if (client !== connection && client.readyState === WebSocket.OPEN) {
client.send(message.utf8Data);
}
});
});
//关闭连接
connection.on("close", (reasonCode, description) => {
//从clients数组中移除该连接
const index = clients.indexOf(connection);
if (index >= 0) {
clients.splice(index, 1);
}
});
});
代码解释：
使用Node.js中的http模块创建一个http服务，并将服务挂在到80端口。
WebSocketServer是WebSocket提供的对协议的实现，它需要一个HTTP server serv一个依赖关系来工作。在参数 httpServer 中传递http服务，这样，WebSocket将通过HTTP服务来接收它的握手。
创建一个clients数组，用于保存聊天室中所有连接。
当有新连接时，将连接保存到clients中。
当收到新消息时，遍历clients数组，发送消息到其他连接中。
当连接关闭时，从clients数组中移除该连接。
2.3 创建客户端
我们使用HTML、CSS、JavaScript创建客户端。
首先，我们创建一个登录页面 index.html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
<title>登录</title>
</head>
<body>
<div class="login-container">
<h1>Login</h1>
<input id="nameInput" placeholder="Name" autofocus />
<button onclick="login()">Join</button>
</div>
<script src="./client.js"></script>
</body>
</html>
然后，我们创建一个样式文件 style.css：
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-container {
width: 300px;
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin: 0 0 20px 0;
}
input {
margin: 0 0 10px 0;
padding: 10px;
border: none;
border-radius: 5px;
width: 100%;
font-size: 16px;
}
button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #0095ff;
color: #fff;
width: 100%;
font-size: 16px;
cursor: pointer;
}
最后，我们创建一个客户端文件 client.js：
let websocket = null;
let name = "";
function login() {
const nameInput = document.getElementById("nameInput");
//获取用户名
name = nameInput.value.trim();
if (name) {
//创建WebSocket连接
websocket = new WebSocket("ws://localhost:80");
//监听连接打开事件
websocket.onopen = (evt) => {
console.log("Connection open ...");
//发送欢迎消息
websocket.send(
JSON.stringify({
type: "welcome",
name,
})
);
};
//监听消息事件
websocket.onmessage = (evt) => {
const message = JSON.parse(evt.data);
switch (message.type) {
case "welcome":
return;
case "message":
addMessage(message);
return;
}
};
//监听连接关闭事件
websocket.onclose = (evt) => {
console.log("Connection closed.");
};
}
}
function addMessage(message) {
const chat = document.getElementById("chat");
const div = document.createElement("div");
const name = document.createElement("span");
const text = document.createElement("span");
name.innerText = message.name;
name.style.color = message.color;
text.innerText = message.text;
div.appendChild(name);
div.appendChild(text);
chat.appendChild(div);
}
function sendMessage() {
const input = document.getElementById("messageInput");
const message = {
type: "message",
name,
color: "#000",
text: input.value.trim(),
};
if (message.text) {
//发送消息
websocket.send(JSON.stringify(message));
//清空输入框
input.value = "";
}
}
代码解释：
创建websocket和name变量，用于保存WebSocket连接和用户名。
登录函数，当用户填写用户名后，创建和服务器的WebSocket连接，并发送一条欢迎消息。
添加消息函数，将接收到的消息添加到聊天室中。
发送消息函数，获取用户输入的消息，并向服务器发送一条消息。
2.4 测试
启动服务端：
node server.js
在浏览器中打开 index.html 文件，填写用户名并加入聊天室。我们可以向聊天室发送消息，并实时接收到其他用户发送的消息。
3. 总结
通过本文，我们了解了使用WebSocket构建实时聊天室的基本步骤。在开发实际项目中，我们可以根据业务需求对聊天室的功能进行扩展。