websockets，使用来自服务器的消息更新 div

Question

websocket.onmessage = function (evt) { 
    console.log('Retrieved data from server: ' + evt.data); 
    $('#someDiv').append(evt.data);
};

如果我在浏览器中打开 2 个选项卡，为什么此事件仅在我发送消息的活动选项卡中触发？由于数据是从服务器接收的，这不应该同时在两个选项卡中触发吗？

var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.writeHead(404);
    response.end();
});
server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});

wsServer = new WebSocketServer({
    httpServer: server,
    // You should not use autoAcceptConnections for production
    // applications, as it defeats all standard cross-origin protection
    // facilities built into the protocol and the browser.  You should
    // *always* verify the connection's origin and decide whether or not
    // to accept it.
    autoAcceptConnections: false
});

function originIsAllowed(origin) {
  // put logic here to detect whether the specified origin is allowed.
  return true;
}

wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {
      // Make sure we only accept requests from an allowed origin
      request.reject();
      console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
      return;
    }

    var connection = request.accept('echo-protocol', request.origin);
    console.log((new Date()) + ' Connection accepted.');
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === 'binary') {
            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
    });
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
    });
});

谢谢

Answer 1

每个选项卡/窗口都使用自己的标识符打开自己的 websocket，您的服务器应该向当前用户打开的所有 websocket 发送消息。

在您仅将消息发送到第一个连接的 websocket 的情况下，您可以使用 window.localStorage 作为消息缓冲区在同一域上的选项卡/窗口之间共享数据。 store.js 可以帮助您将对象放入 localStorage 并检索它们，并确保跨浏览器兼容性）。然后为函数调用设置一个间隔，它会定期查找新消息。