Lost connection with WebSocket while attempting to transmit large images

I am currently testing a WebSocket on localhost using Java and JavaScript. I am running Tomcat 7.0.42 with no proxy in between. The WebSocket works fine when sending text and small images, but the connection is forcibly closed on the client side (Chrome browser) when attempting to send a large photo. It's worth noting that the 'onClose' callback in MessageInbound on Tomcat is not triggered after the WebSocket in the browser closes the connection.

Is there a solution to this issue? Thank you.

You can view the captured data from Chrome Developer Tools here

Below is the code snippet from the client-side:

for (var i = 0, f; f = files[i]; i++) {

    // Step 1: Notify the server about the intended recipient
    ws.send(JSON.stringify({
        action: "binary",
        receiver: <%=selectedfriend.getUserId()%>,
        timestamp: new Date().getTime()
   }));

   // Step 2: Send the file
   ws.send(f);

   var reader = new FileReader();
   reader.onload = (function(theFile) {
       return function(e) {
           var span = document.createElement('span');
           span.innerHTML = ['<img class="thumb" style="width: 50px;height: 30px;" src="', e.target.result,
           '" title="', escape(theFile.name), '"/>'].join('');
           appendImage(span.innerHTML, "pullleft");
       };
   })(f);
   reader.readAsDataURL(f);
}

Answer №1

After much trial and error, I have finally discovered a solution to my query on Tomcat. The key was to implement the following code:

protected StreamInbound createWebSocketInbound(String string, HttpServletRequest hsr) {
    MyMessageInbound inbound = new MyMessageInbound();
    inbound.setByteBufferMaxSize(9999999);
    inbound.setOutboundByteBufferSize(9999999);
    return inbound;
}

However, a new challenge arises: determining the ideal value for the buffer size. In this case, 9999999 is utilized, but it must be thoroughly tested when uploading files ranging from 8-9MB via WebSocket. How can one accurately measure the appropriate buffer size? Your insights are greatly appreciated. Thank you!

Answer №2

Consider attempting to transmit data as an ArrayBuffer:

ws.send(f.readAsArrayBuffer());

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming a JavaScript JSON object into a string representation

Currently in the process of constructing a website utilizing Tornado Websocket, and I've come to understand that Tornado Websocket only accepts a specific type of json format: {"key1":1,"key2":2,"key3":3} The goal is to fill element attributes with ...

Showcase JSON data within a designated div

As someone new to HTML, JavaScript and Vue, I'm unsure if my issue is specific to Vue or can be resolved with some JavaScript magic. I have a Node.js based service with a UI built in Vue.js. The page content is generated from a markdown editor which ...

What is the best way to toggle a sticky footer menu visibility using div elements with JavaScript instead of relying on pixel measurements?

Just wanted to mention that I'm pretty new to this, so if I use the wrong terms, I apologize in advance. I am trying to replicate Morning Brew's sticky footer opt-in form (check it out here). However, the code I have now only tracks pixels. Is t ...

JavaScript Tip: Effortless method to confirm the presence of duplicate values within an array

Similar Question: Best method for identifying duplicate values in a JavaScript array If I have an extensive array containing thousands of elements, I am looking to check if there are 2 or more elements with identical values and return true. I unders ...

Retrieve an array from a JSON object by accessing the corresponding key/value pair using the utility library underscore

I have a dataset in JSON format (as shown below) and I am attempting to use the _.where method to extract specific values from within the dataset. JSON File "data": [{ "singles_ranking": [116], "matches_lost": ["90"], "singles_high_rank": [79 ...

Is there a way to sort through a data object using a state array in React?

I have found a solution! The code below now displays a functioning example. My latest project involves creating a React portfolio with a Filter system. Users can visit the portfolio page and choose filters (web design, development, etc.) to view specific ...

How can AngularJS handle multiple routes using unique templates while sharing the same controller?

I am currently researching whether I can achieve the functionality described in the title. Here are my initial thoughts: Let's consider the following routes I have set up: .when('/', { templateUrl : 'partials/homepage.html&ap ...

When utilizing the multipart/form-data content type in a form, the files being sent are transmitted as blank

I am currently developing a VueJS component that functions as a form to collect user information and enable multiple image uploads. The form is set with enctype="multipart/form-data" and exhibits the following structure : <template> <div> ...

Is it possible for Maven to deploy a module to JBoss?

In our Maven project, we deploy multiple wars to a JBoss server. We recently discovered that one of the jars that some of our wars rely on uses Xerial. When Xerial starts, it attempts to load a native driver. However, only the first war is successful in lo ...

The Dialog feature offered by jQuery-UI

Having just started with jQuery, I am looking to implement the jQuery-UI Dialog to display a message containing lengthy text to the user. My goal is to have a "More details" link in each row of my HTML table that will trigger the jQuery Dialog window to op ...

Searching for text within paragraphs using Regex

I am attempting to find the paragraph that contains a specific keyword. Here is an example text: In my text file, there are multiple paragraphs with varying lengths. Each paragraph may be on multiple lines. There is always a newline between each paragr ...

Sort through various table columns

I am currently utilizing a data table component from Framework7, which is being generated dynamically with JSON data. My goal is to make the column filter input functional within the table. So far, I have succeeded in implementing the filter for the first ...

Is it possible to assign functions to each keystroke that does not correspond to a specific keybinding in Angular?

In Angular, there are events tied to keybindings or actions like (focus), (blur), (keydown), and more. You can bind specific keybinds to certain keys as well, such as (keydown.enter), (keydown.alt), etc. Is there a method to trigger an event only when it ...

What are the steps for implementing claim-based authentication in Windows Phone 7?

Currently, I am in the process of developing a Windows Phone 7 application and exploring claim-based authentication for the first time. To assist me with this, I have been referring to the following link which explains how to implement claim-based authenti ...

Troubleshooting issue with default button in asp.net using javascript

Despite my best efforts, I couldn't figure out how to make a button default until I came across a helpful tip from someone here who shared some javascript code that checks for the enter key in a textbox and triggers the button. I attempted placing my ...

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

I have come across various solutions to this problem, but none of them seem to be effective for my specific project. In my application, the user's previous choices are displayed in multiple divs. Initially, all the divs are empty. As the user progress ...

How can I ensure that the scroll is positioned at the top when a new page is loaded in

I'm facing an issue with my multipage application. I want to automatically scroll to the top when navigating to a new page. Here's what I've attempted: ScrollToTop.js, which is located in the component folder import React, { Component } fr ...

Error in Node.js: Attempting to modify headers after they have already been sent to the client

I've been facing the challenge mentioned in the topic for quite some time now. Is there anyone who can assist me with this? Feel free to ask any questions if you need clarification. I've gone through a few potential solutions for this issue, but ...

Customizing Material-UI Select Styles

I have been attempting to customize the appearance of Material-UI's <Select> component with variant="outlined". In this particular scenario, my objective is to hide the dropdown icon and set padding-right to 0px. Based on my interpretation of t ...

What are some strategies for avoiding data loss when rotating the screen on an Android app?

While using my android application, I encountered an issue when rotating the screen. The main functionality of my android application is to display a real-time ECG (electrocardiogram) signal by receiving it through an audio jack and storing it in a buffer ...