Socket.io應用之聯網拖拽遊戲

時間 2020-08-11

原文原文鏈接

服務器端代碼：javascript

const express=require('express');
const http=require('http');
const sio=require('socket.io');
const app=express();
const server=http.createServer(app);
app.use(express.static(__dirname));
app.get('/',function(req,res){
    res.sendFile(__dirname+"/drag.html");
});
//使用socket.io實現雙向通訊
const io=sio.listen(server);
io.on('connection',function(socket){
    //socket對象是指當前瀏覽器和服務器間鏈接的socket對象
    //每個客戶端鏈接都有本身的一個socket對象
    //在服務器端，相應客戶端的move事件
    socket.on('move',function(data){
        //console.log(data);
        //向其餘全部的客戶端發送一個moveall事件，傳遞座標數據
        socket.broadcast.emit('moveall',data);
    })
});
server.listen(3000,function(){
    console.log('listening inport 3000...')
})

客戶端代碼：css

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="socket.io.js"></script>
	<style type="text/css">
		#box {width:100px; height:100px; background:red;position:absolute;}
	</style>
</head>
<body>
	
	<div id="box">
	</div>
	<script type="text/javascript">
		//創建和服務器間的鏈接
		var socket=io.connect('http://localhost:3000');

		var box=document.getElementById('box');
		//定義全局變量
		var divX=0;//div的橫座標
		var divY=0;//div的縱座標
		var mouseX=0;//鼠標 橫座標
		var mouseY=0;//鼠標縱座標
		var sw=false;//表示開關
		//綁定mousedown事件，鼠標按下，獲取到元素的座標信息
		box.onmousedown=function(evt){
			var e=evt || window.event; //兼容ie和普通瀏覽器
			//獲取div位置
			divX=this.offsetLeft;//得到不帶單位的值
			divY=this.offsetTop;
			//獲取鼠標位置
			mouseX= e.clientX;//e.pageX
			mouseY= e.clientY;//e.pageY
			//開啓開關
			sw=true;
		};
		//綁定mousemove事件
		box.onmousemove=function(evt){
			var e=evt || window.event;
			//若是開關sw開啓
			if(sw){
				//dis座標變化值
				var disX= e.clientX-mouseX;
				var disY= e.clientY-mouseY;
				box.style.left=divX+disX+'px';
				box.style.top=divY+disY+'px';
			}
			//向服務器端發送move事件，同時將box的位置信息發送過去
			socket.emit('move',{
				x:box.offsetLeft,
				y:box.offsetTop
			});
		};
		//綁定mouseup事件
		document.onmouseup=function(){
				sw=false;
		}

		//註冊moveall事件，以響應服務器端發送回來的moveall事件
		socket.on('moveall',function(data){
			//設置box座標值便可
			box.style.left=data.x+"px";
			box.style.top=data.y+"px";

		});
	</script>
</body>
</html>

　　實現了聯網拖拽效果：html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。