多个 sockets 接收相同的随机生成的单词 - Node.js/Socket.io/Express.js

Question

I would like to generate a random word from an array and then change the innerHTMl of an element to that word.我想从数组中生成一个随机单词，然后将元素的 innerHTMl 更改为该单词。 However I would like this to happen so that multiple client browsers are receiving the same word.但是我希望这种情况发生，以便多个客户端浏览器接收相同的单词。 Currently every browser is receiving a random word however not the same random word.目前每个浏览器都在接收一个随机词，但不是同一个随机词。 I understand why this is happening - the function is being called in every browser and therefore generating a unique random word to that browser.我理解为什么会发生这种情况 - 每个浏览器都在调用 function，因此会为该浏览器生成一个唯一的随机词。 How do I ensure that the same randomly generated word is sent out to each individual browser?如何确保将相同的随机生成的单词发送到每个单独的浏览器？

Code below:下面的代码：

Index.Js (server side) Index.Js（服务器端）

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);

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

    //Listening for colorchange (click event from front end)
    socket.on('colorChange', function(){
        io.sockets.emit('colorChange')
    })
});

button.js Client side button.js 客户端

// Make connection (socket for front end)
var socket = io.connect('http://localhost:8000');

let wordList = ['cat', 'dog', 'skunk']

//Accessing DOM
let td1 = document.getElementById("td1")


//Send click to server
td1.addEventListener('click', function(){
    socket.emit('colorChange');
});

//Listen for events from back end to execute on front end 
socket.on('colorChange', function() {
   td1.style.color = "red"
   td1.innerHTML = wordList[Math.floor(Math.random() * wordList.length)] //ATTEMPT TO GENERATE RANDOM WORD
});

index.html索引.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>
    <table id="grid">
        <tr>
            <td id="td1">Hello</td>
        </tr>
    </table>
    <script src="/button.js"></script>
</body>
</html>

Answer 1

Hi here is what you can do:您好，您可以执行以下操作：

Index.Js (server side) Index.Js（服务器端）

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);
var wordList = ['cat', 'dog', 'skunk'];
var selectedWord = wordList[Math.floor(Math.random() * wordList.length)];
// when you run server,
// you will have a selectedWord

//listening for connection event from browser on 
// connection fires callback function (backend)
io.on('connection', function(socket) {
    console.log('made socket connection', socket.id);
    // everytime someone connecteds send to single user what selectedWord
    // currently is
    socket.emit('colorChange', selectedWord);

    //Listening for colorchange (click event from front end)
    socket.on('colorChange', function(){
        // when someone wants to change 
        selectedWord = wordList[Math.floor(Math.random() * wordList.length)];
        // we are gonna select a new one and send it to everyone
        io.sockets.emit('colorChange', selectedWord);
        // so on button.js where you listen this event
        // it's gonna set new randomly selected word for every user :=)
    })
});

button.js Client side button.js 客户端

// Make connection (socket for front end)
var socket = io.connect('http://localhost:8000');

//Accessing DOM
let td1 = document.getElementById("td1")

//Send click to server
td1.addEventListener('click', function(){
    socket.emit('colorChange');
});

//Listen for events from back end to execute on front end 
socket.on('colorChange', function(word) {
   td1.style.color = "red"
   td1.innerHTML = word;
});

Edit: There is also other way that you can create from frontend side and send it to server and broadcast to everyone is also acceptable for your example i'm guessing:)编辑：还有其他方法可以从前端创建并将其发送到服务器并广播给每个人我猜你的例子也是可以接受的:)

多个 sockets 接收相同的随机生成的单词 - Node.js/Socket.io/Express.js

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-17 21:04:36

多个 sockets 接收相同的随机生成的单词 - Node.js/Socket.io/Express.js

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-17 21:04:36

解决方案1
0 已采纳 2020-06-17 21:04:36