Just a quick question around optimisation and DRY. I have my node server and everything works as it should, but I want to know how to clean up for future devs. I have a set of events being assigned like so:
var debug = true;
io.sockets.on('connection', function (socket) {
console.log('User connected!');
socket.on('event-one', function (data) {
if(debug) { console.log('Event 1!'); }
socket.broadcast.emit('event-one', data);
});
socket.on('event-two', function (data) {
if(debug) { console.log('Event 2!'); }
socket.broadcast.emit('event-two', data);
});
socket.on('event-three', function (data) {
if(debug) { console.log('Event 3!'); }
socket.broadcast.emit('event-three', data);
});
});
As you can see I'm repeating the socket.on() method. Is there a more efficient way of writing this? I tried a simple array with a for loop but the events stopped working.
Any input would be appreciated.
Thanks.
Not sure why your loop didn't work, this works just fine:
var debug = true;
var events = [ 'event-one', 'event-two', 'event-three' ];
io.sockets.on('connection', function (socket) {
events.forEach(function(ev) {
socket.on(ev, function(data) {
if (debug) {
console.log('got event:', ev);
}
socket.broadcast.emit(ev, data);
});
});
});
Related
I have the following command inside an AngularJS controller
window.onunload = function () {
connection.invoke("RemoveUser", playerName);
}
It's weired because I have a pure JS where this statement works well, so outsite an angularJS controller when I close the tab or the window, it fires and do its job, but when I put this inside a controller, it doesn't fire. Any ideas?
Full script bellow
angular.module("mathGameApp", []).controller("mathGameCtrl", function ($scope) {
// Current player name
$scope.playerName;
$scope.welcomeIsVisible = true;
$scope.gameAreaIsVisible = false;
$scope.countdownIsVisible = false;
// Create connection
const connection = new signalR.HubConnectionBuilder()
.withUrl("/MathGame")
.configureLogging(signalR.LogLevel.Information)
.build();
// Get math challenge
connection.on("GetChallenge", data => {
// Bind challenge
$scope.expression = data.expression + " = " + data.possibleResult;
$scope.$apply();
});
// Receive and bind score
connection.on("ReceiveScore", data => {
$scope.score = data;
$scope.$apply();
});
// Rise alert
connection.on("RiseAlert", data => {
alert(data);
})
// Get status that the player was added to game room
connection.on("AddedToGameRoom", data => {
$scope.welcomeIsVisible = false;
$scope.gameAreaIsVisible = true;
$scope.$apply();
})
connection.on("ChallengeFinished", data => {
$scope.counter = 5;
$scope.countdownIsVisible = true;
$scope.$apply();
let interval = setInterval(function () {
if ($scope.counter == 0) {
$scope.countdownIsVisible = false;
$scope.buttonIsDisabled = false;
$scope.$apply();
clearInterval(interval);
connection.invoke("RefreshChallenge");
}
$scope.counter--;
$scope.$apply();
}, 1000);
})
// rise answer Correct/Wrong
connection.on("RiseAnswer", data => {
$scope.buttonIsDisabled = true;
$scope.expression = data;
$scope.$apply();
console.log($scope.buttonsDisabled);
console.log($scope.expression);
})
// Request the user to be added to game room
$scope.enterGame = function (playerName) {
connection.invoke("EnterGame", playerName);
}
$scope.answerQuestion = function (playerName, answer) {
connection.invoke("AnswerQuestion", {
"playerName": playerName, "isCorrect": answer
});
}
// Open connection
connection.start().then(() => {
}).catch((err) => {
alert(err.toString())
});
window.onunload = function () {
connection.invoke("RemoveUser", playerName);
}
})
Controllers should use the $onDestroy Life-Cycle Hook to release external resources.
app.controller("mathGameCtrl", function ($scope) {
̶w̶i̶n̶d̶o̶w̶.̶o̶n̶u̶n̶l̶o̶a̶d̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶)̶ ̶{̶
this.$onDestroy = function () {
connection.invoke("RemoveUser", playerName);
}
})
For more information, see AngularJS $compile Service API Reference - Life-Cyle hooks.
Update
You can and should handle the 'unload' event through window.addEventListener(). It allows adding more than a single handler for an event. This is particularly useful for AJAX libraries, JavaScript modules, or any other kind of code that needs to work well with other libraries/extensions.
For more information, see
MDN Web API Reference - WindowEventHandlers.onunload
MDN Web API Reference - EventTarget.addEventListener()
So basically I'm trying to find a way to prevent using $rootscope ,$broadcast and $apply. Let me show you the code first:
app.controller('firstController', function ($scope, ServiceChatBuddy, socketListeners){
$scope.ChatBuddy = ServiceChatBuddy;
$scope.$on('user delete:updated', function (event, id) {
$scope.ChatBuddy.users[id]['marker'].setMap(null);
delete $scope.ChatBuddy.users[id];
});
$scope.$on('loadPosition:updated', function (event, data) {
$scope.$apply(function () {
$scope.ChatBuddy.users[data.id] = data.obj;
});
// and a bunch more like these
});
})
the socketListeners is a 3rd party libary (socket.io )which I implemented in a factory which will broadcast data when an event has occured
socketModule.factory('socketListeners', function ($rootScope, decorateFactory) {
var sockets = {};
var socket = io.connect('http://localhost:8000');
sockets.listen = function () {
socket.on('loadPosition', function (data) {
$rootScope.$broadcast('loadPosition:updated', data)
});
socket.on('client leave', function (id) {
$rootScope.$broadcast('user delete:updated', id);
});
// and a bunch more of these
});
As you can see the code exist alot of $rootscope $broadcasts and $apply;
So I'm struggling to find a way to do this more 'professional'. Any hints tricks best practices are absolutely welcome! cheers
Try this https://github.com/btford/angular-socket-io
socket.js (service)
angular.module('app')
.service('socket', function (socketFactory) {
var socket = io.connect('http://localhost:8000');
var mySocket = socketFactory({
ioSocket: socket
});
return mySocket;
});
firstController.js
app.controller('firstController', function ($scope, socket){
socket.forward('user delete:updated', $scope);
socket.forward('loadPosition:updated', $scope);
$scope.$on('user delete:updated', function (event, id) {
$scope.ChatBuddy.users[id]['marker'].setMap(null);
delete $scope.ChatBuddy.users[id];
});
$scope.$on('loadPosition:updated', function (event, data) {
$scope.$apply(function () {
$scope.ChatBuddy.users[data.id] = data.obj;
});
// and a bunch more like these
});
});
when scope is destroyed, listeners are destroyed too :)
I have SignalR working in my application:
app.run(['SignalRService', function (SignalRService) {}]);
SignalRService:
app.service("SignalRService", ['$rootScope', function ($rootScope) {
var masterdataChangerHub = $.connection.progressHub;
if (masterdataChangerHub != undefined) {
masterdataChangerHub.client.updateProgress = function (progress) {
$rootScope.$broadcast('progressChanged', progress);
}
masterdataChangerHub.client.completed = function (result) {
$rootScope.$broadcast('taskCompleted', result);
}
}
$.connection.hub.start();
}]);
As you can see I throw an event when a SignalR method gets invoked. This all works fine. However, on 1 directive, my data won't get updated. Here's the code:
app.directive('certificateDetails', ['CertificateService', 'TradeDaysService', 'DateFactory', function (CertificateService, TradeDaysService, DateFactory) {
return {
restrict: 'E',
templateUrl: '/Certificate/Details',
scope: {
certificateId: '=',
visible: '=',
certificate: '=',
certificateSaved: '&'
},
link: function (scope, element, attributes) {
scope.certificateFormVisible = false;
scope.showCancelDialog = false;
scope.splitCertificateFormVisible = false;
scope.partialPayoutFormVisible = false;
scope.$on("taskCompleted", function (evt, response) {
console.log(response);
CertificateService.getCertificateById(scope.certificate.Id).then(function (response) {
scope.certificate = response;
});
});
scope.$watch('visible', function (newVal) {
if (newVal === true) {
scope.showButtonBar = attributes.showButtonBar || true;
if (scope.certificateId) {
getCertificateById();
}
}
});
function getCertificateById() {
CertificateService.getCertificateById(scope.certificateId).then(function (response) {
scope.certificate = response;
});
};
}
}
}]);
The weird thing is, when I have my console open (I use Chrome) on the network tab, I can see that the directive makes a request to the right URL with the right parameters. Also, when the console is open, my data is updated in the view. However, and this is the strange part, when I close the console, nothing happens! It doesn't update the view..
I have also tried to put the code inside the taskCompleted event in a $timeout but that doesn't work either.
Could someone explain why this happens and how to solve this problem?
EDIT I
This is how the getCertificateById looks like in my CertificateService
this.getCertificateById = function (id) {
var promise = $http.post('/Certificate/GetById?id=' + id).then(function (response) {
return response.data;
});
return promise;
};
Handling SignalR events will execute out of the Angular context. You will need to $apply in order to force digest for these to work. I'd try to call $apply on $rootScope after the $broadcast:
var masterdataChangerHub = $.connection.progressHub;
if (masterdataChangerHub != undefined) {
masterdataChangerHub.client.updateProgress = function (progress) {
$rootScope.$broadcast('progressChanged', progress);
$rootScope.$apply();
}
masterdataChangerHub.client.completed = function (result) {
$rootScope.$broadcast('taskCompleted', result);
$rootScope.$apply();
}
}
If this works then the issue definitely a binding issue between SignalR and Angular. Depending on what browser plugins you have installed, having the console open could trigger a digest for you.
On the sample listeners for this project (that binds SignalR and Angular), you can see that a $rootScope.$apply() is needed after handling on the client side:
//client side methods
listeners:{
'lockEmployee': function (id) {
var employee = find(id);
employee.Locked = true;
$rootScope.$apply();
},
'unlockEmployee': function (id) {
var employee = find(id);
employee.Locked = false;
$rootScope.$apply();
}
}
So, I'd assume that you would need to do the same.
I'm still struggling to get a calendar to re-render when data changes using meteor blaze. I have put in place an observerChanges function that is firing happily when added, removed or changed are triggered, but I have NO idea how to actually make the calendar update its state.
The handler code is
Meteor.subscribe("reqEvents");
allReqsCursor = Requests.find();
var handle = allReqsCursor.observeChanges({
added: function (id, user) {
console.log("Request added");
},
removed: function () {
console.log("Request removed");
},
changed: function() {
console.log("Request changed");
// $('#calendar').fullCalendar().today();
}
});
And the render function itself is
Template.packLayout.rendered = function(){
$('#calendar').fullCalendar({
//dayClick:function( date, allDay, jsEvent, view ) {
// Requests.insert({title:'Request',start:date,end:date,color:'red',className:'todo'});
// Session.set('lastMod',new Date());
//},
eventClick:function(reqEvent,jsEvent,view){
Session.set('editingReqEvent',reqEvent.id);
Session.set('showEditEvent',true);
},
eventDrop:function(reqEvent){
Requests.update(reqEvent.id, {$set: {start:reqEvent.start,end:reqEvent.end}});
Session.set('lastMod',new Date());
},
events: function(start, end, callback) {
var events = [];
reqEvents = Requests.find();
reqEvents.forEach(function(evt){
event = {id:evt._id,title:evt.title,start:evt.start,end:evt.end,color:evt.color};
events.push(event);
})
callback(events);
},
editable:true,
weekMode: 'liquid',
});
};
How do I hook these together? I've tried a few things (as per the commented out code) but it either blows up or renders the calendar twice.
Is this even the best way? Should I put a deps.autorun in somewhere else?? If so where?
FullCalendar should be instantiated only once in Template.packLayout.rendered function.
I recommend to get reference of fullCalendar instance :
var calendar = null
Template.packLayout.rendered = function(){
// only once !
calendar = $('#calendar').fullCalendar({...});
}
Template.packLayout.helpers ({
data:function(){
allReqsCursor = Requests.find();
var handle = allReqsCursor.observeChanges({
added: function (id, user) {
console.log("Request added");
},
removed: function () {
console.log("Request removed");
},
changed: function() {
console.log("Request changed");
if(calendar){
calendar.today();
}
}
});
return allReqsCursor;
}
})
Template.packLayout.helpers.data is being rerun every time Requests collection is updated.
Something like above code should help you.
Instead using Template.packLayout.helpers.data function you can use:
Deps.autorun(function(){
allReqsCursor = Requests.find();
// update calendar
})
Use the internal calendar functions to re-render the calendar when things change:
Deps.autorun(function () {
if (Session.equals('calendarTemplateRendered', false) ||
!calendarSubs.ready() ||
typeof Calendar === 'undefined') {
console.log('exiting because there is no objects to process');
return;
}
console.log('trying to autorun');
var entries = Calendar.find().fetch(),
$calendar = $('#calendar');
$calendar.fullCalendar('removeEvents');
$calendar.fullCalendar('addEventSource', entries);
$calendar.fullCalendar('rerenderEvents');
}
Blaze does the rest for you. Dunno how efficient this is but it works pretty nicely for me.
Now you can just manipulate the subscription 'Calendar' "insert, del etc' and the calendar will work properly.
I need to add to DOM some html´s by jquery, and bind some events the generated elements, but i cant syncronize it, where the addEvents function starts, the DOM elements are not created, so the $(".login-log") element is not on DOM yet.
I found this:
Javascript Event Synchronization
Im working on it but dont works for me, that my code, i dont know if i miss something or what:
var Login = function ()
{
var commons = new Commons();
this.init = function()
{
stepOne(stepTwo);
commons.init();
}
function stepOne(callback) {
var AsyncDone = function()
{
callback();
}
loadFiles(AsyncDone);
}
function loadFiles(callback)
{
$(".header-container").load("views/header.html");
$(".content-container").load("views/login.html");
callback();
}
function stepTwo() {
addEvents();
}
function addEvents() {
alert("is here");
$(".login-log").bind("click", function() { alert("fuck"); });
}
}
The syncronizathion makes the alert "is here" to appear before the DOM elements of header and login.html are loaded in DOM.
I know that have to be simple, but i dont find the solution.
Thanks in advice.
My final choose:
this.init = function()
{
loadHeader(addHeaderEvents);
loadTemplate(addTemplateEvents);
loadFooter(addFooterEvents);
commons.init();
}
function loadHeader(callback) {
$(".header-container").load("views/header.html", function() {
callback();
});
}
function addHeaderEvents() {
}
function loadTemplate(callback) {
$(".content-container").load("views/template_login.html", function() {
callback();
});
}
function addTemplateEvents() {
alert("llega");
$(".login-log").bind("click", function() { alert("done"); });
}
function loadFooter(callback) {
$(".footer-container").load("views/footer.html", function() {
callback();
});
}
function addFooterEvents() {
}