环境搭建
查看环境搭建
搭建服务器
服务器代码如下：
index.js
var app = require('express')();
var http = require('http').Server(app);
var fs = require("fs");
app.get('/', function(req, res){
res.sendFile(__dirname + '/huaban.html');
});
//创建一个io对象
var io = require('socket.io')(http);
//监听连接事件
io.on("connection",function(socket){
console.log("1个客户端连接了");
socket.on("hua",function(msg){
io.emit("huida",msg);
});
});
http.listen(3000, function(){
console.log('server is running in port 3080');
});
客户端
index.html
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="1000" height="1000" id="canvas"></canvas>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var color = ["red","blue","green","black","skyblue","pink","white"];
var mycolor = color[parseInt(Math.random() * color.length)];
canvas.onmousedown = function(){
canvas.addEventListener("mousemove", handler, true);
}
canvas.onmouseup = function(){
canvas.removeEventListener("mousemove", handler, true);
}
function handler(e){
ctx.beginPath();
ctx.arc(e.pageX,e.pageY,5,0,Math.PI*2,true);
ctx.fillStyle = mycolor;
ctx.fill();
//触发事件
socket.emit("hua",{"x":e.pageX,"y":e.pageY,"color":mycolor});
}
var socket = io();
socket.on("huida",function(msg){
ctx.beginPath();
ctx.arc(msg.x,msg.y,5,0,Math.PI*2,true);
ctx.fillStyle = msg.color;
ctx.fill();
});
</script>
</body>
</html>
开启服务器：
node index.js
浏览器打开：http://localhost:3000/
多用户访问，实现公共画板
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
