We Keep Coding

Problems with multiple websockets (over time)

TLDR: My websockets stop connecting after a while, though they work perfectly at first. How do I fix it?
I have a C# web service that makes use of two websockets (via websocket-sharp). They are defined like so:
public WebSocketServer sock1= new WebSocketServer("ws://localhost:802");
sock1.Log.Level = WebSocketSharp.LogLevel.Error;
sock1.Log.File = "LOG\\logfile.LOG";
sock1.AddWebSocketService<StatusWebSocket1>("/");
sock1.KeepClean = false;
sock1.Start();
public WebSocketServer sock2= new WebSocketServer("ws://localhost:803");
sock2.Log.Level = WebSocketSharp.LogLevel.Error;
sock2.Log.File = "LOG\\logfile.LOG";
sock2.AddWebSocketService<StatusWebSocket2>("/");
sock2.KeepClean = false;
sock2.Start();
These websocket servers accept client connections from my angularjs app:
$scope.socket = null;
var startStopPolling = function(action){
if(action == 'close'){
$scope.socket.close(3001, 'User leaving page.');
return;
}
var path = 'ws://' + window.location.hostname + ':802/';
$http({method: 'GET', url: apiRoot+'is-remote', timeout: 1000})
.success(function(response) {
path = 'wss://' + window.location.hostname + '/';
}).finally(function(){
$scope.socket = new WebSocket(path);
$scope.socket.onerror = function(event){
console.log('SOCKET ERROR', event);
$timeout(startStopPolling, 1000);
};
$scope.socket.onopen = function(){
var selfInfo = {
locationCode: $scope.LocationCode,
token: BrowserStorageService.get('token'),
type: 'ClientRegistration',
mode: 'status'
};
$scope.socket.send(JSON.stringify(selfInfo));
$scope.socket.onmessage = function(event){
var data = JSON.parse(event.data);
//do some stuff with data
});
};
};
});
};
startStopPolling();
And elsewhere:
var socket2 = null;
var startStopPolling2 = function(action){
if(action == 'close'){
socket2.close(3001, 'App closing.');
return;
}
var path2 = 'ws://' + window.location.hostname + ':803/';
socket2 = new WebSocket(path2);
socket2.onerror = function(event){
console.log('SOCKET ERROR', event);
$timeout(startStopPolling2, 1000);
};
socket2.onopen = function(){
var selfInfo = {
mode: 'status2',
type: 'ClientRegistration'
};
socket2.send(JSON.stringify(selfInfo));
socket2.onmessage = function(event){
var data = JSON.parse(event.data);
console.log('status2', data.status2);
if(data.status2 == "Closed"){
$state.go("status");
}
};
};
};
startStopPolling2();
$rootScope.$on('$destroy', function(){
startStopPolling2('close');
});
The application mostly sits on one page. (We display a status page most of the time, but allow the user to navigate away to do things like manage configuration.) When we receive a certain status value from the status2 socket (socket2), we want to do some things, so we have to keep track of that all the time. The other socket is only relevant when on that page, so we want to get rid of it when we don't need it.
Here's the problem: The app periodically refreshes the page via a call like location.reload(true). Wile it works perfectly at first, after so many of these refreshes, the sockets no longer connect. There are no errors in the console, and neither onOpen() function fires. What's going on, and how do I fix it?

Phantomjs can't load network traffic when key down event sent

I tried to load the network traffic from a twitter page using Phantomjs, the problem is the keypress event didn't worked. here the code (netlog.js modified)
in other words I didn't see any output with sentEvent() unlike wothout sentEvent(), i want to scroll down the twitter page to get more network traffic.
var page = require('webpage').create(),
system = require('system'),
address;
if (system.args.length === 1) {
console.log('Usage: netlog.js <some URL>');
phantom.exit(1);
} else {
address = system.args[1];
page.onResourceRequested = function (req) {
console.log('requested: ' + JSON.stringify(req, undefined, 4));
};
page.onResourceReceived = function (res) {
console.log('received: ' + JSON.stringify(res, undefined, 4));
};
page.onLoadFinished = function(status) {
console.log('Status: ' + status);
};
page.open(address, function (status) {
if (status !== 'success') {
console.log('FAIL to load the address');
}else{
page.sendEvent('keypress', page.event.key.Down);
}
phantom.exit();
});
}
Thanks for your Help.

Check for an specific .js file being served in response

I need to detect whether an specific .js file was served in a http response and additionally, check the domain it came from, like this:
I need to automatically detect the lack of the js file and email the incidence
I tried Net::Http, rest-client, mechanize and a lot of gems, they just return the html header. It seems I need to monitor http traffic with tools like PhantomJS and checking for the file, but is there any rubyesque way of doing this?
Thanks in advance

