web page with multiple users or sessions - javascript

I'm working on a project where I want 1-to-n number of people to be able to access the same instance of a web page simultaneously.
An example of this would be something like iscribble.net where a person can create a drawing board, and other users can enter this board and draw simultaneously on the same board and chat etc...
what is this called? I can't find the right search term to look up a tutorial or something

You might try "real-time collaboration," which is often achieved through WebSockets or similar technology.
Socket.IO is a popular JavaScript implementation of WebSockets.

What you're looking for is indeed websockets. However, push notifications, depending on complexity and interaction of your idea may be what you really need. There are different services that offer these things, as well as many open source solutions that come packaged with such capability.
Parse.com is great for a beginner for a small push enabled app with a limited number of requests. (I do not work for Parse).
A websocket app in my opinion is for an advanced developer even when the websockets are handled by a server side game solution with functionality ready to go. I'd check out push on parse.com first in a prototype to get your feet wet and see if it works.

Related

The concept of creating a news feed

I am currently using meteor.js for a social networking application that I am building. Currently I am struggling to find the best way to design a newsfeed for my users. Users are able to follow each other and create posts that should theoretically go to their followers. I have come up with two possible concepts that would work theoretically.
I. When a users makes a post the post goes into the global database which every user is subscribed and listening to, and whenever a post is added the user checks to see if the parent if they are following the parent of the post, and if they are they display it onto their newsfeed.
This way seems horribly inefficient, but it is a way.
II. The other way would be for each user to have their own little "hub" or each user would just subscribe to and listen for change in the user's hub.
This way seems better but I would have to do a for-loop on startup and subscribe to each user manually. Which may cause a slight delay on startup.
I am thinking that option two will work best, but I am wondering if anyone has any suggestions on how to accomplish this task. Or if there is a standard way to go about this. Thanks.
Look at the reywood:publish-composite package. I'm doing something similar in my app and am using this package to essentially perform a join. In your case people are following people so when creating a publication that returns the set of users that a person is following you can at the same time return the union of all their posts.
Building scalable feed technology is quite a hard problem to solve. With Meteor it is even harder because MongoDB doesn't lend itself very well for the storage of relational data, since it is a non-relational database, and creating publications that publish 'joined' data isn't straightforward. A lot of articles have been written about the problem of building scalable feed technology, have you seen my article on using Meteor in combination with Stream to build a solution that fits your needs?
Another route would be to use an open-source framework to create the backend for your feed technology. Have a look at Stream-Framework, the repositories README also has a great list of resources on building scalable feed technology.

Collaborators chat with Google Drive / Realtime API

