Socket.io - клиент автоматически прослушивает изменения данных с сервера - PullRequest
0 голосов
/ 16 января 2020

Я пытаюсь сделать что-то похожее на лобби многопользовательской игры, используя ReactJS, NodeJS и Socket.IO. Каждый раз, когда новый игрок / клиент подключается к сокету, я хочу, чтобы его имя транслировалось на веб-интерфейс.

До сих пор мне удавалось добиться этого, заставляя фронтенд делать GET-запрос к бэкэнду каждые 3 секунды, что запускает сокет на бэкэнде для отправки данных, полученных из базы данных mongoDB.

FRONTEND - лобби. js

class Lobby extends Component {

//When the component mounts, it calls grabNames function every 3 seconds.

  componentDidMount = () => {
    setInterval(this.grabNames, 3000);
  };

//function makes a GET request that triggers the socket to emit a "joinedPlayers" message.

  grabNames = () => {
    axios.get(`${backend}/playerNames`).then(response => {
      console.log("Success");
    });

//Listens for the "joinedPlayers" message to be emitted from the backend.
//The joinedPlayers state is then referenced in the client-side markup.

    socket.on("joinedPlayers", data => {
      this.setState({ joinedPlayers: data.map(name => <li>{name}</li>) });
    });
  };

BACKEND - сервер. js

//Function for connecting to the mongoDB database through Mongoose.

function dbConnect() {
  mongoose
    .connect(database, { useNewUrlParser: true })
    .catch(error => console.error(error));
}

//Socket Connection

io.on("connection", socket => {
  console.log("A connection to the socket has been established.");
});

//Router

app.get("/playerNames", (req, res) => {
  dbConnect();
  Name.find((error, array) => {
    var playerNames = array.map(name => name.name);
    io.emit("joinedPlayers", playerNames);
    res.send("Player names emitted.");
  });
});

Пока этот метод работает для меня, я не могу не думать, что есть лучший способ для внешнего интерфейса прослушивать изменения данных с сервера.

Например, есть ли способ, которым сервер может обнаружить изменение в моей базе данных mongoDB и обновить клиент только тогда, когда он обнаружит это изменение ... вместо того, чтобы периодически проверять каждые 3 секунды независимо от того, есть ли изменение данных или нет?

Любая помощь будет принята с благодарностью. Спасибо!

1 Ответ

1 голос
/ 16 января 2020

Вместо того, чтобы делать запрос GET, предпочтительно, чтобы вы создали комнату / канал для каждой игры и подключили всех игроков к этой комнате (со стороны клиента). Теперь, когда новый игрок подпишется на эту комнату (событие сработает). Вы можете транслировать событие для канала.

Примерно так:

io.on('connection', function(socket){
  socket.on('joinedPlayers', function(id, msg){
    socket.broadcast.to('game id').emit('Jamie joined', msg);
  });
});

Узнайте больше об этом: https://socket.io/docs/rooms-and-namespaces/#Default номер

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