Node.js+html5实现WebSocket服务示例-Toy模板网

这篇具有很好参考价值的文章主要介绍了Node.js+html5实现WebSocket服务示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

{
  "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("服务器[私发]：" + 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实现WebSocket服务示例</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 =
          "连接状态：" + 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>