strophe.js and openfire who terminates connection on page reload? - javascript

I am using symfony2 to build some app. In that app I have chat app. I am using attached session in chat.
1) On login I fire up event listener to catch user/pass from login, connect to openfire server and get sid and rid.
2) After that i am storing that data in session so I can use them later on every page where I have chat.
Problem occurs when page is reloaded/refreshed.
My guess this is because ajax request to url:7070/httpd-bind is canceled strophe sends terminate to openfire server. Bu I can not find anywhere terminate stanza.
I am have patched strophe.js to use sync on page unload but again that is not working.
Chat.connection.flush();
Chat.connection.sync = true; // Switch to using synchronous requests since this is typically called onUnload.
Chat.connection.disconnect();
Please suggest solution for this, I am on 10 hour coding and I have no idea how to solve this.
I can sotre user/pass in session but that is just stupid. Why attached session exists if I have to do that.

UPDATE
After trying to figure about this rid plus+1 etc I noticed that rid is changing on presence, on message on message sent on roster on roster change so I made a XMLHttpRequest on each to remember new rid in session. For some reason localstorage is sometimes working sometimes not.
Now i have rid up to date all the time.
I think I got this. Problem was in rid and presence.
1) First you have to figure out from your logs if your rid is increasing or decreasing.
My was decreasing by one. So I substract -1 from my Chat.connection.rid
2) In my openfire logs I figured out that I was sending unavailable status on page refresh
so I changed my window.unload function to send presence to online. N
Now I am refreshing page million times and i never got disconnected.
Now I just have to figure out how to remember connection.rid to localStorage for non HTML browsers.
To start openfire in debug mode you just add ./openfire.sh -debug. Then you will be able to se everything in debug.log
This did trick for me. If this is doing trick for you please +1 and accept answer.
Do not forget to terminate session on logout :)
UPDATE
This is my on window.onunload function
window.onunload = function(ev){
var initialPresence = $pres().c('show').t("cao").up().c('status').t("sad");
Chat.connection.send(initialPresence);
store.set('session_rid', parseInt(Chat.connection.rid)-1);
//save rooster contacts state
var contacts = document.getElementById('records').getElementsByTagName('li');
var id_value;
var class_value;
var status;
var el;
for(i= 0; i < contacts.length; i++){
el = contacts[i].getElementsByClassName("mood")[0];
status = el.textContent || el.innerText;
Array.prototype.slice.call(contacts[i].attributes).forEach(function(item) {
if(item.name == "id"){
id_value = item.value;
}
if(item.name == "class"){
class_value = item.value;
}
store.set('user'+i, { id: id_value, class_name: class_value, status : status });
});
}
Chat.disconnect();
}
This is my on window.onload function
window.onload = function(){
if(store.get("session_rid")){
var obj;
var id;
var class_name;
var status;
store.forEach(function(val, key) {
if(val !== "session_rid"){
setTimeout(function(){
obj = eval(key);
id = obj.id;
class_name = obj.class_name;
status = obj.status;
if(document.getElementById(id)){
document.getElementById(id).className = class_name;
document.getElementById(id).getElementsByClassName("mood")[0].innerHTML = "<span>"+status+"</span>";
}
}, 1000);
}
})
}
}
This is working for me. I used store.js to store data so it can work on IE.
I used attached sessions.
//json is from ajax call on some php script that has started attached session on user login
var obj = JSON.parse(json);
connection = new Strophe.Connection(BOSH_SERVICE);
connection.attach(obj.fulljid,
obj.sid,
(store.get("session_rid") ? store.get("session_rid"):obj.rid),
justDoIt);
full_jid = obj.fulljid;

Related

jquery hide/show is not working as expected in node js

