Я разрабатываю настольное приложение на JavaScript (HTML + CSS тоже) через Electron и Node. Цель приложения - создать TCP-клиент, который будет связываться с платами electronici c через сокет, чтобы возвращать информацию о них. В моем приложении мне нужно отправлять сообщения, получать ответы, а также прослушивать данные, отправленные сервером, и использовать их в своем интерфейсе. Я нахожусь на начальном этапе разработки и тестирую все эти функции, поэтому я создал страницу «Вход в систему», которая подключается к TCP-серверу, и еще один экран, который проверяет возможность отправки сообщений и прослушивания данных, полученных с сервера. для их отображения в элементе select.
Но у меня ошибка, потому что интерфейс не готов обрабатывать две функции параллельно в реальном времени. Случается, что сообщения не появляются, если я не выполняю другие действия в интерфейсе, мне это нужно в режиме реального времени. Я могу отправлять сообщения, но когда я их получаю, мне нужно снова запустить функцию кнопки отправки, чтобы полученное сообщение появилось в списке выбора. Если кто-нибудь может помочь мне решить эту проблему, это будет большим подспорьем, предложив какой-нибудь способ сделать это здесь или внести свой вклад в мой репозиторий GitHub. Код есть, помня, что необходимо запустить команду «npm install», чтобы установить зависимости проекта.
npm install
И затем запустить только один » npm start "
npm start
Репозиторий на github можно найти по этой ссылке
https://github.com/PedrowjCA/infosocket/
Файлы, с которыми мне нужна помощь, находятся дома. html и дома. js
ДОМ. HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InfoSocket</title>
<link rel="stylesheet" href="home.css">
</head>
<body>
<header>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M5 11a1 1 0 0 0 1-1V6a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zm-.71-7.29a1 1 0 0 0 1.09.21a1.15 1.15 0 0 0 .33-.21a1.15 1.15 0 0 0 .21-.33A.84.84 0 0 0 6 3a1 1 0 0 0-.29-.71a1 1 0 0 0-1.09-.21a1 1 0 0 0-.33.21A1 1 0 0 0 4 3a1 1 0 0 0 .08.38a1.15 1.15 0 0 0 .21.33zM17 6H9a1 1 0 0 0 0 2h8a1 1 0 0 1 1 1v9.72l-1.57-1.45a1 1 0 0 0-.68-.27H7a1 1 0 0 1-1-1v-2a1 1 0 0 0-2 0v2a3 3 0 0 0 3 3h8.36l3 2.73A1 1 0 0 0 19 22a1.1 1.1 0 0 0 .4-.08A1 1 0 0 0 20 21V9a3 3 0 0 0-3-3z" fill="#000"/></svg>
<div class="connectedInformation">
<label for="ipAddressSpan" id="ipAddressLabel">Conectado em:</label>
<span id="ipAddressSpan"></span>
</div>
<span onclick="handleDisconnect()" id="disconnectSpan">Desconectar</span>
</header>
<div>
<input type="text" name="messageInput" id="messageInput">
<button id="senderButton" onclick="handleSendMessage()">Enviar Mensagem</button>
<select id="messageList"></select>
</div>
<script src="home.js"></script>
</body>
</html>
ДОМ. JS:
var net = require('net');
var path = require('path')
var connectedAddress = document.getElementById ('ipAddressSpan')
var message = document.getElementById('messageInput')
var messageList = document.getElementById('messageList')
var ip = localStorage.getItem('ipValue')
var port = localStorage.getItem('portValue')
var client = new net.Socket()
client.connect(Number(port), ip, function() {
connectedAddress.innerHTML = `${ip}:${port}`
client.on('data', function(data){
var messageOption = document.createElement('option')
messageOption.innerText = data
messageList.appendChild(messageOption)
})
})
function handleDisconnect() {
client.destroy()
window.location.assign(path.resolve(__dirname, 'login.html'))
}
function handleSendMessage() {
client.write(message.value)
}