公众号:全干开发 专注分享简洁但高质量的动图技术文章!
简介
最近公司...算了,不想编故事。本教程将使用WebSocke极速实现一个在线聊天室!
项目搭建
实现一个在线聊天室,必须有一个服务端 node和客户端 html,他们首先要具备相互连接功能!
连接功能
服务端代码实现
首先,创建文件目录,如websocket,然后初始化仓库,并安装websocket依赖
npm init - y
npm i ws
依赖安装完毕后,我们在项目根目录创建一个server.js文件,写入服务端逻辑
js
const WebSocket = require("ws")
const wss = new WebSocket.Server({port:3000})
console.log("服务运行在localhost:30000");
wss.on("connection",ws =>{
console.log("[服务器]:客官您来了~里边请");
ws.on("close",()=>{
console.log("[服务器]:客官下次再来呢~");
})
})
上述代码使用Node.js的"ws"库创建了一个WebSocket服务器。变量wss用于表示这个WebSocket服务器,每当有新的连接时,wss.on("connection",ws => {...})就会被调用;当连接关闭时,ws.on("close",() => {...})就会被调用。
现在,我们运行这个后端服务(控制台输入node sever.js)
前端代码实现
服务端代码实现后,我们必须写点前端代码,才能实现websocket信息交互。项目的根目录创建index.html,写入逻辑:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<script>
// 创建WebSocket对象,并尝试连接到ws://localhost:3000
const ws = new WebSocket("ws://localhost:3000")
// WebSocket连接成功建立时,就会触发"open"事件。
ws.addEventListener("open",()=>{
console.log("连接服务器去喽~");
})
</script>
</body>
</html>
现在,我们使用VScode Opne with live sever运行这个index.heml。此时,ws连接就成功了,服务端代码就会打印消息。
我们关闭网页的时候,服务端也会做出响应
信息交互
现在,我们要实现客户端与服务端的数据交互。首先,我们需要写一个input输入框和一个数据提交按钮。点击提交时,我们通过ws对象的send方法向服务端发送数据。然后通过监听服务端的message事件处理响应的数据。
html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<script>
// 创建WebSocket对象,并尝试连接到ws://localhost:3000
const ws = new WebSocket("ws://localhost:3000");
let messageHtml = "";
// WebSocket连接成功建立时,就会触发"open"事件。
ws.addEventListener("open", () => {
console.log("连接服务器去喽~");
});
// 监听服务端响应
ws.addEventListener("message", ({ data }) => {
messageHtml += `<p style="margin-left:80px">${data} [服务端]</p>`;
let dom = document.getElementById("messageList");
// 将服务器返回的数据渲染在页面
dom.innerHTML = messageHtml;
});
function sendMessage() {
let message = document.getElementById("myInput");
// 发送数据给服务器
ws.send("[客户端]:" + message.value);
// 将客户端的数据渲染在页面
messageHtml += "[客户端]:" + message.value;
// 清空input的内容,方便下一次输入
message.value = "";
}
</script>
<div>
<input type="text" id="myInput" />
<button onclick="sendMessage()">发送</button>
<div id="messageList"></div>
</div>
</body>
</html>
最后,我们还需要在服务端server.js接收数据,并根据数据内容做出一些不同的响应
html
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 3000 });
console.log("服务运行在localhost:30000");
wss.on("connection", (ws) => {
console.log("[服务器]:客官您来了~里边请");
// 接收客户端的数据,并做出回应
ws.on("message", (data) => {
// 客户端发送来的数据
let message = String(data);
// 根据关键词做出响应
if (message.includes("1")) {
ws.send("您好,我是AI机器人");
} else if (message.includes("2")) {
ws.send("我不明白您的意思");
} else {
ws.send("??");
}
});
ws.on("close", () => {
console.log("[服务器]:客官下次再来呢~");
});
});
最后,我们重启服务端代码,刷新页面就可以了!
至此,我们的线上聊天室(人工智障)就完成了!**