I am new to node js, I am building one application for learning purpose.
I stuck in a thing, where I have to do show/hide of success and error message.
Here I have used jquery plugin in node js.
Below is the code :
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
global.jQuery = require('jquery')(window);
global.$ = global.jQuery;
registration code :
doRegistration : (req , res) => {
let email = req.body.email;
let password = req.body.password;
let name = req.body.name;
let confirm_password = req.body.confirm_password;
let encryptedString = cryptr.encrypt(req.body.password);
if(email== '' || password == '' || name =='' || confirm_password =='')
{
message = "Fields are empty";
let list2 = [];
list2.name = '';
list2.email = '';
if(name!='')
{
list2.name =name;
}
if(email!='')
{
list2.email = email;
}
req.flash('error', message);
setTimeout(function(){ $("#err").hide(); },3000); //not working
res.locals.message = req.flash();
res.render('registration.ejs' ,{
code : '204',
title: "Registration",
details :list2,
});
}
}
setTimeout(function(){ $("#err").hide(); },3000); this code has been added to hide the error message .Error message is not getting hide.
Is there anything wrong in my code.
Please suggest.
Thank you
You have a bunch of code (in your first code block) which sets up a DOM and jQuery. You don't seem to ever populate the document with any data, but that's not your biggest problem.
In your registration code, you collect some data, inject it into registration.ejs and send the result to the client.
Three seconds later (by which time the HTTP request is finished, and the browser has whatever your sent), you call a jQuery function. This function operates on whatever global.document is.
global.document doesn't appear to have anything to do with registration.ejs and, even if it did, would change what was currently on the server without touching whatever is on the browser.
You can't write server-side JS that travels back in time and changes what the server sent to the browser three seconds earlier.
You could instead include a <script> element in the template file and run your jQuery client-side.
You can't write server-side code which initiates a connection to the browser (HTTP works with the browser initiating a communication with a request and the server providing a response) telling it to display a different document instead.
You could use WebSockets (or less elegant approaches like Comet or polling) so that when the page loads in the browser it initiates a connection to the server and then signal the browser to run some client-side code which hides the element. You still need to do the hiding with client-side code, this just allows you to determine when that happens on the server. There's no need for anything that complex if you just want to wait a short time.

How do I check if an indexedDB instance is open?

Suppose I have an instance of an indexedDB object. Is there a simple way of detecting if the object is currently in the 'open' state?
I've tried database.closePending and looking at other properties but do not see a simple property that tells me the state of the database.
I am looking to do this synchronously.
Doing something like attempting open a transaction on a database and checking if an exception occurs is not a reasonable solution for me.
I don't want to maintain an extra variable associated with the database instance.
Perhaps I am missing some simple function in the api? Is there some observable feature of the instance variable that I can quickly and easily query to determine state?
Stated a different way, can you improve upon the following implementation?
function isOpen(db) {
if(db && Object.prototype.toString.call(db) === '[object IDBDatabase]') {
var names = db.objectStoreNames();
if(names && names.length) {
try {
var transaction = db.transaction(names[0]);
transaction.abort();
return true;
} catch(error) {
}
}
}
}
Or this method?
var opened = false;
var db;
var request = indexedDB.open(...);
request.onsuccess = function() {
db = request.result;
opened = true;
};
function isOpen(db) {
return opened;
}
db.close();
opened = false;
Or this method?
var db;
var request = indexedDB.open(...);
request.onsuccess = function() {
db = request.result;
db.onclose = function() {
db._secret_did_close = true;
};
};
function isOpen(db) {
return db instanceof IDBDatabase && !db.hasOwnProperty('_secret_did_close');
}
There's nothing else in the API that tells you if a connection is closed. Your enumeration of possibilities is what is available.
Also note that there is no closePending property in the API. The specification text uses a close pending flag to represent internal state, but this is not exposed to script.
Doing something like attempting open a transaction on a database and checking if an exception occurs is not a reasonable solution for me.
Why? This is the most reliable approach. Maintaining extra state would not account for unexpected closure (e.g. the user has deleted browsing data, forcing the connection to close) although that's what the onclose handler would account for - you'd need to combine your 2nd and 3rd approaches. (close is not fired if close() is called by script)
You should create a request by using indexedDB.open and if the connection is open you will jump onsuccess method.
request = indexedDB.open('html5',1);
request.onsuccess = function() {
console.log('Database connected');
};
Example :
https://codepen.io/headmax/pen/BmaOMR?editors=1111
About how to close or how to known if the indexedDB is still open : I guess you need to implement all events on every transaction : for example to take the control you can take the events : transaction.onerror, transaction.onabort ... If you need some example explanation i guess you have to create a new post ;).
https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction

