node+socket.io 实现 req.headers.referer 为空时，发生令牌

前端技术中，Node.js 和 Socket.IO 是非常常见的技术。在实际开发中，我们经常需要使用请求头中的 referer 域，但是当 referer 为空时，我们该如何处理呢？本文将介绍 Node.js 和 Socket.IO 如何实现 req.headers.referer 为空时，发生令牌。

实现思路

我们可以在服务端建立一个 WebSocket 连接，当请求头中的 referer 为空时，向客户端发送一个 token，客户端需要将该 token 保存下来，直到下一次请求带上 referer 的时候再将 token 发送给服务端。这样，服务端就能知道客户端之前是否已经访问过了。

实现步骤

服务端

首先，在服务端中安装并引入 socket.io 模块。

npm install socket.io --save

const io = require("socket.io")(httpServer);

然后，监听连接事件。当客户端连接上的时候，判断请求头中的 referer 是否为空，如果为空，就向客户端发送一个 token。

io.on("connection", (socket) => {
  console.log("a user connected");
  if (!socket.request.headers.referer) {
    const token = Math.random().toString(36).slice(-8);
    socket.emit("token", token);
  }
});

最后，监听客户端的回传事件，当客户端回传了 referer 时，就将该连接的 token 记录到一个 Map 对象中。

// www.javascriptcn.com code example
const clients = new Map();

io.on("connection", (socket) => {
  console.log("a user connected");
  if (!socket.request.headers.referer) {
    const token = Math.random().toString(36).slice(-8);
    socket.emit("token", token);
    socket.on("referer", (referer) => {
      clients.set(token, referer);
    });
  }
});

客户端

在客户端中，首先需要连接到服务端的 WebSocket。

const socket = io("http://localhost:3000");

然后，监听服务端发送的 token，如果接收到了 token，就将它保存下来，并且等待用户访问一个有 referer 的页面时，将该 token 和 referer 一起发送给服务端。

// www.javascriptcn.com code example
socket.on("token", (token) => {
  sessionStorage.setItem("token", token);
});

window.onload = function () {
  const referer = document.referrer;
  const token = sessionStorage.getItem("token");
  if (referer && token) {
    socket.emit("referer", {
      token,
      referer,
    });
  }
};

示例代码

服务端：

// www.javascriptcn.com code example
const http = require("http");
const fs = require("fs");
const socketIo = require("socket.io");

const httpServer = http.createServer((req, res) => {
  const url = req.url;
  if (url === "/") {
    res.writeHead(200, {
      "Content-Type": "text/html",
    });
    const html = fs.readFileSync("./index.html");
    res.end(html);
  }
});

const io = socketIo(httpServer);

io.on("connection", (socket) => {
  console.log("a user connected");
  if (!socket.request.headers.referer) {
    const token = Math.random().toString(36).slice(-8);
    socket.emit("token", token);
    socket.on("referer", (referer) => {
      clients.set(token, referer);
    });
  }
});

httpServer.listen(3000, () => {
  console.log("Server is running at http://localhost:3000");
});

客户端：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <script>
      const socket = io("http://localhost:3000");
      socket.on("token", (token) => {
        sessionStorage.setItem("token", token);
      });

      window.onload = function () {
        const referer = document.referrer;
        const token = sessionStorage.getItem("token");
        if (referer && token) {
          socket.emit("referer", {
            token,
            referer,
          });
        }
      };
    </script>
  </body>
</html>

学习收获

通过本文的学习，我们了解了 Node.js 和 Socket.IO 如何实现 req.headers.referer 为空时，发生令牌。我们学习了服务端和客户端的实现步骤，并使用了示例代码进行了演示。

这种技术实现有助于我们在实际开发中，更好的应对 referer 为空的情况，保证网站的稳定性和安全性。同时，让我们了解了 Socket.IO 这一常用技术在实际应用中的使用，增加了我们的技术实践经验。

总之，本文为我们学习 Node.js 和 Socket.IO 带来了深度和指导意义，希望读者能够从中受益，提高自己的技术水平。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6797408e504e4ea9bde510b1