Multi user HTML5 Canvas sketching with JS - javascript

Anyone knows a good tutorial/js plugin to create a multi user html5 sketch web application?
Would be nice to have cross browser compatibility, preferably without any tools that need to be installed server side.
If the latter is not possible, I would also be happy if the application just saves the user x's sketch so that next time someone loads the app, it would show user x's sketch on startup.
Thanks for your advise.
PS. I have looked at Mr. Doob's, he uses node.js, unfortunately my hosting does not support this just yet. Hence I am asking for a solution that need no server side installation. Also the multi user drawing pad by Union Platform seems to fit the bill, but unfortunately it also requires something to be installed.

If you're willing to shift to a new web host for this application you can use Heroku. Heroku is free and supports Node.js.
I created a multi-user Agile project management whiteboard using WebSockets and Node.js and found a 624% increase in requests per second vs using HTTP. I use MongoDB on the back end which allows you to store data as serialized JSON... this means you can send JSON between client <-> Server <-> Database with no parsing (very fast).
Hope this helps!

The reason Mr. Doob's implementation uses Node.js is because node is great at this kind of things. Since this is going to involve delivering realtime changes to different users, your best bet is to use Comet/Ajax-Push/Longpolling. And if you want to support multi-window usage(multiple browser tabs having your sketchpad), you would need to implement http connection pooling to get around the connection limits set by browsers as per http standard.

If you can't use websockets which are fairly new anyways, Then I would suggest using ajax polling of some sort. Basically use ajax calls based on a delay.
This wikipedia article shows some of the various options you should do further reading into.
http://en.wikipedia.org/wiki/Comet_%28programming%29

Related

jQuery alternatives for multiplayer games?

First off, I am not asking for any code or anything like that.
all I need is some advise.
I'm creating a roulette game and everything in my roulette game is based on jQuery.
however, as we all know, jQuery is client side so I was thinking about using AJAX to send some details back to server and from the server to the users browser so I can make this roulette game work in "multiplayer" fashion... But the issue is that I don't think its possible to send the roulette's wheel animation to the server and back to users browser so I am a bit confused about this!
In my research I came across some information (old ones) about using node.js and jquery together! I don't know if this is possible or how easy it would be to use my jquery code in node.js as I have never used node.js before..
so the question that i have is:
based on the information i provided above and my requirements, what are my options?
can I use AJAX to achieve what i am trying to do and if so, a bit
information would be great.
if AJAX is out of question, is it possible to use my jquery code in
node.js to achieve what I am trying to do?
ANY ADVISE WOULD BE APPRECIATED.
P.S. I don't want to use HTML5 as 1st I don't know much about HTML5 and also, some devices, browsers do not support it.
Thanks
The best way is to use websockets to ensure real time communication. One of the best alternatives for implementing that could be using a server under node.js. Have a look to this video from Code School node.js tutorials: https://www.youtube.com/watch?v=mtDK4jf4RS0 where is ilustrated how to implement a real time chat. Your problem is based on the same.
There are three parts to a multiplayer game displayed in a browser:
client-side display,
server-side data management,
client-server communication.
If you're already set on your display technology (jQuery), then you're probably going to use $.ajax() for client-server communication. However, technologies used for server-side data management are completely up to you and they don't necessarily have any connection to the technologies used for display and communication (meaning the traditional communication initiated by client).
Basically, use any kind of server technology stack you like. Node.js might do just fine but there are many other viable alternatives. They just need to support communication with the client.
So, to be absolutely clear, your question doesn't really make sense. You might use jQuery in the client and Node.js on the server, but they will never really "work together". They will manage completely separate parts of your application and connect through protocols not specific to either of them.
As for the animation, the animation itself is solely a client-side problem. If you want to "synchronize the animation" across multiple clients, you can let the clients communicate with the server, but they only ever need to send/receive plain data. Then you adjust the client-side animation based on the received data.
As another poster points out, websockets are a better fit for this than regular client-initiated HTTP requests. Not because of "the animation", but because you want all the clients to receive the information about the start of betting at the same time.
I am also developing a MMO game using javascript only. Firstly, there are two different types of javascript here. Usual client side javascript (the one you already know) and the server side javascript (i.e. Node.js).
You will need to develop both client and server before connecting them with jQuery's Ajax. So you need to study Node.js before designing overall architecture of your game.
I read many Node.js tutorials and watched many youtube tutorial videos but I was still confused, before I really sat down and read a good textbook that explained from basics, one like below. Try to get hold of it from your local library.
Express web application development learn how to develop web applications with the Express framework from scratch by Hage Yaapa
Express is the popular framework that runs on Node.js now. So it's worth getting familiar with Express Framework. Once you understand how express app works (not so difficult), you will see how you can frame your game structure like I did :)
In order for many clients to share same animation, there must a server that synchronizes the game state. Ajax can only link between server-client communication in my understanding. There is no mechanism that connects between clients. The clients ask server what number was the result of roulette roll and show the corresponding animations.
Yes, you can use NodeJS and jQuery together.
NodeJS is server-side, meaning that you set up a server (a lot of people use the Express module, which is easy to use), which serves content to clients asking for it. Your server-side code can be in any language supporting sockets, not just NodeJS. But NodeJS is easy to use if you know JS already.
jQuery is client-side, meaning that it's executed by the user's browser, and may or may not have a server-side component (if it doesn't need it), or it might have one where it sends requests to the server-side code. When it requests a page from the server, it can be static content (like when you request index.html) or dynamic via an AJAX request. Client-side browser code must be HTML/CSS/JS (you can't make Firefox or Chrome interpret C, for example).

