I'm developing a multi-page web application with Express that has chat functionality (powered by Socket.IO). Users can invite others to a private shared chatroom (that also has other components like a shared drawing board). I'd like to redirect both of the users (inviter and invitee) to a different URL upon completing the invitation transaction.
Since socket.io doesn't have access to the request and response objects of my routes, I attempted to pass my instance of socket.io into my route handling. Issues of duplicate event handlers piling up on page refresh aside, Express throws an error when trying to do a redirect after the response has already been sent (this makes sense).
It seems like the only way to achieve this would be to have the redirect occur on the client, with the new chatroom URL being passed to each from Socket.IO. Relying on the client for state transfer seems too fragile, though.
Are there any other options? What is the best way to implement what I'm after?
I'm not so sure it would be too fragile to do in the client. Just send the URL over the socket and either do window.location.href = redirectUrl or $('div').load(newContentUrl) with jQuery.
Related
I've developed webapp (ReactJS, Flux, React-router; Server: NodeJS, Express)
It does load initially only html (isomorphic way).
Now I need to hide some business logic from client side.
For example, i have rating system.
User should be able to vote only if he hasn't vote before.
I guess, it should be like that:
user pushes voting button. This button's handler function sends an object to the serverSide:
{
userName: login,
password: password,
votedObjectId: objectId
}
Server should check, if this user exists in database (by userName and password), and if this user has voted before for this object(by userName and votedObjectId).
If everything is ok, server should add row to the Rating table (userName and votedObjectId)
I don't know how to implement it.
I suppose, I should create a js method in the server.js file, which will contain this logic. And client Side should trigger this method. How client side may send request to the server.js?
You have the right idea, you need to post your interaction to the server and have it process the business logic. Since your question is specifically how to send the request to the server to trigger this behavior, I'm guessing you've yet to implement any RESTful layer in your app.
Express.js is totally competent to do this, so I would look for a tutorial on implementing simple REST calls from client to server using the Express framework. You'll need to decide how you want to handle the AJAX calls from the browser, whether through some simple means like using JQuery or using a more full-fledged modeling layer, such as Backbone or the like.
It appears to me that the list of technologies you begin your post with is omitting this layer, and since React is the "View" in MVC, and React-Router is (kind-of) the "Controller", you still need the "Model" part - some way to represent your server API in the Javascript world.
now I am learning how to build single page web applications with node.js. When I come to the communication part between server and client, I am confusing about the difference between http post request and web socket communication
Here is my understanding:
Web socket like socket.io is asynchronous communication while POST is synchronous communication method.
socket.io is mainly used in dealing with real-time task like html games or dynamic online chatting, or boradcasting some informations.
for validating forms when some user sign up for certain website, it is really good to check instantly if the user name is already been taken or not, I think it is using socket.io to achieve that.
for example in a login page, after I press the username and password, then press 'login' button, I could just use emit things in socket.io to transfer a JSON file with these information. when we checked these information and send back a flag string like 'true' or 'false ' to indicate if the login is success or not.
So my question is:
Why we still use HTTP POST for login and signup ?
Is socket.io better than HTTP POST ?
Why not replace HTTP POST with socket.io ?
P.S for some large files, I have not go into these parts, so I have no idea.
Here is some additions:
After reading a similar question I find I seem to assume that WebSocket is a replacement for HTTP. It is not. It's an extension.
I think this asnwered my third question Why not replace HTTP POST with socket.io.
Ok, I am new to web dev and here's a stupid question. I have been through a few tutorials for node, express and backbone individually, but I can't seem to wrap my head around how they are integrated. Particularly, consider this use case:
Person X opens the browser, types in a URL and hits enter->Express responds to the request and sends some data back to the browser.
My question is, where does backbone come into the picture here ? I know it's a mvc framework to organize your JS code. But, I can't find a place in this use-case where the server/browser interacts with backbone. Only thing I can think of is that the backbone saving the route and serving the page the next time. But what about the first time ? It would be best if someone could explain to me how the request gets routed from client browser to express/backbone to browser again.
Also, am I correct in assuming response.send() or response.json() will send the result to backbone when model.fetch() is called ? I mean, is there no additional code required ? Being new to web dev, I'm quite not used to the idea of the framework 'taking care' of everything once you send the response back.
EDIT : Here's what I have understood so far. Feel free to correct me if I am wrong. When I access websites like gmail, the server first sends a big html file including backbone.js code in it. The backbone.js code listens for events like clicking on links in the html file and handles them if the links are defined in it routes(routes are always relative to current route, accessing a completely different route sends request to the server). So, if I click compose, my url remains the same because backbone handles the request. However, if I click Maps/News services in the bar above, the server handles the request.
There is no special integration between backbone and node.js.
If you use the standard backbone sync method then all you need to do is:
Use the static middleware in express to serve up your static html/js/... files.
Define RESTfule routes in express that conform to what backbone is expecting.
Backbone does indeed make an http call when you do model.fetch. You could look in Chome network tab to see where it's sending the request to and then implement that route in express.
I'm quite new to node.js, so my apologies if this is a potentially stupid question. I'm aware that when a new page is requested, it triggers a data event, which node can then handle accordingly; on my current project though, I have an html button that triggers a few events, but does not redirect the page. Because of this, node isn't recognizing that this is occurring. Is there any way for me to detect this? Or even, as a workaround, is there any way to call one of my node functions from the javascript embedded in the web page?
Thanks~
you are mixing up two different things, the data event in node which you are talking of is triggered because a network connection is established when you point the browser to your website, data is received and sent from the client to the server and back.
this has nothing to do with clientside ui events, for example a click event on a button.
if you want node to recognize a click on your button you have to send something to the server, you can either use a form, issue an ajax request or use websockets.
for ajax requests with jquery : jquery $.ajax documentation
a popular websockets implementation for node.js is socket.io
If you want to call something in Node from the client side, you can use socket.io to transfer events to Node. Then catch those events, and return the correct data back to the client. Refer to the socket.io "How to Use".
While trying to serve a page from node.js app I hit with this question. how multiple files are serving from a server with a simple request from user?
For eg:
A user enters www.google.co.in in address bar
browser make a request to that url and it should end there with a response. But whats happening is, few more requests are sending from that page to server like a chain.
What I am thinking now is, how my web browser(chrome) is sending those extra requests... Or who is prompting chrome to do it? and ofcourse, how can I do the same for my node.js app.
Once chrome gets the html back from the website, it will try to get all resources (images, javascript files, stylesheets) mentioned on the page, as well as favicon.ico That's what I think you are seeing
You can have as many requests as you want, from the client side (browser), using ajax. Here's a basic example using jQuery.get, an abstraction of an ajax call:
$.get(
"http://site.com",
function(data) { alert(data); }
);