Вопрос Передача данных с сервера на клиент (react)

[Dima412]

Приветствую, как передать данные с сервера на клиент ? Например количество денег у игрока, как мне передать значение на клиент и вставить в react ? Использую: react, nodejs

 

[akudinov28]

Не работал с реактом, но полагаю, что схема взаимодействия не сильно отличается от vue.

Во время инициализации экземпляра запихиваем его в глобальную переменную window:

JavaScript:

// vue/src/main.js
import Vue from 'vue'

window.app = new Vue().mount('#app')

Дальше в идеале нам нужно какое-нибудь хранилище состояний (в моем случае pinia). Создаем хранилище и добавляем :

JavaScript:

// vue/src/stores/server.j
import { defineStore } from 'pinia'

export const useServerStore = defineStore('server', {
  state: () => {
    return { online: 0 }
  },
  actions: {
    changeOnline(online) {
      this.online = online;
    },
  },
})

В корневом компоненте App.vue привязываем хранилище:

JavaScript:

// vue/src/App.vue
import { useServerStore } from '@/stores/server'

export default {
    name: 'App',
    setup(){
        const server = useServerStore();
        return {server}
    }
}

После этого можно с клиента вызывать хранилище, привязанное к корневому компоненту:

JavaScript:

// client_packages/index.js

let browser = mp.browsers.new("package://index.html");
browser.execute(`window.app.$root.server.changeOnline(35);`);

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

 

[Dima412]

Чего-то не получается

 

[akudinov28]

Dima412 написал(а):

Чего-то не получается

Нажмите для раскрытия...

Читай мануалы по реакту, гугли ошибки. Информации к размышлению я дал более чем достаточно.

 

[Dima412]

Читал, но ничего не получилось

 

[Dima412]

up

 

[youngBeaver]

я не шарю за реакт, но разве есть проблема в создании переменной и передачи в нее информации через execute?

JavaScript:

// cef
let online = 0;

//client
browser.execute(`online = ${onlineFromServer}`);

 

[Dima412]

Разве так можно ?

 

[youngBeaver]

Dima412 написал(а):

Разве так можно ?

Нажмите для раскрытия...

а в чем собственно проблема. Просто попробуй, хуже не будет.

 

[Dima412]

Не работает

 

[kirillzver]

Dima412 написал(а):

Не работает

Нажмите для раскрытия...

Присылай полноценный листинг кода, который ты задействуешь для того, чтобы выполнить поставленную задачу, и мы тебе подскажем в каком момент нужно что-то подправить/добавить.

 

[Dima412]

Client:


Cef:

 

[kirillzver]

Максимально примитивный пример.

На клиенте добавляешь эвент:

JavaScript:

mp.events.add("hud.update.online", online => {
    browser.call("hud.update.online", online);
});

Соответственно с сервера будешь его вызывать посредством player.call и передачей туда необходимых аргументов.

В CEF импортишь следующие, если его нет:

JavaScript:

import React, { useState, useEffect } from 'react';

В начало function App() {...}, вместо своего var HUD = {...} вставляешь:

JavaScript:

const [online, setOnline] = useState(0);

useEffect(() => {
    // подписываемся на событие при монтировании компонента
    mp.events.add("hud.update.online", online => setOnline(online)); // стрелочная функция для наглядности

    // отписываемся при размонтировании
    return () => {
        mp.events.remove("hud.update.online");
    }
}, []);

Опять таки, нерационально подписываться таким образом на обновление онлайна.
В идеале для этого использовать менеджер состояний, например redux или mobx, откуда подтягивать значение в компонент.