html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" />
<button onclick="sendMsg()">发消息</button>
<div class="shopCoupon"></div>
</body>
<script>
// 获取元素dom
let val = document.querySelector("input");
let shopCoupon = document.querySelector(".shopCoupon");
// 创建websocket实例
const socket = new WebSocket("ws://localhost:8080"); // 接口地址
// 事件执行方式
socket.onopen = (e) => {
console.log("WebSocket连接打开");
};
socket.onmessage = (e) => {
console.log("收到回复" + e.data);
shopCoupon.innerText = e.data;
};
socket.onclose = (e) => {
console.log("Websocket连接关闭");
};
// 点击按钮触发事件
function sendMsg() {
isOpen(socket);
if (isOpen(socket)) {
console.log("web socket is open");
} else {
console.log("web socket is closing, reconnecting");
}
socket.send(val.value);
}
function isOpen(ws) {
return ws.readyState === ws.OPEN;
}
</script>
</html>
server.js
下载nodejs-webscoket包
// 引入包
var ws = require("nodejs-websocket");
console.log("开始建立连接...");
var server = ws
.createServer((conn) => {
conn.on("text", (str) => {
console.log(str);
conn.sendText("服务器收到响应");
});
conn.on("close", () => {
console.log("关闭连接");
});
conn.on("error", () => {});
})
.listen(8080);