I am looking to extend a web application using the new real time API in order to support collaboration (javascript). For that purpose I would also like to include a chat which will be available to users collaborating on same document. After extensive search I cannot find parts of the Drive API that can be used for this. Furthermore none of the open-source examples provided by google implement chat functionality.
Is there existing services/code that I can use to intergrade
chat into my application or I would need to implement it?
As mentioned before, the chat should be available to those collaborating on same document.
p.s I do not require any special features, just a simple chat as the one found in google docs etc.
Right now I don't know of any out-of-the-box solution to this problem. Some people have implemented chat in a realtime document by just placing the chat messages in the realtime data model.
This works fine so long as you don't also want to use undo/redo feature. If you are using undo/redo, then people would end up undoing the chat messages.
We are interested in adding some better support for this eventually, but no promises on anything in the short term.
You will need to build your own chat system, as Google just killed off XMPP support on the Chat API (which largely kills off the use of the API). The new Hangouts API does not provide access to Chat ( though some additional methods may come in handy: https://developers.google.com/+/hangouts/ for the dev API).
You are therefore left to your own devices. Fear not, however, writing a chat system is pretty easy. I am about to release a (mostly free) service to do so, so if you want to not have to write the code for it, I can keep you posted.
If, however, you'd prefer to build the code for it, you will most likely want to look into either socket.io or postal.js. both provide the same thing: a pub/sub model. From there, you will need to implement a choice of either:
Long polling: supported by all browsers but a bit clunky
Websockets: not supported by IE8 and below
This will serve as your data transfer.
Two other possible options are paid services: you can retrofit RabbitMQ to do what you want to do (this, however, will seem clunky). You can also retrofit the Meteord daemon, which does what you want natively, but has an outdated JS library.
The keyword of all this is pub/sub, though.

Chat system implementation

I am required to implement a live chat system, somewhat similar to Facebook's in that it must:
Allow communication between 2 users
Store messages in an inbox/sent box
Store messages in inbox, marked unread if the user is offline when a message is sent
A language/spam filter must also be active, as needs to monitor communication involving minors.
Ideally, this will work on most devices/browsers including mobile access.
I pretty much have a blank canvas for this project in terms of what OS/software to use.
Having done a bit of research it seems like there's a few options / things to think about?
PHP/AJAX long polling (Comet-style) with a standard LAMP stack storing messages in a mysql DB
LEMP stack (nginx)using the HTTP Push Module, again Comet-style server with a php backend storing messages in a mysql DB
Node.js?
HTML5 interface to maintain browser/device support?
Best DB system for this? Some people suggested mongoDB?
Some people also suggested utilising MemCacheQ to boost performance.
What are your thoughts this? Any suggestions?
Check out SignalR as the way of passing the messages between clients, it's the easiest way to create a chat application.
This sounds like the sort of thing that the MEAN stack (MongoDB, Express.js, Angular.js, Node.js) combined with either socket.io, or lightstreamer would be good at. Lightstreamer is supposedly faster and more scalable than socket.io (and their live demo's don't make me doubt that), it also has a page in their documentation discussing PhoneGap (they handle phones that don't support WebSockets...which is useful, because, as I understand it, WebSockets aren't supported by most phones)
This isn't my area of expertise though, but it may be worth researching.

Turn based multiplayer for iOS using CouchDB and IrisCouch

Me and my startup app company is working on a turn based multiplayer iPhone application. Let it be said that neither one of us have any database, or server, knowledge whatsoever. Though, we are willing to learn.
The flow of the game will be similar to such games as: WordFeud, WordsWithFriends, Rumble etc.
Let me start of by where a lot of searching on the web has gotten us:
We have decided to use CouchDB as a tool for storing information about users, game sessions and other stuff. CouchDB is an open source noSQL database system. The reason is that we have been taught, that it should support a lot off concurring users. Besides, that it scales - we are hoping to go big, of course.
Our CouchDB, is hosted on IrisCouch. IrisCouch is an "in cloud" hosting service designed for running CouchDb.
So, we've got a CouchDB server up and running, and we know the basics on how to query data from the server.
Our biggest confusion right now, is how we should set up the system to work according to best practices. Right now we are at the point where we are able to receive and submit data to the server.
Our game is supposed to have Facebook integration, so that the users can register via our app or through Facebook. After that they can play with random matched opponents, or play with friends. After a match is started, one player will get a set of question to be asked, after he has answered, the other player should be notified, through push notification, that it's their turn. After a few rounds the game is finished.
At this point, we think this might be the best solution for the flow of the application:
A user connects to another user -> a game session is opened as a
document in a database called "games".
The newly created document contains both player names, question,
answers etc
A field named "whos_turn" decides which of the two players turn it is.
After the game has ended, the session is erased.
Again, and as you may see, we are in the dark as of how to really do it, but this is the general idea.
So, my questions goes as following:
Is it best to query the data directly from the iPhone application, or through a web service?
What is the best way to set up the database, to best manage the flow of the application?
Any information, that could lead us closer will be gladly appreciated :)
In advance, thank you!
Olav Gundersen
EDIT#1 : Our Objective-C programmer managed to connect two iPhone devices using CouchDb. The iPhone application consists of a table view, that has a concurrent connection with the database, so that when someone POST to the database, it shows up on the tableview of all the other connected phones. Behold: a severely ineffective chat system.
If is a multiplayer you would need to have the app to communicate to the remote iriscouch.db but I am concerned by the point where you state that neither you or your friends have any database experience. You are willing to learn so I think the best place to start is:
http://guide.couchdb.org/editions/1/en/index.html
There are several issue you might find with scalability if you plan to erase documents continuously. DB Size can be considerable on couchdb and you will need to compact &cleanup the db regularly. But I don't think is a major issue for now as this is at a start up level.
The question "best way to setup the database and best manage the flow of the application" should be addressed by your team. If you do not have someone with any database experience you should try to find someone willing to help you. It should be someone with extensive experience in databases. You might find some fairly reasonable professionals at http://www.odesk.com
In total honestly I don't think you will be successful if you don't have such a figure - either as a freelancer or contributor - to help you having a solid database logic in the game that will ensure a great user experience.
For example: have you considered the latency-delay issue by using a db based in the USA (Iriscouch) vs. where your users are located?
For this reason you might want to do as much as possible client side (embedded database like sqlite or touchDB that is essentially couchDB for iPhone)
For an iPhone application you might want to try TouchDB that is made exactly for that
https://github.com/couchbaselabs/TouchDB-iOS (caveat: being that you need connectivity to check turns etc this might not be the ideal solution but it could work to store some information locally).
To lay this out you would need someone with experience with couchdb to set up a proper, usable application. There is nothing wrong in being enthusiast about your idea but to make it a success you need a technical mind in the database side. Of course you might be well capable to learn this yourself. After reading the CouchDB book you should be in position to create a basic flow to fit your needs.
Of course other more experienced users might come with a more comprehensive answer or a sample layout but I don't think would be the best approach. Even if someone posts a full layout of the doc structure and how to query it how are you going to service the app if something goes awry e.g. sessions don't get deleted, conflicts etc. ? hence my sincere advice to get some ad-hoc expertise for your case.
This might also result in analyzing suitable alternatives. I don't think you should buy into the idea that CouchDB can scale and hence is the best/only option for you (of course this might well be the case and if you feel that is a good option..go for it). For example twitter, google adwords and many other online apps are using mysql to store their data so for sure CouchDB is not the only database that can scale!
I think this demo app could be a good example to follow: iOS Couchbase Demo

