【发布时间】：2014-02-13 18:47:41
【问题描述】：
我正在使用 Node 的 Socket.io 将数据从服务器推送到客户端浏览器。
在客户端，我使用 jQuery 在 DOM 中填充返回的行。
在我用来填充 Socket.io 返回的数据的代码 sn-p 下方。
var OverSpeedAlerts = [];
var TripCancellation = [];
var GeofenceInOutAlerts = [];
var ScheduleOverstay = [];
var UnSchduledOverstay = [];
var SkippedBusStop = [];
var TripDelayAlert = [];
var SkippedUnplannedAlert = [];
var DelayStartEndAlert = [];
var RouteDeviatedAlert = [];
var MultipleBusEntry = [];
声明原型：
Array.prototype.inArray = function (comparer) {
for (var i = 0; i < this.length; i++) {
if (comparer(this[i])) return true;
}
return false;
};
// adds an element to the array if it does not already exist using a comparer
// function
Array.prototype.pushIfNotExist = function (element, comparer) {
if (!this.inArray(comparer)) {
this.unshift(element);
}
};
处理从socket接收到的数据：
if (typeof io !== 'undefined') {
var pushServer = io.connect('http://SomeIP:3000');
pushServer.on('entrance', function (data) {
var rows = data.message;
var NumberOfRows = rows.length;
$('#notifications').html(NumberOfRows);
// console.log(rows);
OverSpeedAlerts = [];
TripCancellation = [];
GeofenceInOutAlerts = [];
ScheduleOverstay = [];
UnSchduledOverstay = [];
SkippedBusStop = [];
TripDelayAlert = [];
SkippedUnplannedAlert = [];
DelayStartEndAlert = [];
RouteDeviatedAlert = [];
var MultipleBusEntry = [];
for (var i = 0; i < rows.length; i++) {
if (rows[i].alert_type == 'overspeed') {
OverSpeedAlerts.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
else if (rows[i].alert_type == 'trip_cancellation') {
TripCancellation.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
else if (rows[i].alert_type == 'Geofence-In' || rows[i].alert_type === 'Geofence-Out') {
GeofenceInOutAlerts.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
else if (rows[i].alert_type == 'Scheduled-Overstay') {
ScheduleOverstay.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
else if (rows[i].alert_type == 'Unscheduled-Overstay') {
UnSchduledOverstay.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
else if (rows[i].alert_type == 'Skipped Unplanned' || rows[i].alert_type == 'Skipped-Busstop') {
SkippedBusStop.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
else if (rows[i].alert_type == 'Delay Start' || rows[i].alert_type == 'Delay End') {
TripDelayAlert.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
else if (rows[i].alert_type == 'Route Deviated') {
RouteDeviatedAlert.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
else if (rows[i].alert_type == 'Multiple Bus Entry') {
MultipleBusEntry.pushIfNotExist(rows[i], function (e) {
return e.device_id === rows[i].device_id && e.alert_gen_date_time === rows[i].alert_gen_date_time;
});
}
}
CreateOverSpeedGrid();
CreateTripCancellation();
CreateGeofenceGrid();
CreateScheduleOverstayGrid();
CreateUnSchduledOverstayGrid();
CreateTripDelayGrid();
CreateSkippedBusStop();
CreateRouteDeviationAlert();
CreateMultipleBusEntry();
});
pushServer.on('end', function (socket) {
});
}
上述功能之一如下。 Rest 是在 DOM 的其他部分填充数据的类似函数。
function CreateOverSpeedGrid() {
$('#tabs ul').find('a:contains("Overspeed Alerts")').html('OverSpeed Alerts(' + OverSpeedAlerts.length + ')');
if (OverSpeedAlerts.length != 0) {
$('#notifyOverspeed table').html('');
$('#notifyOverspeed table').append('<tr class="ui-widget-header"> <th> Depot </th> <th> Route </th> <th> Schedule </th> <th> Trip Number </th><th>Trip Direction</th> <th> Alert Summary</th> <th> Alert Details </th> <th> Generated On </th> </tr>'); //new Date([UNIX Timestamp] * 1000);
for (var i = 0; i < OverSpeedAlerts.length; i++) {
$('#notifyOverspeed table').append('<tr> <td>' + OverSpeedAlerts[i].depot_name + '</td> <td>' + OverSpeedAlerts[i].route_name + '</td> <td>' + OverSpeedAlerts[i].schedule_no + '</td> <td>' + OverSpeedAlerts[i].trip_number + ' </td> <td>' + OverSpeedAlerts[i].trip_direction + '</td><td> ' + OverSpeedAlerts[i].alert_sub + ' </td> <td title="' + ConvertToValidTooltip(OverSpeedAlerts[i].alert_msg) + '" style="text-decoration:underline;cursor:pointer;"> ' + "Place mouse pointer to view message" + ' </td> <td>' + new Date(OverSpeedAlerts[i].alert_gen_date_time * 1000) + ' </td> </tr>');
}
}
}
上面的代码工作正常。但问题是，由于每 10 秒从套接字接收到如此多的推送消息，浏览器无法处理如此多的数据并挂起。
有没有更好的办法？？
【问题讨论】：
-
你为什么不过滤你发送的数据，这样你就不会收到这么多？
-
Array.prototype.inArray = function (item) { return this.indexOf(item) !== -1; };
标签： javascript jquery node.js dom socket.io