Javascript 为什么正方形没有';是否不显示在此socket.io html文件中?
我想创建一个.io游戏。因此,pubnub的另一种选择是在中托管广播服务器。此服务器向连接到此服务器的所有客户端发送Javascript 为什么正方形没有';是否不显示在此socket.io html文件中?,javascript,socket.io,Javascript,Socket.io,我想创建一个.io游戏。因此,pubnub的另一种选择是在中托管广播服务器。此服务器向连接到此服务器的所有客户端发送socket.emit(“msg”),但是。。。比赛进行得很糟糕。多维数据集没有显示错误,这给了我一个奇怪的错误,因此我的代码如下: <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <link rel="icon" t
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>
所以。。。我能做什么?如果我们在网站上分析错误,它会告诉我们错误在
index.js
的50行
在这一行,我们有img.src=obj[i].imgURL
和。。。我们到了
我在控制台中键入了obj
,它返回了我
{
undefined:
username: undefined
imgURL: undefined
x: undefined
y: undefined
}
所以问题就来了:obj[i]似乎没有定义。当您在套接字接收器的第60行定义它时,问题应该是服务器部分,而不是客户端部分
编辑:刚刚为socket.on('msg')创建了另一个接收器。它再次出现在服务器端,因为服务器向我们发送的输入没有任何内容
但是,请尝试在服务器端使用以下代码:
socket.on('msg', function(message) {
socket.emit('msg', {username: message.username, imgURL: message.imgURL, x: message.x, y: message.y})
})
它应该会起作用 最后,我得到了解决方案;):
k=[]
obj={}
onkeydown=onkeydup=(e)=>{k[e.keyCode]=e.type==“keydown”}
套接字=io(“http://p2p-server-by-sentifico.herokuapp.com/")
onSignIn=(谷歌用户)=>{
c=document.createElement(“画布”)
document.body.style.margin=0
document.body.appendChild(c)
ctx=c.getContext(“2d”)
profile=googleUser.getBasicProfile()
console.log('ID:'+profile.getId())//不要发送到后端!改用ID令牌。
console.log('Name:'+profile.getName())
console.log('Image URL:'+profile.getImageUrl())
console.log('Email:'+profile.getEmail())//如果“Email”作用域不存在,则此值为null。
emailID=profile.getId()
username=profile.getName()
imgURL=profile.getImageUrl()
x=数学地板(数学随机()*10-5)*128
y=数学地板(数学随机()*10-5)*128
渲染=()=>{
requestAnimationFrame(渲染)
c、 宽度=内部宽度
c、 高度=内部高度
emit(“msg”{
数据:{
id:emailID,
用户名:用户名,
伊姆古尔:伊姆古尔,
x:x,y:y
}
})
如果(k[37]){x-=5}
如果(k[38]){y-=5}
如果(k[39]){x+=5}
如果(k[40]){y+=5}
对于(x2=数学楼层((x-32*40)/32)*32-x+innerWidth/2-16;x2这是一个太宽泛的问题,不知道为什么会有4次投票。您做了哪些故障排除来缩小问题的范围?404错误似乎是一个明显的起点!如果我们检查错误,我们可以看到它正在尝试获取,因此您的重定向中可能有错误。但是,当您输入输出io时,我们可以看到代码吗你把它放进去了吗?聊天的代码是:name=prompt(“输入你的名字”)socket=io('https://p2p-server-by-sentifico.herokuapp.com/“)socket.on(“msg”,(e)=>{d.innerHTML+=e.data+”
“})文档。onkeydown=()=>{socket.emit(“msg”,{data:name+”:“+提示符(“输入您的消息”)}
这很好。好的,现在结束这个问题。不,因为这在同一台服务器上工作:@DrWerenverlivitz刚刚编辑了我的答案,希望能对您有所帮助。
socket.on('msg', function(message) {
socket.emit('msg', {username: message.username, imgURL: message.imgURL, x: message.x, y: message.y})
})
<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>