Capturing refresh on haskell websockets example server?

The websockets server example works as expected. On browser refresh (e.g. S-F5 with chrome), the websocket disconnects, still working as expected. After refresh, the user has to give name again to connect to the server.
How would you capture the refresh-event and keep the user connected? E.g.
Is this doable only on server side or does the client require modifications as well? Haskell examples or links to such would be nice as well as hints on how to do this!
How would you capture the refresh-event...
There isn't really such a thing as a refresh event to detect (I would love to be proved wrong in this!)
... and keep the user connected...
The refresh, or rather, the leaving of the page before loading it again, causes the websocket to disconnect, and (especially if this is the only page on the site that is open), there isn't really much you can do about it.
So the only thing that can be done, is have some sort of auto-reconnect the next time the page loads. A solution that allows this is one where..
when the name is initially entered, the name is saved somewhere in the browser;
when the page reloads, it checks for a previously saved name;
and if it's found, it connects again using that name.
Local storage is one such place to save this, as in the below example, modified from https://github.com/jaspervdj/websockets/tree/master/example to save/retrieve the name from local storage.
$(document).ready(function () {
var savedUser = sessionStorage.getItem("rejoin-user");
if (savedUser) {
joinChat(savedUser);
}
$('#join-form').submit(function () {
joinChat($('#user').val())
});
function joinChat(user) {
sessionStorage.setItem("rejoin-user", user);
$('#warnings').html('');
var ws = createChatSocket();
ws.onopen = function() {
ws.send('Hi! I am ' + user);
};
ws.onmessage = function(event) {
if(event.data.match('^Welcome! Users: ')) {
/* Calculate the list of initial users */
var str = event.data.replace(/^Welcome! Users: /, '');
if(str != "") {
users = str.split(", ");
refreshUsers();
}
$('#join-section').hide();
$('#chat-section').show();
$('#users-section').show();
ws.onmessage = onMessage;
$('#message-form').submit(function () {
var text = $('#text').val();
ws.send(text);
$('#text').val('');
return false;
});
} else {
$('#warnings').append(event.data);
ws.close();
}
};
$('#join').append('Connecting...');
return false;
};
});
... Is this doable only on server side or does the client require modifications as well?
It definitely needs something done in the client to auto-reconnect. The bare bones version above needs no changes to the server, but if you wanted something fancier, like having the cases of initial connect and auto reconnect handled/shown differently somehow, then the server might need to be modified.

How to get access token from node-webkit for a desktop app without hosting page?

I'm trying to create a desktop app with node-webkit. A part of this app require the use of facebook to get/post some content to any profile (facebook user) that use my desktop app on my personal computer.
Regarding facebook api documentation (https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.0) , I have to manually implement the login flow and use the following URI as the redirect URI: https://www.facebook.com/connect/login_success.html
Currently, in my node-webkit app, via a child window (a popup), a user can login to facebook and authorize my desktop app to interact with it's profile.
Here is a part of the code:
var url = "https://www.facebook.com/dialog/oauth?client_id=myclientID&redirect_uri=https://www.facebook.com/connect/login_success.html&response_type=token&scope=publish_actions";
loginWindow = window.open(url, 'Login facebook', 'location=yes,toolbar=yes,menubar=yes,directories=yes,status=yes,resizable=yes,scrollbars=yes,height=480,width=640', false);
After that, the user is redirected to the following URI and as mentioned in the doc, the access token appear correctly:
https://www.facebook.com/connect/login_success.html#access_token=theBigTokenString&expires_in=3864.
But it appears only for few seconds and after that the url is replaced by https://www.facebook.com/connect/blank.html#_=_ (with a security warning message).
I've read some post that propose to add eventListener like hashchange to the opened window in order to capture the access token. But after some redirect within the child window, I'm no longer available to interact with it via javascript.
So finally, I can't get the access token that the child window has retrieved and make visible for few seconds.
Is anyone can help me to get this user access token with node-webkit?
I really don't want to use a server (for hosting a web page) between my desktop app and facebook.
Thanks in advance for help.
With the help of an other question (here) I found a solution to my problem.
I post the code that I use now and I Hope it will help someone else:
var url = "https://www.facebook.com/dialog/oauth?&client_id=myBigClientID&redirect_uri=https://www.facebook.com/connect/login_success.html&response_type=token&scope=publish_actions";
function Response() {
this.access_token = null;
this.expires_in = null;
};
var response = new Response();
//function called every 500ms to check if token is in url
window.hashUpdate = function() {
if(window.loginWindow.closed){
window.clearInterval(intervalId);
start(); //just a callback that I'm using to start another part of my application (after I caught the token)
}
else {
var url = window.loginWindow.document.URL;
var tabUrl = url.split("#"); //first split to separate the domain part and the parameter part
var paramString = tabUrl[1]; //I concerned only by the second part after the '#'
if(paramString != undefined){
var allParam = paramString.split("&");
for (var i = 0; i < allParam.length; i++) {
var oneParamKeyValue = allParam[i].split("=");
response[oneParamKeyValue[0]] = oneParamKeyValue[1]; //store my token in form of key => value
};
//close the window after 1500ms
setTimeout(function(){
window.loginWindow.close();
}, 1500);
}
}
}
//open the url and start the watching process
window.loginWindow = window.open(this.url, 'Login facebook', false);
this.intervalId = window.setInterval("window.hashUpdate()", 500);

