Sending and receiving images via a socket

Question

I have a C# desktop app. It connects to another PC on my network which is a UWP C# app.

I am trying to send an image or 2 to my listening socket and to test this I get the listening socket to send me the image back.

The trouble is that even though my server recieves all the bytes that were orginally sent the recieved image back to the client is not of the same size.

To make this even more weird is sometimes the returned bytes are correct and I get the whole image and when I attempt to send 2 images the 1st one is OK and the 2nd one is not.

Then it will/can revert back to no images being sent back correctly.

I think is maybe to do with the async/await parts bit I am not sure how.

This is my server code:

using (IInputStream input = args.Socket.InputStream)
{
    byte[] data = new byte[BufferSize];
    IBuffer buffer = data.AsBuffer();
    uint dataRead = BufferSize;
    while (dataRead == BufferSize)
    {
        await input.ReadAsync(buffer, BufferSize, InputStreamOptions.Partial);
        requestInBytes.AddRange(data.Take((int) buffer.Length));
        dataRead = buffer.Length;
    }
}
var ct = requestInBytes.Count;

I then trip out the header info:

int counter = 0;
counter = requestCommand[0].Length;
counter = counter + requestCommand[1].Length;
counter = counter + requestCommand[2].Length;
counter = counter + requestCommand[3].Length;
counter = counter + requestCommand[4].Length;
counter = counter + requestCommand[5].Length;
counter = counter + 6;

Now I extract the image:

var imgBody = new byte[totalBytes.Length- counter];
System.Buffer.BlockCopy(totalBytes, counter, imgBody, 0, imgBody.Length);
byteArray = imgBody;

And send just the image back:

using (IOutputStream output = args.Socket.OutputStream)
{
    using (Stream response = output.AsStreamForWrite())
    {
        MemoryStream stream = new MemoryStream(byteArray);
        await response.WriteAsync(byteArray, 0, byteArray.Length);
        await response.FlushAsync();
    }
}

This is my client code:

StringBuilder sb = new StringBuilder();
foreach (var gallery in Shared.CurrentJobGallery)
{
    try
    {
        sb.Clear();
        sb.Append(GeneralTags.ACTION_ADD);
        sb.Append(Shared.DLE);
        sb.Append("GALLERY");
        sb.Append(Shared.DLE);
        sb.Append(Shared.CurrentClientId);
        sb.Append(Shared.DLE);
        sb.Append(gallery.Title);
        sb.Append(Shared.DLE);
        sb.Append(gallery.Description);
        sb.Append(Shared.DLE);
        sb.Append(jobRef);
        sb.Append(Shared.DLE);
        byte[] galleryHdr = Encoding.UTF8.GetBytes(sb.ToString());
        byte[] byteArray = new byte[galleryHdr.Length + gallery.ImageData.Length];

        Buffer.BlockCopy(galleryHdr, 0, byteArray, 0, galleryHdr.Length);
        Buffer.BlockCopy(gallery.ImageData, 0, byteArray, galleryHdr.Length, gallery.ImageData.Length);
        List<byte> requestInBytes2 = new List<byte>();
        System.Diagnostics.Debug.WriteLine("SENT: " + gallery.ImageData.Length.ToString());
        using (TcpClient clientSocket = new TcpClient())
        {
            await clientSocket.ConnectAsync(GeneralTags.RASPBERRY_PI_IP_ADDRESS, GeneralTags.RASPBERRY_PI_PORT);
            using (NetworkStream serverStream = clientSocket.GetStream())
            {
                List<byte> requestInBytes = new List<byte>();

                serverStream.Write(byteArray, 0, byteArray.Length);
                serverStream.Flush();
                int i;
                Byte[] bytes = new Byte[1024];
                do
                {
                    i = serverStream.Read(bytes, 0, bytes.Length);
                    byte[] receivedBuffer = new byte[i];
                    Array.Copy(bytes, receivedBuffer, i);

                    requestInBytes2.AddRange(receivedBuffer);
                } while (serverStream.DataAvailable);

            }
        }

        using (MemoryStream ms = new MemoryStream())
        {
            System.Diagnostics.Debug.WriteLine("BACK: " + requestInBytes2.Count.ToString());
            ms.Write(requestInBytes2.ToArray(), 0, requestInBytes2.ToArray().Length);
            Shared.ViewImage(Image.FromStream(ms, true));
        }
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(ex.ToString());
    }
}

Answer 1

Your problem is that TCP sockets are based around streams, not packets. It's true that "on the wire" everything is a packet, but when you're using TCP, you have no control over how the data is split up into packets or is reassembled into a stream.

In particular, this line of code is incorrect:

await input.ReadAsync(buffer, BufferSize, InputStreamOptions.Partial);

According to the docs, you must use the buffer returned from ReadAsync. Also note that this buffer may be a partial image, and it's up to your code to detect that situation, read more if necessary, and append those blocks together. Also, the buffer may contain part of one image and part of the next image; it's also up to your code to detect that and handle it correctly.

For this reason, most TCP applications use some form of message framing (described in more detail on my blog). Note that getting this right is surprisingly hard.

I strongly recommend that you use SignalR instead of raw TCP sockets. SignalR handles message framing for you, and it is capable of self-hosting (i.e., it does not require ASP.NET).