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

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

javascript html node.js sockets websocket

Javascript Socket.io事件侦听器/事件处理程序Socket.io,javascript,html,node.js,sockets,websocket,Javascript,Html,Node.js,Sockets,Websocket,在我放弃这个项目之前，最后一次Hale Mary。我试图创建一个随机生成的单词表，通过该表，单击的每个单词都会更改为相应的颜色集。我有随机生成的单词和一系列相应的颜色。但是，我无法通过使用Socket.io在浏览器中实时单击将文字更改为相应的颜色-我几乎可以肯定这是因为我缺乏Socket.io方面的知识和经验，因此任何帮助/见解都将非常有用代码如下： HTML 按钮测试开始红队转身后端 var express = require('express') var socket = req

在我放弃这个项目之前，最后一次Hale Mary。我试图创建一个随机生成的单词表，通过该表，单击的每个单词都会更改为相应的颜色集。我有随机生成的单词和一系列相应的颜色。但是，我无法通过使用Socket.io在浏览器中实时单击将文字更改为相应的颜色-我几乎可以肯定这是因为我缺乏Socket.io方面的知识和经验，因此任何帮助/见解都将非常有用

代码如下：

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"])
    })
});

var express=require（'express'））
var socket=require（'socket.io'）
//应用程序设置
var-app=express（）；
var server=app.listen（8000，函数（）{
console.log（'侦听端口8000上的请求'）
});
//静态文件
应用程序使用（express.static（'public'））；
//套接字设置
var io=套接字（服务器）；
函数shuffleArray（数组）{
对于（设i=array.length-1；i>0；i--）{
常数j=数学楼层（数学随机（）*（i+1））；
[array[i]，array[j]=[array[j]，array[i]]；
}
}
常量颜色R=[“红色”、“浅灰色”、“浅灰色”、“浅灰色”、“浅灰色”、“浅灰色”、“蓝色”、“蓝色”、“蓝色”、“红色”、“蓝色”、“红色”、“蓝色”、“红色”、“蓝色”、“蓝色”、“红色”、“红色”、“红色”、“蓝色”、“蓝色”、“蓝色”、“红色”、“红色”、“蓝色”、“蓝色”、“红色”、“红色”、“红色”、“蓝色”、“红色”；
const wordList=[**为便于阅读而删除**
];
//在连接上侦听浏览器中的连接事件触发回调函数（后端）
io.on（'连接'，函数（套接字）{
console.log（'makesocketconnection'，socket.id）
socket.on（'createGrid'，function（）{
Shuffleray（字表）；
shuffleArray（colorsArr）；
让gameWords=wordList；
让gameColors=colorsar；
selectedWord=游戏词；
洗牌颜色=游戏颜色；
gameRdyWords=[]
对于（i=0；i<25；i++）{
平方={
字：选择字[i]，
颜色：混洗颜色[i]
}
gameRdyWords.push（方形）
}
io.sockets.emit（'createGrid'，gameRdyWords）
})
//方形单击以显示颜色
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;
});

//建立连接（前端插座）
var socket=io.connect（'http://localhost:8000');
//访问DOM
设td1=document.getElementById（“1”）
设td2=document.getElementById（“2”）
设td3=document.getElementById（'3'）；
设td4=document.getElementById（'4'）；
设td5=document.getElementById（'5'）；
设td6=document.getElementById（'6'）；
设td7=document.getElementById（'7'）；
设td8=document.getElementById（'8'）；
设td9=document.getElementById（'9'）；
设td10=document.getElementById（'10'）；
设td11=document.getElementById（'11'）；
设td12=document.getElementById（'12'）；
设td13=document.getElementById（'13'）；
设td14=document.getElementById（'14'）；
设td15=document.getElementById（'15'）；
设td16=document.getElementById（'16'）；
设td17=document.getElementById（'17'）；
设td18=document.getElementById（'18'）；
设td19=document.getElementById（'19'）；
设td20=document.getElementById（'20'）；
设td21=document.getElementById（'21'）；
设td22=document.getElementById（'22'）；
设td23=document.getElementById（'23'）；
设td24=document.getElementById（'24'）；
设td25=document.getElementById（'25'）；
设元素arr=[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]
让startGame=document.getElementById（“startGame”）
//发送单击到服务器
startGame.addEventListener（'click'，function（）{
emit（'createGrid'）；
});
//从后端侦听要在前端执行的事件
socket.on（'createGrid'，函数（gameRdyWords）{
对于（i=0；i


下面是一个链接，指向已完成的预期结果：在意识到除非我想自己玩，否则我必须加入某种实时功能之前，我仅使用JavaScript和html创建了此功能。
嘿，jordan，我猜您可能会这样：
/。。。你的代码
//使用单击的单词值发出
//可能是e.target.value，但我不确定
document.querySelector（“.squaregrid”）.addEventListener（'click'，函数（e）{
//所以这里发送id和单词
//我不确定e.target.id是否实际上是被单击元素的id，请检查这个。
//价值也一样。
//也许可以对这些进行控制台操作，当您找到正确的值时，将其发送到服务器。
emit（'squareClick'，{id:e.target.id，word:e.target.value}）；
});

在此之后，您的后端代码在哪里
socket.on（“方形单击”），函数（对象）{
//因此，在这里查找包含从前端发送的单词的元素
让elem=gameRdyWords.find（（ch）=>ch[0].word==object.word）；
//将具有颜色值的对象发送回；
if（elem）{
object.color=elem.color；
io.sockets.emit（“squareCl
// 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;
});