I ended with the phantomjs approach. A ruby script iterate over a database table and then calls this phantomjs script for each record representing an URL
This is the phantomjs script
var page = require('webpage').create(),
system = require('system'),
address,
isScript = false;
var fs = require('fs');
// main
analizePage(system.args[1]);
//open page.
//onResourceRequested event, compares domain of each one with 'my.domain.net'
//append to a log file: -1 for failed url, 1 for script presence, 0 for no script presence
function analizePage(address){
page.open(address, function (status) {
if (status !== 'success') {
console.log('FAIL to load the address ' + address);
fileWriter(-1, address);
}
else
{
if (!isScript){
fileWriter(0, address);
}
else
{
fileWriter(1, address);
}
console.log('Has script: ' + isScript);
}
phantom.exit(0);
});
page.onResourceRequested = function (req) {
try {
var link = document.createElement('a');
link.setAttribute('href', req.url); //extract asset's domain from URL
if (link.hostname == 'my.domain.net') {
isScript = true;
}
} catch(e) {
console.log("PAGE OPEN ERROR: " + e);
}
};
}
function fileWriter(type, line){
try {
fs.write("scriptlog.csv", type + ',' + line + ',' + Date.now() + ',' + system.args[2] + '\n', 'a');
} catch(e) {
console.log("FILE ERROR: " + e);
}
}

Javascript not running on Facebook iframe

I have a django project which is intended for a facebook application. In the project, the invite friends module runs fine in localhost!
But while it is loaded in facebook application, the javascript responsible for displaying the friends list doesn't work. Although the libraries are properly loaded.
I don't know why it is so. May be some iframe problem.
Here is the javascript code
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '460948667348013', cookie: true});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
// alert('Your name is ' + response.name);
console.log('Your name is ' + response.name);
init();
});
} else if (response.status === 'not_authorized') {
alert('the user is logged in to Facebook, but has not authenticated your app');
} else {
alert('the user is not logged in to Facebook.');
}
});
}
function init() {
FB.api('/me', function(response) {
$("#username").html("<img src='https://graph.facebook.com/" + response.id + "/picture'/><div>" + response.name + "</div>");
$("#jfmfs-container").jfmfs({
max_selected: 15,
max_selected_message: "{0} of {1} selected",
friend_fields: "id,name,last_name",
pre_selected_friends: [1014025367],
exclude_friends: [1211122344, 610526078],
sorter: function(a, b) {
var x = a.last_name.toLowerCase();
var y = b.last_name.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
});
$("#jfmfs-container").bind("jfmfs.friendload.finished", function() {
window.console && console.log("finished loading!");
});
$("#jfmfs-container").bind("jfmfs.selection.changed", function(e, data) {
window.console && console.log("changed", data);
});
$("#logged-out-status").hide();
$("#show-friends").show();
});
}
$("#show-friends").live("click", function() {
var friendSelector = $("#jfmfs-container").data('jfmfs');
$("#selected-friends").html(friendSelector.getSelectedIds().join(', '));
});
function sendRequest() {
var friendSelector = $("#jfmfs-container").data('jfmfs');
var sendUIDs = friendSelector.getSelectedIds().join(', ');
// Use FB.ui to send the Request(s)
FB.ui({method: 'apprequests',
to: sendUIDs,
title: 'My Great Invite',
message: 'Check out this Awesome App!',
}, callback);
}
function callback(response) {
// alert('callback called');
var friendSelector = $("#jfmfs-container").data('jfmfs');
var sendUIDs = friendSelector.getSelectedIds().join(',');
var uids = sendUIDs.split(',');
var query = '';
for(i=0;i<uids.length;i++){
if(i==0){
query = query + 'to[' + i + ']=' + uids[i];
}
else{
query = query + '&to[' + i + ']=' + uids[i];
}
}
console.log(query);
if(response){
// alert('successful');
window.location.assign("/?"+ query)
}
else{
alert('failure');
}
}
</script>
Please help ! I am stuck with this problem.

The issue may be SSL issues.
Facebook has made many changes in few months ago.
Also you need to keep update with Facebook developer blog.
So I am going to try to explain few things I suspected.
App on Facebook
Your Canvas Page should be https://apps.facebook.com/yourchoosenname
1a. Your Canvas URL should be https://yoursite.com/yourapplication/
Website
http://yoursite.com/
Page Tab
Your Secure Canvas should be https://yoursite.com/yourapplication/
Your Page Tab URL should be https://yoursite.com/yourapplication/
Your Secure Page Tab URL should be https://yoursite.com/yourapplication/
In this case you will need SSL Certificate for site so You can find reliable yet cheap digital certificate from Here .
This mandatory for any Application to work on facebook.
Hope this will help you and others

Javascript callbacks work in Firefox but not in Chrome or Safari

I am working with Ejabberd and Orbited and I am having a few issues with my JavaScript callback functions not being called. The following is my JavaScript file where the TCPSocket connection happens and I have two callback functions namely
onSocketConnect: which is called when the Orbited established connection with port 5222 of the XMPP server and
onLoginSuccess: which is called on the successful completion of the xmpp_client.login function
The problem I'm facing is the connection happens successfully but my callbacks get called only when I'm using FireFox and not while using Safari or Chrome. I'm totally clueless about what is causing this problem but I'm sure that the method xmpp_client.login does get called because the user is logged in and is displayed as online in the ejabberd admin console.
TCPSocket = Orbited.TCPSocket;
Orbited.settings.port = 8000;
Orbited.settings.hostname = 'localhost';
document.domain = document.domain;
<script src='http://localhost:8000/static/protocols/xmpp/xmpp.js'></script>
//xmpp.js file is included after this which is available with the Orbited. I have not included the code here.
<% if current_user %>
<script>
notifier = ' ';
user = "<%= current_user.jabber_id %>";
alert(user);
password = '123456';
domain = XMPPDOMAIN;
/* function onLoginSuccess(){
$('.status').html("Connected and Logged In");
xmpp_client.set_presence('available');
} */
var onLoginSuccess = function(){
$('.status').html("Connected and Logged In");
}
function onLoginFailure(){
alert('User could not be logged in');
}
function connectSuccess(){
$('.status').html("Connection Successful.");
}
function connectFailure(){
$('.status').html("Connection Failed!");
}
function onSetupNotification(){}
xmpp_client = new XMPPClient();
xmpp_client.connect('localhost',5222);
xmpp_client.onPresence = function(ntype, from) {
alert('Presence message' + ntype + ' From :' + from)
}
xmpp_client.onSocketConnect = function(domain, connectSuccess, connectFailure){
var domain = XMPPDOMAIN;
$('.status').html('Connected');
alert(user);
if(domain)
{
xmpp_client.connectServer(domain, connectSuccess, connectFailure);
xmpp_client.login(user, password, onLoginSuccess, onLoginFailure);
xmpp_client.set_presence('available');
}
}
function send_message(id, msg){
var j_id = id + '#' + 'siddharth-ravichandrans-macbook-pro.local';
alert('jid_id' + j_id);
var status = xmpp_client.msg(j_id, msg);
alert(status);
}
xmpp_client.onMessage = function(jid, username, text) {
alert('message-recieved');
if ( $('.discussion-area').length > 0 ){
$('.discussion-area').append('<div class=\'new-message\'>' + text + '</div>');
return false;
}
}
/* self.login = function(nick, pass, s, f) {
conn.onread = setUser;
success = s;
failure = f;
user = nick;
bare_jid = nick + "#" + domain;
full_jid = bare_jid + "/Orbited";
self.send(construct(LOGIN, [user, pass]));
}
self.set_presence = function(status, status_msg) {
self.send(EXT_PRESENCE[0] + full_jid + EXT_PRESENCE[1] + room_jid + EXT_PRESENCE[3] + status + EXT_PRESENCE[4] + status_msg + EXT_PRESENCE[5]);
}
*/
</script>
<% end %>
This is part of the xmpp.js which I got when I installed orbited and in order to test if my requests were actually reaching I added an alert in the login method as follows
...
...
self.login = function(nick, pass, s, f) {
conn.onread = setUser;
success = s;
failure = f;
user = nick;
bare_jid = nick + "#" + domain;
full_jid = bare_jid + "/Orbited";
self.send(construct(LOGIN, [user, pass]));
alert("bazingaa");
}
self.connectServer = function(d, s, f) {
success = s;
failure = f;
doma
...
...
Now I have no clue how this got my callbacks and would really appreciate some help on this.
Thanks
Actually I find that removing the xmpp_client.set_presence and moving it to the onLoginSuccess is what seems to have done the trick. The minute I add the set_presence method after the login method call the functionality fails in chrome. So why would that prevent it from invoking the callback on successful login?
var onLoginSuccess = function(){
$('.status').html("Connected and Logged In");
xmpp_client.set_presence('available');
}
xmpp_client.onSocketConnect = function(domain, connectSuccess, connectFailure){
var d = "";
$('.status').html('Connected');
xmpp_client.connectServer(d, connectSuccess, connectFailure);
xmpp_client.login(user, password, onLoginSuccess, onLoginFailure);
//xmpp_client.set_presence('available');
}
Help!

I think your problem is related to the Same Origin Policy for Javascript
https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript
I'm sure the Safari/Chrome Web Inspector (with Javascript enabled) will verify this in the javascript console
Modern browsers (ie. not Internet Explorer!) get around this issue by implementing Cross-Origin Resource Sharing. But then your Javascript XMPP client library has to implement CORS too
http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/
I'm not familiar with Orbited but I have done this type of browser XMPP connections using the Strophejs library and ejabberd's XMPP BOSH connection manager
To get around the Same Origin policy across all browsers you need to employ a proxy
http://flxhr.flensed.com/ (client-side proxy library)
If using apache you can employ a server-side proxy with the ProxyPass directive under the mod_proxy module