从 HTML / JS 操作 C# / UWP答案

【问题标题】：Manipulate C# / UWP from HTML / JS从 HTML / JS 操作 C# / UWP
【发布时间】：2018-10-17 11:14:52
【问题描述】：

我刚刚设法在我的 Raspberry Pi 上实现了一个小型网络服务器。 Web 服务器被创建为 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;
    }
}

【问题讨论】：

我建议使用现有的 Web 服务器，而不是从头开始实现自己的。

标签： javascript c# html uwp win-universal-app

【解决方案1】：

您的问题有点含糊，所以我必须猜测您要做什么。您的意思是浏览器（或其他具有 Web 视图的应用程序）将连接到您的 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/ 是初学者的绝佳资源。

【讨论】：