UnionDraw: Multiuser Drawing Pad in JavaScriptįont-family: Helvetica, Verdana, sans-serif ![]() Now here's the source code for UnionDraw. Each Union platform application defines its own attributes and messages, and uses its attributes to share data and its messages to send commands to the server and to other clients. MsgManager.addMessageListener(Messages.PATH, pathMessageListener, this, ) īoth the MOVE and PATH messages are determined by UnionDraw's application code. MsgManager.addMessageListener(Messages.MOVE, moveMessageListener, this, ) To be notified when MOVE and PATH messages are received from other clients, each client registers a message listener for MOVE and PATH, as follows: For example, the following code sends a "MOVE" message to all clients in the "examples.uniondraw" room (arguments for SEND_MESSAGE_TO_ROOMS are listed in the UPC Specification): To send a room message, clients use the MessageManager's sendUPC() command to send a SEND_MESSAGE_TO_ROOMS message to the server. The PATH room message includes the list of points in the new line. A client sends a PATH room message when it wishes to inform other clients in the "examples.uniondraw" room that it has drawn a line. A client sends a MOVE room message when it wishes to inform other clients in the "examples.uniondraw" room that it has moved its drawing pen position. UnionDraw's room messages include the MOVE message and the PATH message. The lower-level API keeps OrbiterMicro's file size small, making OrbiterMicro usable in bandwidth-limited environments, such as mobile devices. Unlike Orbiter and Reactor, OrbiterMicro applications send raw UPC messages directly. The list of available UPC ("Union Procedure Call") messages is documented in the UPC Specification. MsgManager.addMessageListener(UPC.CLIENT_ATTR_UPDATE, clientAttributeUpdateListener, this) To be notified of attribute changes received from other clients, each client registers a message listener for CLIENT_ATTR_UPDATE messages, as follows: For example, the following code changes the attribute named "thickness": To change an attribute, clients use the MessageManager's sendUPC() command to send a SET_CLIENT_ATTR message to the server. When a client changes its "color" attribute to, say, "#666666", all other clients in the "examples.uniondraw" room are instantly notified of the change. The attributes are named, appropriately, "thickness" and "color". UnionDraw's client attributes specify each user's current line thickness and color. For example, a UnionDraw client never receives the position of the ball in the Union Pong room, which also runs on. Because users join "examples.uniondraw", and not any other room, they automatically ignore traffic generated by other applications on the server. For example, a user might receive an update such as: "user 236 drew a line from 40,45 to 65, 50". Upon joining the "examples.uniondraw" room, users automatically begin receiving updates relevant to the drawing application. It gives users a place in which to share information, such as drawing commands and line styles. UnionDraw's room is named "examples.uniondraw". The multiuser aspects of the shared drawing program rely on three key Union platform features: rooms, client attributes, and room messages. In this example, we connect to the public test server. ![]() UnionDraw requires access to a Union Server. UnionDraw is broken into two files: an HTML wrapper that provides the drawing canvas and basic user interface, and a JavaScript file that implements the application logic. Stripped of comments and line breaks, the code is about 350 lines of client-side JavaScript, and requires no server-side programming. Support for in Internet Explorer 8 is provided by Google's ExplorerCanvas. ![]() The drawing pad works in Firefox 3+, Chrome 1+, Safari 4+, iPad, iPhone 3+, Android 2.1+, Internet Explorer 8+, and Opera 9.5+. Where WebSocket is not supported, OrbiterMicro automatically falls back to Union platform's binary request model for responsive two-way communication over traditional HTTP. For maximum speed, the connection to Union Server is made over WebSocket in browsers that support it. To manage communication between users, the JavaScript code uses OrbiterMicro, which connects to Union Server. The drawing pad updates in realtime when any connected user draws a line. This example shows how to create a simple multiuser drawing pad (aka shared whiteboard, multiuser sketchpad, or collaborative painting tool) using pure JavaScript and HTML5's tag. OrbiterMicro Examples Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |