Манипулировать C # / UWP из HTML / JS - PullRequest
Новая
       21

Манипулировать C # / UWP из HTML / JS

0 голосов
/ 07 мая 2018

Мне только что удалось установить небольшой веб-сервер на моем 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;
    }
}

1 Ответ

0 голосов
/ 08 мая 2018

Ваш вопрос немного расплывчатый, поэтому я должен догадаться, что вы пытаетесь сделать. Вы имеете в виду, что браузер (или другое приложение с веб-представлением) будет подключаться к вашему серверу 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/ - отличный ресурс для начинающих.

...