Javascript Socket.io,阻止不同页面接收每条消息?

Javascript Socket.io,阻止不同页面接收每条消息?,javascript,node.js,socket.io,Javascript,Node.js,Socket.io,很抱歉,这个标题让人困惑,但我不知道如何解释我的问题,请有人为我相应地编辑它。所以我有一个从节点服务器接收消息的网站页面 socket.on('item finished', function(data){ $('#item'+data).html('finished'); }); 所以基本上我是告诉客户,一旦一个项目完成,它必须告诉用户。 我把我所有的js代码放在script.js中,并在页面中调用它,所以我的所有页面中都有脚本。每当我在其他页面上,服务器向客户端发送“item fi

很抱歉,这个标题让人困惑,但我不知道如何解释我的问题,请有人为我相应地编辑它。所以我有一个从节点服务器接收消息的网站页面

socket.on('item finished', function(data){
    $('#item'+data).html('finished');
});
所以基本上我是告诉客户,一旦一个项目完成,它必须告诉用户。 我把我所有的js代码放在script.js中,并在页面中调用它,所以我的所有页面中都有脚本。每当我在其他页面上,服务器向客户端发送“item finished”时,控制台上就会弹出一条消息

未捕获类型错误:无法读取null的属性“html”

这个错误不是很像那样,但你明白了,客户正在尝试做它应该做的事情,但我不希望发生这种情况。 那么,有没有一种方法可以避免在不同页面中使用相同的脚本文件时出现控制台错误呢?我错过了什么?
谢谢大家!

对于不适用于给定页面的消息,您有多种选择

  • 项finished
    消息侦听代码分离到一个单独的脚本中,以便只加载该脚本,并且侦听器仅在您希望实际响应该消息的页面中处于活动状态

  • 保持您在所有页面中收听该消息的方式,但在该消息的处理程序中,请检查您所处的页面类型,以决定是否应忽略该消息或对其进行处理,从而避免在页面类型错误时尝试对其进行处理

  • 防弹执行操作的代码,以便在尝试对其进行操作之前检查所需元素是否存在。可能看起来像这样:

  • 代码:


    为什么要在所有页面中包含一个脚本文件来处理特定于页面的功能?这是一个糟糕的设计决策。创建一个单独的脚本文件,只把你的套接字代码放在那里,并且只在相关页面中包含它。但是我的其他页面也将链接到服务器。他们也将接收具有不同功能的信息。你有什么建议?
    socket.on(..//do stuff..)
    是来自服务器的事件的某种事件侦听器。如果您创建一个新的
    文件,其中只包含与页面相关的
    套接字.on(..//do stuff..)
    事件,那么不包含此文件的页面将不会侦听此事件,因此不会出现任何错误。因此,我必须使用新的io.connect()命令创建另一个脚本文件?这不会给服务器带来任何故障或冲突吗?@MarcielFonseca-是的,需要从服务器获取事件的每个页面都会打开到服务器的socket.io连接。是的,就是这样做的。我想我也想向他建议一下,但我不喜欢在不需要的页面上看到不必要的代码——不过,我想,你的第一点涵盖了这一点。@NicholasKyriakides-这是一种折衷。在一个单独的页面上有数百个单独的脚本文件,而其中的2/3可以组合成一个脚本文件,只检测页面的类型并相应地进行操作,这也是一种痛苦。我们必须取得适当的平衡。没有一个“纯粹”的答案在所有情况下都是最好的。这是一种折衷,谢谢。socket.io是否设计用于处理每个站点页面上的io.connect命令?我的意思是,我可以为每个页面编写单独的脚本,每个脚本都会连接到服务器,不会带来任何问题,对吗?如果是,那么我有我的答案@MarcielFonseca-是的,socket.io希望断开连接,然后在每次导航到使用socket.io进行推送通知的站点内的新页面时重新连接。100%同意。但我会非常小心您的第三点,因为页面可能具有相同名称的/id'd元素。如果与任何其他点结合使用,则是,否则看起来有点危险。
    // You aren't supposed to have to do this in jQuery, so I'm guessing that
    // you aren't actually showing us the right code or error message
    // But, this is the general idea of defensive coding
    socket.on('item finished', function(data){
        var target = $('#item'+data);
        if (target.length) {
            target.html('finished');
        }
    });