【问题标题】:how to handle page reload in socket.io client chat applications如何在 socket.io 客户端聊天应用程序中处理页面重新加载
【发布时间】:2023-03-24 00:32:01
【问题描述】:

我正在实现一个聊天应用程序。我不在服务器中,包含 javascript 文件的页面可以是文件系统上的任何 html 页面,其中嵌入了 javascript/socket.io。

现在的问题是根据定义,页面重新加载总是会触发一个新的请求,从而产生新的套接字。

$(document).ready(function() {

var messages = [];
socket = io.connect(connectionString);
///next code sequence
});

我想要实现的是即使在页面重新加载后我的会话也应该持续存在。 现在经典的实现方式是。

1) 我可以保留一个经典的实现。防火断开;一旦完成,我实际上可以保留以前的 sessionid,并且可以从数据库中重新获取以前的会话/聊天并继续。

但上述方法非常笨拙且耗时。

还有什么更好的办法吗????

【问题讨论】:

    标签: node.js socket.io


    【解决方案1】:

    webSockets 将在页面重新加载或用户导航的任何时候断开连接并重新连接。正如您所知道的,它们就是这样工作的。

    如果您想要用户的持久会话,那么您可以简单地执行与任何网页相同的操作来使用 cookie 来识别会话或用户。如果您的网站有用户登录,当用户连接时,您会从他们的登录 cookie 中获取该用户的身份,并将其用作任何 webSocket 连接的持久用户标识符。由于任何 webSocket 连接都以 http 请求开始,因此该 cookie 将始终存在。

    如果/当用户重新加载或导航到网站上的另一个页面时,webSocket 将断开连接,当它重新连接时,用户登录 cookie 将再次出现。


    如果您还没有用户登录 cookie,那么您可以在用户第一次连接时检测到没有用户识别 cookie,您可以设置这样的 cookie,以便将来重新连接。然后,此 cookie 中的标识符将成为您数据库的键,因此您可以将浏览器与给定用户的数据相关联。

    如果您的服务器需要知道用户何时真正离开,那么您可以实现某种服务器端超时,并且当用户保持断开连接一段时间(例如几分钟)时,就很清楚了用户不只是暂时在页面之间导航,您现在可以将它们标记为已注销。但是,在正常的重新加载或页面导航中,用户总是会在断开连接后的几秒钟内重新连接,因此您的服务器不会将他们注销。


    如果您有真正仅在客户端的数据,您还可以将其存储在浏览器的本地存储中,以提高从一个页面到另一个页面的效率(因此可以存储数据然后在本地读取而不是获取它来自服务器),但这使得数据只能在该特定计算机上的特定浏览器中可用,如果数据与用户登录相关联并且您希望该数据可供该用户使用,无论使用哪种浏览器或他们登录的计算机。

    【讨论】:

    • 服务器断开连接时间增加的唯一问题 - 方法是重新加载的套接字被更改。
    • @ManMohanVyas - 是的,重新加载会导致连接新的套接字。这是你无法避免的。
    • 我在维护基于套接字的会话,因为在断开连接时我得到的只是套接字。我需要回答的最后一件事是,如果我经常使用 setInterval() 函数是否会使用更多资源,我的聊天应用程序将有大约 10k 并发用户??
    • @ManMohanVyas - 这取决于您呼叫setInterval() 的频率以及每次呼叫时您在做什么。使用不当,可能会占用大量服务器资源。偶尔使用,甚至不会被注意到。您应该通过不仅仅是他们的套接字(例如,当他们连接时可以看到的 cookie)来识别您的用户,然后将该标识符作为自定义属性放在套接字对象上。
    • 这正是我采用的方法。在我的例子中,我将读取 cookie 的逻辑放在连接侦听器中,当新客户端连接到套接字时,它会被调用。然后,如果 cookie 存在,我只需从我的数据库中加载以前的状态,并且在连接的生命周期内只完成一次。如果客户端再次断开连接,我会再次这样做。至于知道客户端何时刷新,我的想法是在您的 cookie 中设置一个计数器变量,该变量在每次页面刷新时递增。服务器读取此 cookie 并知道客户端是否刷新。
    【解决方案2】:

    您可以使用以下模块在客户端存储一个值:https://github.com/grevory/angular-local-storage

    它将使用 HTML5 本地存储并回退到 cookie。

    【讨论】:

    • 我没有使用 Angular js
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-12
    • 2013-02-24
    相关资源
    最近更新 更多