Socket.io客户端刷新页面后无法从服务器接收数据答案

【问题标题】：Socket.io client can't receive data from the server after refreshing the pageSocket.io客户端刷新页面后无法从服务器接收数据
【发布时间】：2014-08-05 16:28:49
【问题描述】：

我正在尝试将 socket.io 1.0 添加到我的 angularjs Web 应用程序中。我在 angularjs 中有两个视图，套接字侦听器在第一个视图中定义。在第一个视图中，无论是否刷新页面，他们始终可以从套接字服务器接收消息。

但是当我转到第二个视图时，客户端只能收到第一次的消息。如果我刷新第二个视图，使用 ctrl + C 关闭服务器并重新启动它，客户端将无法接收和打印数据。它确实重新连接到套接字服务器，并且服务器确实发送了消息。我通过打印连接信息来确认它，它表明在发送消息之前“已连接”是真的。我也尝试过类似“强制新连接”：true，但它不起作用。

这是我的代码：

服务器端：

var express = require('express');
var app = module.exports = express();
var server = require('http').createServer(app);
// Hook Socket.io into Express
var io = require('socket.io').listen(server);
// Socket.io Communication
var socket = require('./scripts/socket.js');
// io.sockets.on('connection', socket);
//The code below are added for testing socket.io of prodApp
var job = "{\"id\": 554120,\"name\": \"vidhyachrometest\", \"facility_id\": 2,\"location\": [], \"staff\": [],\"log\": []}";
var dataJob = JSON.parse(job);

io.sockets.on('connection', function(socket){
    console.log('connection', socket);
    socket.emit('job:received', dataJob);   
    console.log('Message sent');
});

server.listen(3000, function() {
  console.log("Express server listening on port %d in %s mode", this.address().port, app.settings.env);
});

客户端：服务.js

angular.module('starter.services', ['LocalStorageModule'])
.factory('socket', function($rootScope){
    /* Locate socket IO server via the ip and port*/
    var socket = io.connect("http://127.0.0.1:3000");
    socket.on('connect', function(){alert("Connect")});
    socket.on('reconnect', function(){alert("Reconnect")});
    socket.on('reconnecting', function(){alert("Reconnecting")});
    return {
        on: function(eventName, callback) {
            socket.on(eventName, function() {
                var args = arguments;
                $rootScope.$apply(function() {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function(eventName, data, callback) {
            socket.emit(eventName, data, function() {
                var args = arguments;
                $rootScope.$apply(function() {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            });
        }
    };
})

Controller.js

var url = 'data/jobs.json';
//Socket.io listeners
//Assume the data is a json object of a new job to a specific facility
socket.on('job:received', function(data){
    alert(data);
    httpCache.add(url, data);
    // alert("after: " + JSON.parse(cachedJobs[1]).length);     
    if($scope.user.role_id == localStorageService.get('Manager')){
        Helpers.incrementPendingnum();
        $rootScope.pendingnum = localStorageService.get('pendingnum');
        data.pending = "Pending";
        $rootScope.jobs.push(data);
        localStorageService.set("joblist", $rootScope.jobs);
    }
});

如果需要，这是连接信息：

connection { nsp:
   { name: '/',
     server:
      { nsps: [Object],
        _path: '/socket.io',
        _serveClient: true,
        _adapter: [Function: Adapter],
        _origins: '*:*',
        sockets: [Circular],
        eio: [Object],
        engine: [Object] },
     sockets: [ [Circular] ],
     connected: { GLhGYMCy2FAXCYUXAAAA: [Circular] },
     fns: [],
     ids: 0,
     acks: {},
     adapter: { nsp: [Circular], rooms: [Object], sids: [Object], encoder: {} },

     _events: { connection: [Function] } },
  server:
   { nsps: { '/': [Object] },
     _path: '/socket.io',
     _serveClient: true,
     _adapter: [Function: Adapter],
     _origins: '*:*',
     sockets:
      { name: '/',
        server: [Circular],
        sockets: [Object],
        connected: [Object],
        fns: [],
        ids: 0,
        acks: {},
        adapter: [Object],
        _events: [Object] },
     eio:
      { clients: [Object],
        clientsCount: 1,
        pingTimeout: 60000,
        pingInterval: 25000,
        upgradeTimeout: 10000,
        maxHttpBufferSize: 100000000,
        transports: [Object],
        allowUpgrades: true,
        allowRequest: [Function],
        cookie: 'io',
        ws: [Object],
        _events: [Object] },
     engine:
      { clients: [Object],
        clientsCount: 1,
        pingTimeout: 60000,
        pingInterval: 25000,
        upgradeTimeout: 10000,
        maxHttpBufferSize: 100000000,
        transports: [Object],
        allowUpgrades: true,
        allowRequest: [Function],
        cookie: 'io',
        ws: [Object],
        _events: [Object] } },
  adapter:
   { nsp:
      { name: '/',
        server: [Object],
        sockets: [Object],
        connected: [Object],
        fns: [],
        ids: 0,
        acks: {},
        adapter: [Circular],
        _events: [Object] },
     rooms: { GLhGYMCy2FAXCYUXAAAA: [Object] },
     sids: { GLhGYMCy2FAXCYUXAAAA: [Object] },
     encoder: {} },
  id: 'GLhGYMCy2FAXCYUXAAAA',
  client:
   { server:
      { nsps: [Object],
        _path: '/socket.io',
        _serveClient: true,
        _adapter: [Function: Adapter],
        _origins: '*:*',
        sockets: [Object],
        eio: [Object],
        engine: [Object] },
     conn:
      { id: 'GLhGYMCy2FAXCYUXAAAA',
        server: [Object],
        upgraded: false,
        readyState: 'open',
        writeBuffer: [Object],
        packetsFn: [Object],
        sentCallbackFn: [],
        request: [Object],
        checkIntervalTimer: null,
        upgradeTimeoutTimer: null,
        pingTimeoutTimer: [Object],
        transport: [Object],
        _events: [Object] },
     encoder: {},
     decoder: { reconstructor: null, _callbacks: [Object] },
     id: 'GLhGYMCy2FAXCYUXAAAA',
     request:
      { _readableState: [Object],
        readable: false,
        domain: null,
        _events: {},
        _maxListeners: 10,
        socket: [Object],
        connection: [Object],
        httpVersion: '1.1',
        complete: false,
        headers: [Object],
        trailers: {},
        _pendings: [],
        _pendingIndex: 0,
        url: '/socket.io/?EIO=2&transport=polling&t=1407255549764-3',
        method: 'GET',
        statusCode: null,
        client: [Object],
        _consuming: true,
        _dumped: true,
        httpVersionMajor: 1,
        httpVersionMinor: 1,
        upgrade: false,
        _query: [Object],
        res: [Object],
        cleanup: [Function: cleanup],
        read: [Function] },
     onclose: [Function],
     ondata: [Function],
     ondecoded: [Function],
     sockets: [ [Circular] ],
     nsps: { '/': [Circular] } },
  conn:
   { id: 'GLhGYMCy2FAXCYUXAAAA',
     server:
      { clients: [Object],
        clientsCount: 1,
        pingTimeout: 60000,
        pingInterval: 25000,
        upgradeTimeout: 10000,
        maxHttpBufferSize: 100000000,
        transports: [Object],
        allowUpgrades: true,
        allowRequest: [Function],
        cookie: 'io',
        ws: [Object],
        _events: [Object] },
     upgraded: false,
     readyState: 'open',
     writeBuffer: [ [Object] ],
     packetsFn: [ undefined ],
     sentCallbackFn: [],
     request:
      { _readableState: [Object],
        readable: false,
        domain: null,
        _events: {},
        _maxListeners: 10,
        socket: [Object],
        connection: [Object],
        httpVersion: '1.1',
        complete: false,
        headers: [Object],
        trailers: {},
        _pendings: [],
        _pendingIndex: 0,
        url: '/socket.io/?EIO=2&transport=polling&t=1407255549764-3',
        method: 'GET',
        statusCode: null,
        client: [Object],
        _consuming: true,
        _dumped: true,
        httpVersionMajor: 1,
        httpVersionMinor: 1,
        upgrade: false,
        _query: [Object],
        res: [Object],
        cleanup: [Function: cleanup],
        read: [Function] },
     checkIntervalTimer: null,
     upgradeTimeoutTimer: null,
     pingTimeoutTimer:
      { _idleTimeout: 85000,
        _idlePrev: [Object],
        _idleNext: [Object],
        _idleStart: 1407255550303,
        _onTimeout: [Function],
        _repeat: false },
     transport:
      { readyState: 'opening',
        maxHttpBufferSize: 100000000,
        supportsBinary: true,
        _events: [Object],
        sid: 'GLhGYMCy2FAXCYUXAAAA',
        req: null,
        res: null,
        writable: false },
     _events: { close: [Object], data: [Function] } },
  rooms: [],
  acks: {},
  connected: true,
  disconnected: false,
  handshake:
   { headers:
      { host: '127.0.0.1:3000',
        connection: 'keep-alive',
        'user-agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (K
HTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36',
        origin: 'http://localhost:8100',
        accept: '*/*',
        referer: 'http://localhost:8100/',
        'accept-encoding': 'gzip,deflate,sdch',
        'accept-language': 'en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4',
        cookie: 'io=caTBp-s8ImeeiAQwAAAE' },
     time: 'Tue Aug 05 2014 09:19:10 GMT-0700 (US Mountain Standard Time)',
     address: { address: '127.0.0.1', family: 'IPv4', port: 3000 },
     xdomain: true,
     secure: false,
     issued: 1407255550308,
     url: '/socket.io/?EIO=2&transport=polling&t=1407255549764-3',
     query: { EIO: '2', transport: 'polling', t: '1407255549764-3' } } }

真的希望有人可以帮助我。

【问题讨论】：

标签： angularjs socket.io

【解决方案1】：

最后我弄清楚了为什么刷新后套接字侦听器不起作用。 angularJS是单页应用，刷新后只会加载特定视图对应控制器中定义的函数。所以刷新第二个视图后，它无法加载第一个视图中定义的监听器。这就是为什么客户端和服务器可以重新连接，但侦听器收不到消息的原因。

我对这个问题的解决方案是将所有套接字侦听器移动到一个新的控制器socketCtrl，并将其绑定到body标签，而不是特定的视图。

如果在每个视图中添加一组监听器，在刷新第二个视图之前，它会收到两次消息，因为实际上有两个监听器，一个在第一个视图中，一个在第二个视图中。所以这不是一个好的解决方案。

我还考虑在刷新第二个视图后才添加这些控制器。但是，似乎很难检测到刷新，并且将那个大块复制两次有点愚蠢。

【讨论】：