尝试在页面之间保持 socket.io 连接相同。是否有一个框架可以让我这样做？

Question

我正在创建一个使用 Socket.io 连接进行实时更新的 Express 应用程序。即使用户切换页面，我也想保持 Socket.io 连接。看到这似乎不可能，我想知道是否有一些框架允许您拥有一个 .html 页面并基于该模板生成页面（就像 Angular 那样它）。 Express 是否存在这样的框架？我查看了 Vue，但不确定它是否有效。

我目前正在向用户发送静态 html 文件。非常感谢任何对此问题的帮助。

提前致谢！

Answer 1

有一种方法可以访问请求中的 socket.io 实例。

首先创建套接字-io.js 文件：

const socketio = require('socket.io');
module.exports.io = (server) => {
   const io = socketio(server);
   io.on('connection', async function (socket, next) {
   });

   return io;
};

然后将其导入 app.js 文件：

const { createServer } = require('http');

const socketio = require('./services/socket_io').io;
const server = createServer(app);

const io = socketio(server);
app.use((req, res, next) => {
   // instance socketio to req object
   req.socket = io;
   next();
});

通过此配置，您可以在每个请求中使用套接字 io 实例。

req.socket.emit("my_event", event)

Answer 2

我不会详细介绍 html 和 css 文件，因为没有必要。主页或父页面 (index.html) 只需要这个 javascript 文件来建立 socket.io-客户端连接。

var io = io();

function get_socket() {
    console.log("Return socket connection to iframe page");
    return io;
}

// handles server telling client to change page url in iframe
io.on("page", (page) => {
    $("#iframepage").attr("src", page);
    console.log("Page change: " + page);
});

在 html 文件中，我包含 jQuery 和 socket.io-client。

当 iframe 加载 javascript 文件时，它们可以为套接字连接调用父页面，就像：

var socket = parent.get_socket();

当 iframe 更改时，所有 .on 命令都会刷新。这对于单页应用程序和在 tab/browser 或应用程序关闭时登录非常有用，即使服务器可以捕获断开连接事件。

Answer 3

我从未尝试过这个，但您可以从 Service Worker 建立 WebSocket 连接，然后让打开的页面与工作人员通信。

粗略看来，过去的浏览器似乎不支持 worker 中的 WebSockets，但这在几年前就已修复。如果没有打开的页面，您可以指望浏览器最终会杀死您的工作人员（并因此终止套接字连接），看起来有些浏览器可能会这样做，即使仍然有页面打开，所以您可能需要试验看看这种方法是否对你来说足够可靠。

尝试在页面之间保持 socket.io 连接相同。是否有一个框架可以让我这样做？

Trying to keep socket.io connection same between pages. Is there a framework that would allow me to do this?

node.js

express

socket.io

single-page-application