Understanding Node.js use cases

Trying to understand using node.js for a web applications.
Are there basically 2 major uses cases, i.e.:
The entire system is written in node, so you have functions for login, logout, password recover, and whatever else the web app does. All of this is written in javascript?
You use node.js only for sending the client updates, to have a real-time effect on the app. But the rest of the application is written in e.g. rails or django
Please tell me if I understand this correctly:
In terms of other technologies used with node.js, you tend to see people using node.js as the backend server, socket.io on the client side to establish a cross-browser long running ajax call library, and then you might use backbone.js for your client mvc pattern.
Is this right?
Basically speaking, it is just a tool to run javascript code server side. What you do with it is up to you. Many are using it as a complementary system since it's relatively new, but it's perfectly possible to run an standalone app with node.js.
It's said to be particularly good at handling concurrent connections, which is why it is often recommended to handle real-time jobs within an app, but there is no "obligation" so to speak to use it for this specific use case, it's just one thing you can do.
As with everything, the best way to understand it is to use it, so don't be afraid to play around with it.
Use case for Node js as we are using in our Application
Skype like voice & video chat on chrome browser using node js

Connect server hosted webapp to local websocket

Has anyone an idea for the following scenario?
I have a RIA-Webapplication (realized in ExtJs). What I want to implement is the possibility to use local ressources like card readers or fingerprint readers or other serial devices and filesystem access.
I thought about implementing this with a local websocket service which has to be installed by our customer before using our RIA the first time. When the webapp is loading it should scan the local machine if a websocket service is available and connect to it.
After that, local events (like new card is beeing read or recognized new finger) should be passed to the browser via websocket connection.
Any ideas how to get started with such a solution?
I have made something like that. Besides the obvious things such as read/write/poll data from the card-readers and so on, you would have to either implement everything yourself or, use a library for technology you are going to employ for your web-server. So, if you use a LAMP solution, i think there are some web-socket libraries for PHP that you can use. However, if you do everything by yourself then you have to implement everything from hand-shaking, to creating data packets. I have done everything from scratch by using .NET and it provides a number of useful libraries such as hashing. Java also would be a good option and have those kind of libraries as well. In general if you doing everything by yourself i would say the trickiest thing would be to split the data you want to transmit among various data packet. It is not that hard to do things from scratch. The RFC (https://www.rfc-editor.org/rfc/rfc6455) helped me a lot. Hopefully, this helps.

Connecting to postgres database from a phonegap app?

I'm trying to build a phonegap app for ios and android. It's been going well so far but now I hit a major obstacle and I need some help.
I need to connect to a remote Postgres database. I haven't done anything like that before.
Does anyone have any experience/tips for this, or know of any resources which contain relevant information?
From client-side javascript, you can't. Unless phonegap has done something very odd with permissions or provided a PostgreSQL interface (which presumably you'd know about if they had).
What you'll want to do is provide a small server-side wrapper to PostgreSQL that will take requests, convert them to queries and return (presumably) json-formatted results. Oh - and you'll need to think about security too - who can connect, what can they do, does it all need to be encrypted?
If your requirements are simple, this can be easy enough to do in Perl/Python/Ruby etc. or even javascript if you have node.js to hand. With Perl you'd wrap DBIx::Class in a Dancer app - similar modules exist for all the above scripting languages.
Do consider whether you want to run the whole thing over https (let apache handle this for you) - it will avoid issues with passwords/private data being sniffed over wireless connections.
For example, your app would issue an ajax request to: http://myserver/projects/123/messages?limit=20&sort=date
That would be translated into a query into the project-messages table for the last 20 messages sorted by date and wrap the results up as an array of JSON objects (presumably).
You would need to create an API for your data. Then access that API using promises from your js app.
To let the security issues where they belong to (in existing experienced and tested parts of server / client software) and to have a minimum effort of development, I suggest to use some existing lightweight middle ware:
http://restsql.org/doc/Overview.html
It comes with a docker, where any service you require is packed in, thus making it easy to try it out quickly.

options for building a realtime website

I'm going to build an webbased application which is controlling and monitoring tons of realtime data. think about few thousand valves pipes pumps and sensors.
Please list a technology stack you would use to build a realtime website with an educated guess about performance. The environment is 'ideal' all openstandards are available. so no IE6 etc backward compatibility is needed. Current and future proof technologies please.
server side:
database web-server - which one / combination makes it easy to support real-time pushing of data?
client side:
what kind of client environment (javascript Libraries) support showing and updating tons of realtime data?
You can have a look at Goliath
I recommend you have a look into Socket.IO which works best with Node.JS and might be the best fit for handling many long lasting concurrent real time connections. I would say that the choice of the database depends more on where your real time data is coming from and how it is supposed to get in the database.
Me too. So I'm writing a frame work that can do that. It's based on lighttpd front end, and multiple fcgi backend servers. The original Android was also tested with another framework that is based on it. It's open source so you might want to use it as a starting point.
I haven't been able to write a realtime app, but I've dabbled a bit with http://socket.io/ and node.js, and it's a joy to get started with.
App engine has a js channel api which seems nice. You should take a look to see if hosting on app engine is a option.
If you're dealing with "real time" stuff server-side, I recommend clojure for managing concurrent state.

Categories

Resources