Несколько сокетов получают одно и то же случайно сгенерированное слово - Node.js / Socket.io / Express. js - PullRequest
Новая
       3

Несколько сокетов получают одно и то же случайно сгенерированное слово - Node.js / Socket.io / Express. js

0 голосов
/ 17 июня 2020

Я хотел бы сгенерировать случайное слово из массива, а затем изменить внутреннее HTMl элемента на это слово. Однако я бы хотел, чтобы это произошло, чтобы несколько клиентских браузеров получали одно и то же слово. В настоящее время каждый браузер получает случайное слово, но не одно и то же случайное слово. Я понимаю, почему это происходит - функция вызывается в каждом браузере и поэтому генерирует уникальное случайное слово для этого браузера. Как обеспечить отправку одного и того же случайно сгенерированного слова в каждый отдельный браузер?

Код ниже:

Индекс. 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')
    })
});

кнопка. 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
});

индекс. 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>

1 Ответ

0 голосов
/ 18 июня 2020

Привет, вот что вы можете сделать:

Индекс. 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 :=)
    })
});

кнопка. 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;
});

Изменить: есть также другой способ, который вы можете создать со стороны внешнего интерфейса и отправить его на сервер, и транслировать всем, также приемлемо для вашего примера, я предполагаю:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...