Приложение Electron не отображает измененные css, если я не обновляю sh вручную после отправки сообщения через сокет - PullRequest
Новая
       17

Приложение Electron не отображает измененные css, если я не обновляю sh вручную после отправки сообщения через сокет

0 голосов
/ 02 августа 2020

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

main. js

const { app, BrowserWindow } = require('electron')
const WebSocket = require("ws")

const judge_ws = new WebSocket.Server({port:1080})
const lightbox_ws = new WebSocket.Server({port:1070})

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  var websocketList = [];
  
  judge_ws.on('connection', function (w) {  
    w.on( 'message' , function (incoming_data)  {
      console.log(incoming_data)
      lightbox_ws.on('connection', function (ws) {
        ws.on('message', function(){
          ws.send(incoming_data)
        })
      })
    })  
    w.on('close', function() { 
         console.log("Closed") 
    })    
    w.send("Hello from port 1080")
  })

Этот код открывает два веб-узла. Веб-сокет из порта 1080 прослушивает клиента, который отправит ему некоторые данные.

client1.jade 

extends layout

block content
  h1 Judge #{judge_id}
  
    script.
        const socket = new WebSocket("ws://localhost:1080");
        var is_good_lift = function(value) {
            socket.send(JSON.stringify({is_good_from_judge_id:Boolean(value)}))
        }
        // Connection opened
        //- socket.addEventListener('open', function (event) {
        //-     socket.send('Hello Server!');
        //- });

        socket.addEventListener('message', function (data) {
            console.log(data);
        });


  div(class='btn_container')
    button(class='good_lift lift_btn' onclick='is_good_lift("true")') Lift is Good

    button(class='bad_lift lift_btn' onclick='is_good_lift("false")') Lift is Bad

клиент 1 отправит данные на главный сервер. js в зависимости от того, что кнопка нажата. Затем main. js откроет другой порт для отправки данных на client2

client2. html

  <body>
    <h1>Test</h1>
    <div class="container">
        <span id="judge1" class="dot"></span>
        <span id="judge2" class="dot"></span>
        <span id="judge3" class="dot"></span>
    </div>
  </body>
  <script>
    const socket = new WebSocket("ws://localhost:1070");
    // Connection opened
    socket.addEventListener('open', function (event) {
            socket.send('Recieved from port 1070');
    });
    socket.addEventListener('message', function (recieved_judge_message) {
      dic = JSON.parse(recieved_judge_message.data)
      var key = Object.keys(dic)[0];
      var x = document.getElementById("judge2");
      current_style = x.style.backgroundColor
      if(current_style === 'red'){
        x.style.backgroundColor = 'white'
      } else {x.style.backgroundColor = 'red'}
    });
  </script>
</html>

Проблема в том, что мой промежуток в клиенте два получает сообщение, но никаких изменений в электронном приложении, если я не обновлю sh приложение вручную.

вот как выглядит мой элемент span в клиенте 2, прежде чем я обновлю sh

enter image description here

After I refresh it turns the correct color

введите описание изображения здесь

...