Real-time collaborative drawing whiteboard in HTML5/JS and websockets?

I'm trying to put together a small(ish) summer school project for some of my advanced students and am researching how to do it best and what to use - hopefully somebody here could point me in the right direction.
What we are interested in is researching if HTML5 came far enough to create a real-time collaborative drawing whiteboard in it - purely by using web technologies without plugins (so CSS, HTML5/DOM and Javascript). What we'd ultimatelly strive for is this - for example have an online canvas/page on a central server displayed on a big screen in the classroom. Then our students/users would take out their smartphones, load the page in their mobile browsers (I'm perfectly ok with limiting this to webkit mobile browsers for now) and draw on their screens with touch/fingers (or on PCs with the mouse - guessing this doesn't make a lot of difference) and it would get updated in real time for everybody - both on their screens and on the central big screen in the classroom.
I'm guessing push/get requests would be too slow for this - could it be solved by websockets? Does anybody have any good JS libraries to recommend for this?
Also what would the ideal (but easier for students to understand) architecture look like. Lets say you have 30 simultaneous users in a clasroom - each of them would connect with websockets to the server and the server would pool/combine all of their requests into one and then return the combined file (some sort of minimal JSON or even just coordinates) for every connected user?
Would websockets and (I'm guessing) canvas be able to take this? So that everything still looks snappy? Are there (jQuery-like) JS libraries available to make our lives easier - or do you think its something thats too complex for a 2-week summer school project?
here's a tutorial describing how to create a multiuser whiteboard with javascript/html5/canvas:
http://www.unionplatform.com/?page_id=2762
the example uses a collaboration framework and server named "union platform". even if you decide to roll your own server and client framework, the messaging in the example should give you an idea of how to structure the code.
for an apples-to-apples speed comparison of websocket vs comet, see:
http://www.unionplatform.com/?page_id=2954
in my tests, a basic ping over WebSocket is normally about twice as fast as the ping over http. both websocket and coment are more than fast enough to create a collaborative whiteboard.
Definitely check this out:
http://wesbos.com/html5-canvas-websockets-nodejs/
For the networking side of things, try looking at node.js for the server, along with socket.io for the client.
As for the drawing itself, a few popular choices are processing, raphael and cakejs.
When it comes to the implementation, you may want to look at how networked games deal with similar issues (gamedev.stackexchange.com could be useful).
What you are going to be doing is essentialy the same as a simple top down multiplayer game, with each 'player' in this case being a students fingertip, and the 'level' being the canvas. You need to update the server as to their position and whether or not they are 'shooting' (drawing).
I'm guessing push/get requests would be too slow for this - could it be solved by websockets? Does anybody have any good JS libraries to recommend for this?
If you need real-time infrastructure I've created a list of real-time technologies which might be of use to you. These include hosted service, such as Pusher who I work for, and self-install technologies such as WebSocket and Comet solutions.
WebSocket sounds like the idea choice of technology for you since they have become part of HTML5 and offer the most efficient for of realtime bi-directional communication between a web server and a browser (or other clients).
Also what would the ideal (but easier for students to understand) architecture look like. Lets say you have 30 simultaneous users in a clasroom - each of them would connect with websockets to the server and the server would pool/combine all of their requests into one and then return the combined file (some sort of minimal JSON or even just coordinates) for every connected user?
It sounds like you should probably store the current state somewhere and on the initial load of the application display that state. Then use your real-time infrastructure to send deltas on that state, or if it's a drawing on canvas, just information on the line etc. that has been drawn and information about who drew it.
Would websockets and (I'm guessing) canvas be able to take this? So that everything still looks snappy? Are there (jQuery-like) JS libraries available to make our lives easier - or do you think its something thats too complex for a 2-week summer school project?
Real-time collaborative drawing is most definitely achievable and there have been a number of examples created of this. A google bring up a number of possibilities.
If this technology is completely new to you and you would prefer to concentrate on building the collaborative application then I would consider using a service for your app rather than going through the hassle of learning how to install and configure, or even code, your own infrastructure (I'm not just saying this because I work for such a service. I honestly think it makes the most sense).

Categories

Resources