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

后端 未结 4 663
渐次进展
渐次进展 2020-12-23 01:44

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 her

相关标签:
4条回答
  • 2020-12-23 02:13

    Definitely check this out:

    http://wesbos.com/html5-canvas-websockets-nodejs/

    0 讨论(0)
  • 2020-12-23 02:22

    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).

    0 讨论(0)
  • 2020-12-23 02:28

    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.

    0 讨论(0)
  • 2020-12-23 02:39

    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).

    0 讨论(0)
提交回复
热议问题