Socket.io 事件侦听器/事件处理程序 Socket.io

在我放弃这个项目之前，最后一个海尔玛丽。我正在尝试创建一个随机生成的单词表，其中单击的每个单词都会更改为相应的设置颜色。我有随机生成的单词，以及相应的颜色数组。但是，我无法使用 Socket.io 在浏览器中实时单击时将单词更改为相应的颜色 - 我几乎可以肯定这是因为我缺乏 Socket.io 的知识和经验，所以任何帮助/见解都会很棒。

代码如下：

.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
<link href="/style.css" rel="stylesheet"/>
</head>
<body>
<button id="startgame">Start</button>
<div class='game'>
<h1 id='teamsturn'>Red Team Turn</h1>
<h1 id='redcounter'></h1>
<h1 id='bluecounter'></h1>
<h1 id='winner'></h1>
<table id="grid" class="squaregrid">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id='3'></td>
<td id='4'></td>
<td id='5'></td>
</tr>
<tr>
<td id='6'></td>
<td id='7'></td>
<td id='8'></td>
<td id='9'></td>
<td id='10'></td>
</tr>
<tr>
<td id='11'></td>
<td id='12'></td>
<td id='13'></td>
<td id='14'></td>
<td id='15'></td>
</tr>
<tr>
<td id='16'></td>
<td id='17'></td>
<td id='18'></td>
<td id='19'></td>
<td id='20'></td>
</tr>
<tr>
<td id='21'></td>
<td id='22'></td>
<td id='23'></td>
<td id='24'></td>
<td id='25'></td>
</tr>
</table>
</div>
<script src="/button.js"></script>
</body>
</html>

后端

var express = require('express')
var socket = require('socket.io') 
//App setup
var app = express();
var server = app.listen(8000, function(){
console.log('listening to requests on port 8000')
});
//static files
app.use(express.static('public'));
//socket setup
var io = socket(server);
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
const colorsArr = ['red', 'lightgray', 'dimgray','lightgray', 'lightgray','lightgray', 'blue','blue', 'blue', 'red', 'blue','red', 'blue','red', 'blue', 'red', 'red', 'blue', 'red', 'blue','red', 'blue','red', 'blue', 'red'];  
const wordList = [ **REMOVED FOR READABILITY**
];

//listening for connection event from browser on connection fires callback function (backend)
io.on('connection', function(socket) {
console.log('made socket connection', socket.id)
socket.on('createGrid', function(){

shuffleArray(wordList);
shuffleArray(colorsArr);
let gameWords = wordList;
let gameColors = colorsArr;
selectedWord = gameWords;
shuffledColors = gameColors;
gameRdyWords = []
for (i=0; i< 25; i++) {
square = {
word: selectedWord[i],
color: shuffledColors[i]
}
gameRdyWords.push(square)
}
io.sockets.emit('createGrid', gameRdyWords)
})
//square click to reveal color 
socket.on('squareClick', function(){
io.sockets.emit('squareClick', gameRdyWords[0]["color"])
})
});

前端

// Make connection (socket for front end)
var socket = io.connect('http://localhost:8000');
//Accessing DOM
let td1 = document.getElementById("1")
let td2 = document.getElementById("2")
let td3 = document.getElementById('3');
let td4 = document.getElementById('4');
let td5 = document.getElementById('5');
let td6 = document.getElementById('6');
let td7 = document.getElementById('7');
let td8 = document.getElementById('8');
let td9 = document.getElementById('9');
let td10 = document.getElementById('10');
let td11 = document.getElementById('11');
let td12 = document.getElementById('12');
let td13 = document.getElementById('13');
let td14 = document.getElementById('14');
let td15 = document.getElementById('15');
let td16 = document.getElementById('16');
let td17 = document.getElementById('17');
let td18 = document.getElementById('18');
let td19 = document.getElementById('19');
let td20 = document.getElementById('20');
let td21 = document.getElementById('21');
let td22 = document.getElementById('22');
let td23 = document.getElementById('23');
let td24 = document.getElementById('24');
let td25 = document.getElementById('25');
let elementArr = [td1, td2, td3, td4, td5, td6, td7, td8, td9, td10, td11, td12, td13, td14, td15, td16, td17, td18, td19, td20, td21, td22, td23, td24, td25]
let startGame = document.getElementById("startgame")
//Send click to server
startGame.addEventListener('click', function(){
socket.emit('createGrid');
});
//Listen for events from back end to execute on front end 
socket.on('createGrid', function(gameRdyWords) {
for (i=0; i < elementArr.length; i++) {
elementArr[i].innerHTML = gameRdyWords[i]["word"];
//reset all words to black color on clicking start
elementArr[i].style.color = "black"
}
console.log(gameRdyWords)
});

//Square click to reveal color 
document.querySelector('.squaregrid').addEventListener('click', function(){
socket.emit('squareClick')
});
socket.on('squareClick', function(color) {
elementArr[i].style.color = color;
});

以下是已完成的所需结果的链接：https://thawing-taiga-40928.herokuapp.com 我只用JavaScript和html创建了这个，然后才意识到除非我想自己玩，否则我必须合并某种实时功能。

嘿乔丹，我猜你可能会这样：

// ... your code
// emit with clicked word value
// it's probably e.target.value but i'm not sure
document.querySelector('.squaregrid').addEventListener('click', function(e){
// so here send the id and word
// I'm not sure if e.target.id is actually id of the clicked element please check this out.
// also same for value.
// maybe console those and when you find correct values send it to server.
socket.emit('squareClick', { id: e.target.id, word: e.target.value });
});

在此之后，您的后端代码

socket.on("squareClick", function (object) {
// so here find the element contains that word sended from frontend
let elem = gameRdyWords.find((ch) => ch[0].word === object.word);
// send object back with color value;
if(elem) {
object.color = elem.color;
io.sockets.emit("squareClick", object);
}
});

再一次在你的弗罗内德

// instead of a color you are gonna get the object back.
socket.on('squareClick', function(object) {
document.getElementById(object.color).style.color = object.color;
// elementArr[i].style.color = color;
});

相关内容

最新更新

热门标签：