我正在尝试将socket.io 1.0添加到我的angularjs web应用程序中。我在angularjs中有两个视图，套接字侦听器在第一个视图中定义。在第一个视图中，无论是否刷新页面，它们始终可以从套接字服务器接收消息。
但是当我转到第二个视图时，客户端只能第一次收到该消息。如果我刷新第二个视图，使用ctrl + C关闭服务器并重新启动它，客户端无法接收＆amp;打印数据。它确实重新连接到套接字服务器，服务器确实发送了消息。我通过打印连接信息确认了它，并显示＆＃34;已连接＆＃34;在发送消息之前是真的。我也尝试了类似强制新连接的事情：真实，但它没有用。
以下是我的代码：
服务器端：
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);
});
客户端： Service.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' } } }
真的希望有人可以帮助我。
答案 0 :(得分：0)
最后，我弄清楚为什么套接字监听器在刷新后不起作用。 angularJS是单页面应用程序，而只有在刷新后才会加载特定视图的相应控制器中定义的函数。因此，在刷新第二个视图后，它无法加载第一个视图中定义的侦听器。这就是客户端和服务器重新连接但听众无法接收消息的原因。
我对此问题的解决方案是将所有套接字侦听器移动到新的控制器socketCtrl，并将其绑定到body标签，而不是特定视图。
如果在每个视图中添加一组侦听器，则在刷新第二个视图之前，它将接收每个消息两次，因为实际上有两个侦听器，一个在第一个视图中，一个在第二个视图中。所以这不是一个好的解决方案。
我还想过在刷新第二个视图后才添加这些控制器。然而，似乎很难检测到刷新，并且两次复制那个大块是一种愚蠢的行为。