Home > Developer > JavaScript

Use Web socket and Node. js to implement real-time drawing of the HTML 5 canvas (1)

Source: Internet
Author: User
Tags node server
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Web socket and Canvas are two cool features currently implemented in browsers. This tutorial briefly describes how the two work, and creates a real-time canvas Based on Node. js and Web socket. For simplicity, I will use CoffeeScript to write all the code. If you prefer to use traditional JavaScript, you just need to take a look at the corresponding. js file. For the same reason, I also discarded CSS.

Download Code (https://github.com/wesbos/websocket-canvas-draw) from GitHub)

Introduction to detailed screen playback speed-up tutorials

Http://www.youtube.com/watch? Feature = player_embedded & v = n7wQsLu_k00

Cross-device/browser compatibility

Http://www.youtube.com/watch? V = oI9AahO9vDY & feature = player_embedded

Server

The first thing we need to do is to create a Web socket server. To this end, we need to use Node. js and module Socket. io. Socket. io makes it easy to build and run Web Socket server tasks. It even provides the Flash fallback function for browsers that do not support native Web sockets ). In this tutorial, we will only use browsers that support elements.

If you have not installed Socket. io before, make sure that it has been installed. Therefore, enter npm install socket. io in your terminal.

Now, we may wish to establish a Web socket server. Create the server. coffee file and use the following configuration.

Io = require ('socket. io '). listen (4000)

Io. sockets. on 'connection', (socket)->

Compile your coffeescript, return to your terminal, and enter node server. js .. Now you have a Web socket server running through port 4000.

If you enter the local host: 4000, the following results are displayed:

Client

First, we will not immediately let the index.html file be set up and run. In addition to some basic tags, I also added jQuery, the Socket currently provided from our server. io JS file, jQuery plug-in for drag events, and our own scripts. js file.

 
 
    
  
  
  1. <! Doctype html>
    2. 
  
  
  2. <Html>
    3. 
  
  
  3. <Head>
    4. 
  
  
  4. <Meta charset = "UTF-8">
    5. 
  
  
  5. <Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    6. 
  
  
  6. <Script type = "text/javascript" src = "js/jquery. event. drag-2.0.js"> </script>
    7. 
  
  
  7. <Script src = "http: // localhost: 4000/socket. io/socket. io. js"> </script>
    8. 
  
  
  8. <Script type = "text/javascript" src = "scripts. js"> </script>
    9. 
  
  
  9. <Link rel = "stylesheet" href = "style.css"/>
    10. 
  
  
  10.  
    11. 
  
  
  11. <Title> HTML5 Canvas + Node. JS Socket. io </title>
    12. 
  
  
  12. </Head>
    13. 
  
  
  13. <Body>
    14. 
  
  
  14. <Article> <! -Our canvas will be inserted here --> </article>
    15. 
  
  
  15.  
    16. 
  
  
  16. <! -- Scripts required -->
    17. 
  
  
  17. <Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    18. 
  
  
  18. <Script type = "text/javascript" src = "js/jquery. event. drag-2.0.js"> </script>
    19. 
  
  
  19. <Script src = "http: // localhost: 4000/socket. io/socket. io. js"> </script>
    20. 
  
  
  20. <Script type = "text/javascript" src = "scripts. js"> </script>
    21. 
  
  
  21. </Body>
    22.

Since our servers have been built and run, we can write some code for drawing the canvas. Create a new file named scripts. coffee. All the following code is executed in the App. init () method. Once the jQuery document is ready, we will trigger this method.

Create a Canvas Element

# Build our application with its own namespace

 
 
    
  
  
  1. App = {}
    2. 
  
  
  2.  
    3. 
  
  
  3. ###
    4. 
  
  
  4. Initialization
    5. 
  
  
  5. ###
    6. 
  
  
  6. App. init =->
    7. 
  
  
  7. App. canvas = document. createElement 'canvas '# create a <canvas> element
    8. 
  
  
  8. App. canvas. height = 400
    9. 
  
  
  9. App. canvas. width = 800 # increase the size
    10. 
  
  
  10. Document. getElementsByTagName ('Article') [0]. appendChild (App. canvas) # attach it to the DOM
    11. 
  
  
  11.  
    12. 
  
  
  12. AppApp. ctx = App. canvas. getContext ("2d") # store the context
    13. 
  
  
  13.  
    14. 
  
  
  14. # Set some parameters for our line chart
    15. 
  
  
  15. App. ctx. fillStyle = "solid"
    16. 
  
  
  16. App. ctx. strokeStyle = "# bada55"
    17. 
  
  
  17. App. ctx. lineWidth = 5
    18. 
  
  
  18. App. ctx. lineCap = "round"
    19. 
  
  
  19.  
    20. 
  
  
  20. # Plotting Functions
    21. 
  
  
  21. App. draw = (x, y, type)->
    22. 
  
  
  22. If type is "dragstart"
    23. 
  
  
  23. App. ctx. beginPath ()
    24. 
  
  
  24. App. ctx. moveTo (x, y)
    25. 
  
  
  25. Else if type is "drag"
    26. 
  
  
  26. App. ctx. lineTo (x, y)
    27. 
  
  
  27. App. ctx. stroke ()
    28. 
  
  
  28. Else
    29. 
  
  
  29. App. ctx. closePath ()
    30. 
  
  
  30. Return
    31.


This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
where to use node js node js 5 download websites use node js node js use cases use node js practical node js building real world scalable web apps node js host html
Related Article
JavaScript solution to the eight Queens Problem method summar...
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
The html space symbol nbsp; ensp; emsp; introduces and implem...
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More