Gdata JavaScript Authsub continues redirect

I am using the JavaScript Google Data API and having issues getting the AuthSub script to work correctly. This is my script currently:
google.load('gdata', '1');
function getCookie(c_name){
if(document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=");
if(c_start!=-1){
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
function main(){
var scope = 'http://www.google.com/calendar/feeds/';
if(!google.accounts.user.checkLogin(scope)){
google.accounts.user.login();
} else {
/*
* Retrieve all calendars
*/
// Create the calendar service object
var calendarService = new google.gdata.calendar.CalendarService('GoogleInc-jsguide-1.0');
// The default "allcalendars" feed is used to retrieve a list of all
// calendars (primary, secondary and subscribed) of the logged-in user
var feedUri = 'http://www.google.com/calendar/feeds/default/allcalendars/full';
// The callback method that will be called when getAllCalendarsFeed() returns feed data
var callback = function(result) {
// Obtain the array of CalendarEntry
var entries = result.feed.entry;
//for (var i = 0; i < entries.length; i++) {
var calendarEntry = entries[0];
var calendarTitle = calendarEntry.getTitle().getText();
alert('Calendar title = ' + calendarTitle);
//}
}
// Error handler to be invoked when getAllCalendarsFeed() produces an error
var handleError = function(error) {
alert(error);
}
// Submit the request using the calendar service object
calendarService.getAllCalendarsFeed(feedUri, callback, handleError);
}
}
google.setOnLoadCallback(main);
However when I run this the page redirects me to the authentication page. After I authenticate it send me back to my page and then quickly sends me back to the authenticate page again. I've included alerts to check if the token is being set and it doesn't seem to be working. Has anyone has this problem?
I was having the same problem so I built this function
function login() {
var scope = "http://www.google.com/calendar/feeds/";
if(!google.accounts.user.checkLogin(scope)) {
if(google.accounts.user.getStatus() == 0) {
var token = google.accounts.user.login();
}
}
}
I added the check to google.accounts.user.getStatus() if it's 1 that means the application is in the process of logging in and if it is 2 that means the applications is logged in. You can also pass a scope to the getStatus method.
the problem is that setting the cookie takes a little while when google redirects back to your site. However, the callback runs immediately, and there is no cookie by that time to verify authentication, so it again redirects back to google. Try using setTimeout or something to run the authentication check after a second or so to be sure.
You should pass the scope to the login method too.
Sometimes you can end up with an orphaned cookie in your browser - which will keep getting fed back to Google.
What I'm doing now, is doing a checkLogin before I perform my login call, and if it returns true I explicitly call logOut().
The logOut call will remove any cookies which Google had rejected but left in your browser. The reason it seems to keep going in a loop is because the cookie is there, but even on reauth, it doesn't produce a new one because you already have one. But unfortunately for our sake, the one that's there is invalid.

Categories

Resources