Blazor Server - websocket connection to failed 1006 - PDF Viewer (with file size 13mb to 20mb)

Question

Good Day everyone

I'm having a problem when using pdf viewer using Blazor Server (ASP.NET Core), the error occurs when we deployed it on the staging environment, the file type is pdf and the usual file size is 13 mb to 20 mb.

When our QA is testing the pdf viewer he encountered this error:

"WebSocket closed with status code: 1006 ()"

And the pdf viewer won't work. This scenario has most likely happened when using the company's VPN, as everyone is working from home, but when testing the pdf viewer when at the office using the direct network connection, the pdf viewer is working

Here's my code for calling the PDF viewer:

Code behind:

//Get File from service
objFile = await myServices.GetFile(Id);
byte[] byteArray = objFile.Data;
PDFFilePath = await jSRuntime.InvokeAsync<string>("getBlobObject", Convert.ToBase64String(byteArray));

Javascript:

function getBlobObject(b64Data) {

const blob = base64ToBlob(b64Data, 'application/pdf');
const url = URL.createObjectURL(blob);


var setpdf = url;
return setpdf;

function base64ToBlob(base64, type = "application/octet-stream") {
    const binStr = atob(base64);
    const len = binStr.length;
    const arr = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i);
    }
    return new Blob([arr], { type: type });
}

}

Razor page:

<div class="d-flex flex-wrap" id="div-pdf">
<iframe src="@PDFFilePath" type="application/pdf" width="100%" height="100%" style="overflow: auto;width:100%; height:746px;"></iframe>'

Is there a way to fix this? especially when accessing the app using the company's VPN? is there a better approach for this to work?

Thanks everyone and regards.

Answer 1

Idea one

Make sure you have enable LongPolling .

options.Transports = HttpTransportType.WebSockets | HttpTransportType.LongPolling;

From the offical doc .

Failed to connect via WebSockets, using the Long Polling fallback transport. This may be due to a VPN or proxy blocking the connection.

So if we enable LongPolling, maybe we can fix the issue by using LongPolling.

Idea two

1. Try to create a pdf file with only one page and test it under the vpn network to see if this problem can be reproduced.

2. If the problem is gone, we can search more info about loading PDF file in pagination.