I decided to use SignalR for chat on my page. Chat page is opened when user clicks on "Enter Chat" link which is placed inside _Layout.cshtml. This works fine. However, what I would like to achieve is the following functionality:
On the left side of the page I would like to have some kind of
"online users" area and when one user logins, other users whose are
already logged in will be able to see that a new user just enters the
page.
Users who are online can chat with each other by simply
clicking on their names
I am using the following code to connect to the chat application:
$(function () {
//declare a proxy to reference the hub
var chatHub = $.connection.chatHub;
registerClientMethods(chatHub);
//Start Hub
$.connection.hub.start().done(function () {
registerEvents(chatHub);
chatHub.server.connect(#User.Identity.Name);
});
});
However when I place this code inside my _Layout.cshtml page, users are permanently logged off and connected again each time they navigate through pages (they are intended to be opened inside _Layout.cshtml).
Is there any way for persisting connection with the hub when navigating through page? What is the best practices when using this kind of functionality?
Whenever you navigate away from a page or in any way refresh the contents of the page you will need to start a fresh SignalR connection. There are two ways to handle this behavior when navigating through pages:
Create a single page application.
Handle users connecting/disconnecting on the server in such a way that they're not truly logged out until they leave the site.
Now to dive into a little more detail on #2. Users on your site may disconnect/connect every time they transition to a new page but you can control how they log out or appear disconnected via your server side logic. You can get this functionality by keeping a set of "online" users in your server side code and then only considering them offline after a specified timeout value.
Related
I've developed an Ext JS 4.0.7 app for my company. It has various modules for different team's needs. Now, the company want to make sure only relevant people have access to relevant modules in an app. It's an ERP application which has CRM, MRP, Engineering, HR and Finance modules. Now, respective team members should have access to respective menus and pages and super admin will have access to everything.
I know how to control the menus based on user login. But not sure how to integrate user login screen into my app. I know basics of Ext JS and able to design a Login screen using form panel ...... but not sure how to make it as my app's first screen and upon successful login, let the user in and able to logout from there.
If anyone already developed such functionality, i request to share the solution here. Any pointers or code snippets will be a great help.
Thanks very much in advance.
My application has a header (company logo and app title - horizontal on north) and left menu and content panel.
So, here is how login/logout screen implemented.
When app is loaded, when viewport is loaded, on render, I load menu store and load 'Login' and 'Change Password' menu items in them.
When user enters login/pwd, via ajax call , will call servlet and process login data. Upon login successful, based on user role, respective menu json built in server side and menu store is loaded with this json. This json has 'Logout' menu by default. So, when user logs out, will load Login screen in content panel.
Not sure whether any other best ways to implement the same. But this is working well.
Let's say when a user POSTs to /api/signup or /api/signin in an Express app via ajax and on success, calls var socket = io.connect('http://localhost:8080').
Now while remaining logged in if the user navigates to say GET /api/list/:listId in the same app and SAME browser tab, i.e. not requiring multiple socket connections, does the user have to call
io.connect('http://localhost:8080') again when loading /api/list/:listId? Or is there a way to use the same connection across routes, i.e. call io.connect(...) once?
Whenever you refresh page or navigate to another page as whole code will be parsed again, thus socket will be disconnected. To get around this in our project we are using single page website.
i have to develop a multipage application that includes invocation of several web services.
My first page has a login page. based on the user input i have to traverse to next page while calling the next web service simultaneously. so obviously this all depends on the login page information that has the userid and password and the response from the web service such as personId etc.
i need to store this information temporarily for a particular session but... how to do this?
There are two kinds of page:
There are the UI states as seen by the user. Your Login page and your Next page are examples of these. From the user's perspective they see a succession of pages.
However you are writing an App, a single controlling thing that is in charge of all those "UI pages". I suppose that you are using MobileFirst to create a hybrid application that is effectively executing in a browser. From that browser's perspective you have a single HTML page. This is important, MobileFirst only works with single-page applications.
Now the browser loads the HTML and JavaScript for your single application page and that JavaScript stays resident as the user moves between the different "UI Pages", so the JavaScript can have variables for keeping the state you are asking about. The actual UI navigation from "page" to "page" is usually done by hiding and revealing DIVs.
Hence your WebService call results will be delivered (asynchronously) to some JavaScript function you define, and in the meantime your code can hide the login page and reveal the next page as required. The login data being held in JavaScript variabes.
All of this is simplified by using a framework such as AngularJS which abstracts the messy details of hiding and revealing and dealing with asynch delivery.
I build Web application using Sencha Touch2.
At iPhone, the application can be used by full screen.
I already have build web application for pc browser, and use google calendar API connecting with OAuth2.
The authorization step need to open new window to login the user google account.
Maybe I can build Sencha Touch application use the same architecture of pc,
but opening new window make the full screen application closed.
Do you know how to use google OAuth2 in a Sencha Touch2 application?
-- Add 2013/2/6
My Sencha Touch2 application is web application.
I want to know that it is possible to grant permission in the full screen web application, not in the browser.
-- Add 2013/2/7
I use the tip.
http://miketheindian.com/2012/02/22/staying-in-full-screen-mode-on-the-iphone-from-page-to-page/
This way is not need to open browser.
It is better than opening new window, but the best is authorizing in iframe...
-- Add 2013/2/13
Finally, I take the way;
Google AOuth is three patter, for user.
1.User google Account is logout, user must write user ID and password.
2.User google Account is login and but the application is not allowed, user must click "allow" button.
3.User google Account is login, user do not need to do anything.
When the time of 3., we can authorize in iframe.
And, when the time of 1. or 2., we can not authorize in frame, so use location.href change approach ( detail in http://miketheindian.com/2012/02/22/staying-in-full-screen-mode-on-the-iphone-from-page-to-page/ ).
Details
make view has the container
{
xtype: 'container',
html: '＜iframe src="" id="googleLogin" style="border:0;">'
},
change src in controller
var iframe = Ext.get(Ext.query('#googleLogin'));
iframe.set(
{
src: responseInformation.googleOAuthUrl
});
When the time of 3., user google account login , this is ok.
When the time of 1. or 2., we change location.href.
We want to handle iframe "onerror" event, but there is not that event.
I use settimer and check if the src of the iframe is not change first src (because of error redirecting to google login page).
3000 ms is not so meaning. When the time of 3., redirect is success and page has changed.
me.timerId = setInterval(function(){
if (iframe.el.dom.src.indexOf( /* first url */'') !== -1){
location.href = iframe.el.dom.src;
clearInterval(me.timerId);
}
}, 3000);
On Android, it's probably a good idea to use the local Contacts database on the device rather than working over the network. Yes, the user has to grant permission, but they would anyhow for network access. That way you don't need to spin out any extra browsers or anything.
There is another way to face the problem:
Use inAppBrowser plugin from Cordova or Sencha to launch the auth prompt, then, with a eventListener, wait for page load, and if url matches the success callback URL, then you can parse the url and get the auth/code or auth/token.
Example using Cordova:
window.authmodal = window.open(authorizationUrl, '_blank', 'location=yes');
window.authmodal.addEventListener('loadstart', function(event){
var code = getParam(event.url,"code");
if(code != null){
//here we got the code, now make a last request to get the TOKEN
OAuth2Helper.finish(function(token){
window.authmodal.close();
window.localStorage.setItem("token",token)
//do somethink else with your logic
},code)
}else{
//no code found in this page start.
}
});
NOTE: OAuth2Helper.finish, makes a request to the token url, using the code, in order to get a valid and usable token.
I am in the middle of making an app using a PHP web service to log users in/authenticate their credentials.
I am using localStorage (part of phonegaps local storage API) to ensure the user doesnt have to keep logging in when they open the app. This is done by storing the username and password on local storage and checking it when the app opens. If they feel the need to log out I have a simple logout button binded to a tap event which clears their local storage.
$( '#logout' ).live( 'tap',function(event){
window.localStorage.clear();
$.mobile.changePage("#loginPage", {transition: "none"});
});
BUT... when logged out, they are still able to click the back button on the phone and get into the secure area, which doesnt make sense because the "welcome, (username)" part is all messed up etc...
Im wondering if there is a way to ensure that what ever page they open does some sort of check to make sure theyre logged in??
Bind into the pagebeforeshow event of the pages to check if the user is logged on - check if credentials are present in local storage.
If user is not logged on you can either call preventDefault to stop the pageChange or better redirect the user to a loggedOffPage by modifying the toPage passed into the handler.
Refer the Page change events section on JQM Events page.