{
"scripts": {
"dev": "node ws.js",
"ncc": "ncc build ./ws.js -m -o ./dist/"
},
"dependencies": {
"@vercel/ncc": "^0.36.1",
"ws": "^8.13.0"
}
}
const http = require("http");
const fs = require("fs");
const { WebSocket, WebSocketServer } = require("ws");
var fun = function (request, response) {
var stream = fs.createReadStream("./ws.html", {
flag: "r",
encoding: "utf8",
});
stream.pipe(response);
};
var server = http.createServer(fun).listen(9091);
var wsServer = new WebSocketServer({ server: server });
wsServer.broadcast = (msg) => {
wsServer.clients.forEach((client) => {
if (client.readyState == WebSocket.OPEN) {
client.send("【廣播】" + msg);
console.log(666.789, wsServer.clients);
}
});
};
wsServer.on("connection", (ws, req) => {
console.log(666.1001, ws, req);
ws.on("message", (msg) => {
const msgObj = JSON.parse(msg.toString());
if (msgObj?.type) {
if (msgObj.type === "login") {
ws.userinfo = msgObj.userinfo;
}
if (msgObj?.data) {
const msgStr = ws.userinfo.username + "說：" + msgObj.data.msg;
console.log(666.10021, msgObj);
ws.send("服務(wù)器[私發(fā)]：" + msgStr);
wsServer.broadcast(msgStr);
}
}
});
ws.on("close", () => {
console.log(666.1005, "ws is closed!");
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Node.js+html5實現(xiàn)WebSocket服務(wù)示例</title>
</head>
<body>
<div id="show"></div>
<div>
<input id="message" type="text" style="width: 200px" />
<button type="button" id="send" onclick="sendMessage();">Send!</button>
<button type="button" id="send" onclick="exit();">exit</button>
</div>
<script>
var ws = new WebSocket("ws://localhost:9091");
ws.onopen = (e) => {
console.log("Connection to server opened" + ws.readyState);
document.getElementById("show").innerHTML =
"連接狀態(tài)：" + ws.readyState + "</br>";
ws.send(
JSON.stringify({
type: "login",
userinfo: { username: 'asai' + Date.now(), password: "123456" },
})
);
ws.onmessage = (evt) => {
console.log(666.10002, evt);
document.getElementById("show").innerHTML += evt.data + "</br>";
};
ws.onclose = (evt) => {
console.log("WebSocketClosed!");
console.log(evt);
};
};
function sendMessage() {
var msg = document.getElementById("message").value;
var msgObj = { type: "message", data: { msg: msg } };
ws.send(JSON.stringify(msgObj));
document.getElementById("message").value = "";
}
function exit() {
ws.close();
console.log("退出啦");
}
</script>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-672623.html
文章來源：http://www.zghlxwxcb.cn/news/detail-672623.html
到了這里，關(guān)于Node.js+html5實現(xiàn)WebSocket服務(wù)示例的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
