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

Last Update:2013-12-17 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.

 
 
  
  <! Doctype html>
  
  <Html>
  
  <Head>
  
  <Meta charset = "UTF-8">
  
  <Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
  
  <Script type = "text/javascript" src = "js/jquery. event. drag-2.0.js"> </script>
  
  <Script src = "http: // localhost: 4000/socket. io/socket. io. js"> </script>
  
  <Script type = "text/javascript" src = "scripts. js"> </script>
  
  <Link rel = "stylesheet" href = "style.css"/>
  
   
  
  <Title> HTML5 Canvas + Node. JS Socket. io </title>
  
  </Head>
  
  <Body>
  
  <Article> <! -Our canvas will be inserted here --> </article>
  
   
  
  <! -- Scripts required -->
  
  <Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
  
  <Script type = "text/javascript" src = "js/jquery. event. drag-2.0.js"> </script>
  
  <Script src = "http: // localhost: 4000/socket. io/socket. io. js"> </script>
  
  <Script type = "text/javascript" src = "scripts. js"> </script>
  
  </Body>

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

 
 
  
  App = {}
  
   
  
  ###
  
  Initialization
  
  ###
  
  App. init =->
  
  App. canvas = document. createElement 'canvas '# create a <canvas> element
  
  App. canvas. height = 400
  
  App. canvas. width = 800 # increase the size
  
  Document. getElementsByTagName ('Article') [0]. appendChild (App. canvas) # attach it to the DOM
  
   
  
  AppApp. ctx = App. canvas. getContext ("2d") # store the context
  
   
  
  # Set some parameters for our line chart
  
  App. ctx. fillStyle = "solid"
  
  App. ctx. strokeStyle = "# bada55"
  
  App. ctx. lineWidth = 5
  
  App. ctx. lineCap = "round"
  
   
  
  # Plotting Functions
  
  App. draw = (x, y, type)->
  
  If type is "dragstart"
  
  App. ctx. beginPath ()
  
  App. ctx. moveTo (x, y)
  
  Else if type is "drag"
  
  App. ctx. lineTo (x, y)
  
  App. ctx. stroke ()
  
  Else
  
  App. ctx. closePath ()
  
  Return

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.

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