Question

我想创建一个.io游戏。因此，pubnub的替代方法是在http://p2p-server-by-sentifico.herokuapp.com/中托管广播服务器。该服务器将socket.emit("msg")发送到连接到该服务器的所有客户端，但是...游戏进展很糟糕。多维数据集没有出现，这给了我一个奇怪的错误，所以有我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<link rel="icon" type="image/png" href="https://i.ibb.co/sHNyD0b/tecnocomunist-star.png">
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="464161591015-669suu0sat7n9c1lq2g6b3mn174g5sej.apps.googleusercontent.com">
<div style="position: absolute; left: 0px; top: 0px"class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
k=[]
obj={}
onkeydown=onkeyup=(e)=>{k[e.keyCode]=e.type=="keydown"}
socket=io("http://p2p-server-by-sentifico.herokuapp.com/")
onSignIn=(googleUser)=>{
 c=document.createElement("canvas")
 document.body.style.margin=0
 document.body.appendChild(c)
 ctx=c.getContext("2d")
 profile=googleUser.getBasicProfile()
 console.log('ID: ' + profile.getId()) // Do not send to your backend! Use an ID token instead.
 console.log('Name: ' + profile.getName())
 console.log('Image URL: ' + profile.getImageUrl())
 console.log('Email: ' + profile.getEmail()) // This is null if the 'email' scope is not present.
 emailID=profile.getId()
 username=profile.getName()
 imgURL=profile.getImageUrl()
 x=Math.floor(Math.random()*10-5)*128
 y=Math.floor(Math.random()*10-5)*128
 render=()=>{
  requestAnimationFrame(render)
  c.width=innerWidth
  c.height=innerHeight
  socket.emit("msg",{
   id:emailID,
   username:username,
   imgURL:imgURL,
   x:x,y:y  
  })
  if(k[37]){x-=5}
  if(k[38]){y-=5}
  if(k[39]){x+=5}
  if(k[40]){y+=5}
  for(x2=Math.floor((x-32*40)/32)*32-x+innerWidth/2-16;x2<innerWidth;x2+=32){
   for(y2=Math.floor((y-32*40)/32)*32-y+innerHeight/2-16;y2<innerHeight;y2+=32){
    ctx.lineWidth=4
    ctx.strokeStyle="rgba(200,200,200,1)"
    ctx.strokeRect(x2,y2,32,32)
   }
  }
  for(i in obj){
   img=document.createElement("img")
   img.src=obj[i].imgURL
   ctx.drawImage(img,obj[i].x-x+innerWidth/2-64-16,obj[i].y-y+innerHeight/2-64-16,128,128)
   ctx.lineWidth=4
   ctx.strokeStyle="rgba(0,0,0,1)"
   ctx.strokeRect(obj[i].x-x+innerWidth/2-64-16,obj[i].y-y+innerHeight/2-64-16,128,128)
  }
 }

 render()

 socket.on("msg",(e)=>{
   obj[e.id]={
    username:e.username,
    imgURL:e.imgURL,
    x:e.x,y:e.y
   }
 })
}
</script>

这是错误：

undefined:1 GET http://drwerenverlivitz.atspace.cc/game.io/undefined 404 (Not Found)

那...我该怎么办？

Answer 1

最后，我找到了解决方案;）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<link rel="icon" type="image/png" href="https://i.ibb.co/sHNyD0b/tecnocomunist-star.png">
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="464161591015-669suu0sat7n9c1lq2g6b3mn174g5sej.apps.googleusercontent.com">
<div style="position: absolute; left: 0px; top: 0px"class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
k=[]
obj={}
onkeydown=onkeyup=(e)=>{k[e.keyCode]=e.type=="keydown"}
socket=io("http://p2p-server-by-sentifico.herokuapp.com/")
onSignIn=(googleUser)=>{
 c=document.createElement("canvas")
 document.body.style.margin=0
 document.body.appendChild(c)
 ctx=c.getContext("2d")
 profile=googleUser.getBasicProfile()
 console.log('ID: ' + profile.getId()) // Do not send to your backend! Use an ID token instead.
 console.log('Name: ' + profile.getName())
 console.log('Image URL: ' + profile.getImageUrl())
 console.log('Email: ' + profile.getEmail()) // This is null if the 'email' scope is not present.
 emailID=profile.getId()
 username=profile.getName()
 imgURL=profile.getImageUrl()
 x=Math.floor(Math.random()*10-5)*128
 y=Math.floor(Math.random()*10-5)*128
 render=()=>{
  requestAnimationFrame(render)
  c.width=innerWidth
  c.height=innerHeight
  socket.emit("msg",{
   data:{
    id:emailID,
    username:username,
    imgURL:imgURL,
    x:x,y:y
   }
  })
  if(k[37]){x-=5}
  if(k[38]){y-=5}
  if(k[39]){x+=5}
  if(k[40]){y+=5}
  for(x2=Math.floor((x-32*40)/32)*32-x+innerWidth/2-16;x2<innerWidth;x2+=32){
   for(y2=Math.floor((y-32*40)/32)*32-y+innerHeight/2-16;y2<innerHeight;y2+=32){
    ctx.lineWidth=4
    ctx.strokeStyle="rgba(200,200,200,1)"
    ctx.strokeRect(x2,y2,32,32)
   }
  }
  for(i in obj){
   img=document.createElement("img")
   img.src=obj[i].imgURL
   ctx.drawImage(img,obj[i].x-x+innerWidth/2-64-16,obj[i].y-y+innerHeight/2-64-16,128,128)
   ctx.lineWidth=4
   ctx.strokeStyle="rgba(0,0,0,1)"
   ctx.strokeRect(obj[i].x-x+innerWidth/2-64-16,obj[i].y-y+innerHeight/2-64-16,128,128)
  }
 }

 render()

 socket.on("msg",(e)=>{
   obj[e.data.id]={
    username:e.data.username,
    imgURL:e.data.imgURL,
    x:e.data.x,y:e.data.y
   }
 })
}
</script>

Answer 2

如果我们访问网站并分析错误，它将告诉我们错误在index.js的{{1}}行中。

在这一行上，我们有50，...在那儿。

我在控制台中输入了img.src=obj[i].imgURL，它返回了我

obj

有一个问题：obj [i]似乎是不确定的。当您在套接字接收器的第60行定义它时，问题应该出在服务器端而不是客户端端。

编辑：刚刚为socket.on（'msg'）创建了另一个接收器。再次出现在服务器端，因为服务器正在向我们发送输入，但没有任何内容...

但是，请尝试在服务器端使用以下代码：

{
undefined:
username: undefined
imgURL: undefined
x: undefined
y: undefined
}

它应该可以工作！

为什么正方形没有出现在此socket.io html文件中？

2 个答案: