The WebServer response on Raspberry PI: the querystring

In the last article we’ve seen how build a little WebServer on Raspberry PI. Now we’ll see how our WebServer manage querystring passed from the browser’s address.

A little resume is necessary. We made a project as BackgroundApplication and we’ve added a Webserver class with a listener. At the end of article, we’ve added a callback for the ConnectionReceived event of the listener.

In this callback we will manage the response for the browsers.

First of all we have to read the request from browser as follow:

[code lang=”c-sharp”]

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, 1024, InputStreamOptions.Partial);
request.Append(Encoding.UTF8.GetString(
data, 0, data.Length));
dataRead = buffer.Length;
}
}[/code]

The read async function needs a buffer size. I’ve set as 1024, but could not be enough. Manage properly the buffer as you need.

Well, now get the query string from browser. Sometimes needs to manage the request from user for differentiate the answer. To get the custom quesry string use this snippet:

[code lang=”c-sharp”]var requestLines = request.ToString().Split(‘ ‘);
var url = requestLines.Length > 1 ? requestLines[1] : string.Empty;
var uri = new Uri("http://localhost" + url);
var queryString = uri.Query.Substring(1);
if (queryString.Length > 1) queryString = queryString.Substring(1);[/code]

Now we have the query string too and we have to interpret it.

For our simple example we pass a number after the ? in the query string and imagines the numbers are our different pages.

[code lang=”c-sharp”]var htmlResponse = string.Empty;
switch (queryString)
{
case "1":
htmlResponse = $"<html><head><title>Home page</title></head><body>This is my webserver page<br/>And this is the QueryString {queryString}</body></html>";
break;
case "2":
htmlResponse = $"<html><head><title>Product 2 page</title></head><body>This is my webserver page<br/>And this is the QueryString {queryString}</body></html>";
break;
case "3":
htmlResponse = $"<html><head><title>Config page</title></head><body>This is my webserver page<br/>And this is the QueryString {queryString}</body></html>";
break;
default:
htmlResponse = $"<html><head><title>HTTP404</title></head><body>This is not the page you are looking for…<br/>And this is the QueryString {queryString}</body></html>";
break;
}
[/code]

And now at the end of all this portion of code, we can send the WebServer response to browser as follow:

[code lang=”c-sharp”]using (var output = args.Socket.OutputStream)
{
using (var response = output.AsStreamForWrite())
{
var html = Encoding.UTF8.GetBytes(htmlResponse);
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();
}
}
}[/code]

And now in the browser we can see:

WebServer response 7WebServer response 8

and that’s all for now.

In the next article I’ll explain how to manage the css files and the javascripts.

Enjoy!

P.S. Follow the other posts:

Little WebServer on Raspberry PI

The WebServer response on Raspberry PI: html/css

The WebServer response on Raspberry PI: jquery/js