Управление C# / UWP из HTML / JS
Мне только что удалось реализовать небольшой веб-сервер на моем Raspberry Pi. Веб-сервер создается как автономное приложение UWP.
Он может использовать Javascript. Что очень полезно. Я только начинаю с HTML и JS, так что я в этом большой новичок и нуждаюсь в помощи.
Мне уже удалось показать те же данные, которые я показываю на веб-странице, в приложении с заголовком на том же устройстве.
Теперь я хочу иметь возможность манипулировать данными с веб-страницы. Но я не знаю, как мне это сделать. Я разбираю HTML / JS как полную строку, поэтому я не могу использовать переменные, определенные в коде. Мне нужен другой способ сделать это.
Мой код для веб-сервера в настоящее время таков:
public sealed class StartupTask : IBackgroundTask
{
private static BackgroundTaskDeferral _deferral = null;
public async void Run(IBackgroundTaskInstance taskInstance)
{
_deferral = taskInstance.GetDeferral();
var webServer = new MyWebServer();
await ThreadPool.RunAsync(workItem => { webServer.Start(); });
}
}
class MyWebServer
{
private const uint BufferSize = 8192;
public async void Start()
{
var listener = new StreamSocketListener();
await listener.BindServiceNameAsync("8081");
listener.ConnectionReceived += async (sender, args) =>
{
var request = new StringBuilder();
using (var input = args.Socket.InputStream)
{
var data = new byte[BufferSize];
IBuffer buffer = data.AsBuffer();
var dataRead = BufferSize;
while (dataRead == BufferSize)
{
await input.ReadAsync(buffer, BufferSize, InputStreamOptions.Partial);
request.Append(Encoding.UTF8.GetString(data, 0, data.Length));
dataRead = buffer.Length;
}
}
string query = GetQuery(request);
using (var output = args.Socket.OutputStream)
{
using (var response = output.AsStreamForWrite())
{
string htmlContent = "<html>";
htmlContent += "<head>";
htmlContent += "<script>";
htmlContent += "function myFunction() {document.getElementById('demo').innerHTML = 'Paragraph changed.'}";
htmlContent += "</script>";
htmlContent += "<body>";
htmlContent += "<h2>JavaScript in Head</h2>";
htmlContent += "<p id='demo'>A paragraph.</p>";
htmlContent += "<button type='button' onclick='myFunction()'>Try it!</button>";
htmlContent += "</body>";
htmlContent += "</html>";
var html = Encoding.UTF8.GetBytes(htmlContent);
using (var bodyStream = new MemoryStream(html))
{
var header =
$"HTTP/1.1 200 OK\r\nContent-Length: {bodyStream.Length}\r\nConnection: close\r\n\r\n";
var headerArray = Encoding.UTF8.GetBytes(header);
await response.WriteAsync(headerArray, 0, headerArray.Length);
await bodyStream.CopyToAsync(response);
await response.FlushAsync();
}
}
}
};
}
public static string GetQuery(StringBuilder request)
{
var requestLines = request.ToString().Split(' ');
var url = requestLines.Length > 1
? requestLines[1]
: string.Empty;
var uri = new Uri("http://localhost" + url);
var query = uri.Query;
return query;
}
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваш вопрос немного расплывчатый, поэтому я должен угадать, что вы пытаетесь сделать. Вы имеете в виду, что браузер (или другое приложение с веб-представлением) будет подключаться к вашему серверу Pi, брать с него некоторые данные, а затем манипулировать данными, чтобы отформатировать их / отобразить их определенным образом на странице? Если да, то сначала вам нужно решить, как вы получите данные. Вы, кажется, подразумеваете, что данные будут просто потоком HTML, хотя неясно, как вы будете передавать эту строку в браузер. Традиционные способы получения данных могут быть с использованием Ajax и, возможно, JSON, но также можно использовать старомодный iframe (возможно, скрытый), хотя, если начать с нуля, Ajax будет лучше.
Основная проблема заключается в том, чтобы знать: какая страница будет обращаться к данным на сервере и в каком формате? Это локальная страница, обслуживаемая локально из файлового хранилища клиентского приложения, которая затем запускает соединение с сервером, захватывает данные и отображает их в <div> или <iframe>, или это страница на вашем сервере, которая поставляется со встроенными данными в одной части модели DOM, а вы хотите преобразовать их и отобразить в другом элементе?
Теперь предположим, что ваше клиентское приложение получило данные в виде элемента типа <div id = "myData">data</div>. Сценарий на клиентской странице может получить эти данные в виде строки с помощью document.getElementById('myData').innerHTML (см. getElementById). Затем вы можете преобразовать данные по мере необходимости с помощью методов JavaScript. Кроме того, существуют различные методы DOM для вставки преобразованных данных либо обратно в тот же элемент, либо в другой.
Вместо этого предположим, что вы получили данные через XMLHttpRequest. Затем вам нужно будет идентифицировать только те данные, которые вы хотите получить от полученного объекта (что может включать преобразование объекта в строку и использование регулярного выражения или, что более вероятно, использовать методы выбора DOM для объекта, пока вы не получите часть данные, которые вы хотите). Когда вы извлекли данные / узел / элемент, вы можете вставить его в <div> на своей странице, как указано выше.
Извините, если все это немного расплывчато и абстрактно, но, надеюсь, это может указать вам правильное направление для дальнейшего поиска по мере необходимости. https://www.w3schools.com/ - отличный ресурс для новичков.
Я бы рекомендовал использовать существующий веб-сервер вместо того, чтобы создавать собственный с нуля.