# \[uibuilderfe:socket-disconnect\] Reason: transport close when receiving json from node-red

**URL:** <https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [16 October 2021 08:49 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288 "2021-10-16T08:49:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![fangfang94](https://avatars.discourse-cdn.com/v4/letter/f/58956e/32.png) [@fangfang94](https://discourse.nodered.org/u/fangfang94)\
**Post date:** [16 October 2021 08:49 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/1 "2021-10-16T08:49:07Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1ed347626ac92f7271e9fe76221ce835663328f5.png)

Currently I am using post to upload a excel file , and I will use ajax to get this response.  
and the next step is reading the excel header into a smart-select such as

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a7518e33dd8a65f9fafb0078a7578833feb589d.png)

After select the table heading, and I will generate a table base on this flow

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fae15708fd7fcf66fa276a1b602c6cdbc6cc76ea.png)

the configurator and custom\_output I use for filtering excel table heading and the data from json  
to append correctly.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e1a309565081188622476402f50e8c52f609807c.png)

the result output will be like ：

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c2bdd1186d2ff110e52a230aa9b68f40d644d10a.png)

but the problem is if the excel have 100-200 rows (test data) it will work fine.  
but for the real data usually have 1,000 - 5,000 rows and my dev console will return

`[uibuilderfe:socket-disconnect] Reason: transport close`

and nothing error in node-red debug option.

May I know how do I fix this or any suggestions to increase my flow?

ps: still new in all of these, keep learning 🤣

---

<div class="post-metadata">

**Author:** ![fangfang94](https://avatars.discourse-cdn.com/v4/letter/f/58956e/32.png) [@fangfang94](https://discourse.nodered.org/u/fangfang94)\
**Post date:** [16 October 2021 10:15 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/2 "2021-10-16T10:15:54Z")

</div>

The problem happen while I send to uibuilder  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18f36c3e1a1ca82d9b77474541739830976d230a.png)

here the console  
and my configurator node:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/677daa1839914788867e8fb5a0497e0a18a2cabd.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 October 2021 10:49 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/3 "2021-10-16T10:49:39Z")

</div>

> [@fangfang94](#):
>
> The problem happen while I send to uibuilder

The command you are showing is sending from uibuilderfe to Node-RED, is that where the error is?

Also, you are manually adding the `_socketId` - are you sure that the id you are adding matches the client's current id? The id does change if your browser has any network issues and so temporarily looses connection.

Other than that, I suspect that you are trying to send too large a message. I've never actually done any message size testing with [Socket.IO](http://Socket.IO) (which is what uibuilder uses for its websocket connections).

My guess would be that either the network connection between your browser and the Node-RED Server is a little slow and so the request times out before it is finished or there is some inherent limit in a websocket message.

Possibly reviewing the websocket exchanges in your browser dev tools network tab might shed some light.

Maybe test the length of the payload before sending and split it into chunks if needed.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [16 October 2021 10:53 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/4 "2021-10-16T10:53:16Z")

</div>

> [@fangfang94](#):
>
> if the excel have 100-200 rows (test data) it will work fine.  
> but for the real data usually have 1,000 - 5,000 rows and my dev console will return
> 
> `[uibuilderfe:socket-disconnect] Reason: transport close`

Found this discussion on the [socket.io](http://socket.io) github. Maybe its related

> <https://github.com/socketio/socket.io/issues/3946>
>
> \*\*Describe the bug\*\*
> 
> \* Everytime a certain amunt of data is sent by the clien…t, the socket disconnects instantly.
> \* I am using socket.io@4.1.2
> \* Client in browser (latest Chrome)
> \* Server on Node@16
> 
> 
> \## Steps to reproduce
> 
> \* Connect to server
> \* Let client send a packet that is at least \`1e6\` in size (code sample below)
> \* You will see it disconnect instantly.
> 
> 
> \## Code Sample
> 
> Socket.IO server version: \`4.1.2\`
> 
> \*\*Server\*\*
> 
> \`\`\`js
> import { Server } from "socket.io";
> 
> const io = new Server(3000, {});
> 
> io.on("connection", (socket) =\> {
> console.log(\`connect ${socket.id}\`);
> 
> socket.on("disconnect", () =\> {
> console.log(\`disconnected ${socket.id}\`);
> });
> 
> socket.on("noop", (data) =\> {
> console.log(\`noop received: ${data.length}\`);
> });
> });
> \`\`\`
> 
> Socket.IO client version: \`4.1.2\`
> 
> \*\*Client\*\*
> 
> \`\`\`js
> import { io } from "socket.io-client";
> 
> const socket = io("ws://localhost:3000/", {});
> 
> socket.on("connect", () =\> {
> console.log(\`connect ${socket.id}\`);
> 
> // NOTE: if you change N to 999000, it will NOT disconnect!
> const N = 1e6;
> const noopData = new Array(N).fill(1).join('');
> socket.emit('noop', noopData);
> console.warn(\`noop sent, N=${N}\`);
> });
> 
> socket.on("disconnect", () =\> {
> console.log("disconnect");
> });
> \`\`\`
> 
> \*\*Expected behavior\*\*
> 
> Don't disconnect arbitrarily.
> 
> \*\*Platform:\*\*
> - Device: PC
> - OS: Windows10
> 
> 
> \*\*Further Analysis\*\*
> 
> \* I find the issue to also exist in \`socket.io@3\`, but not in \`socket.io@2\`, which works just fine.
> \* I debugged the issue and found that \`N=1e6\` will disconnect, while \`N=999000\` will NOT disconnect.
> \* That seems to indicate that whatever bug it is, it is largely tied to some sort of 1MB quota.
> \* When putting a breakpoint in the \`onClose\` handler in \`./node\_modules/engine.io-client/lib/transports/websocket.js\`, you can debug the native WebSocket error event (which is in \`arguments\[0\]\`).
> \* It's code is \`1005\`.
> \* \[According to MDN\](https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent), code 1005 - "Indicates that no status code was provided even though one was expected."

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 October 2021 10:56 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/5 "2021-10-16T10:56:22Z")

</div>

Thanks Andy, that's helpful. I didn't know that.

uibuilder now uses [Socket.IO](http://Socket.IO) v4.

I see that there is a potential work-around but it requires a configuration option setting in [Socket.IO](http://Socket.IO) on setup. That is one of the things on my backlog to allow in uibuilder.

I'll also add this limitation to the docs.

---

<div class="post-metadata">

**Author:** ![fangfang94](https://avatars.discourse-cdn.com/v4/letter/f/58956e/32.png) [@fangfang94](https://discourse.nodered.org/u/fangfang94)\
**Post date:** [16 October 2021 10:56 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/6 "2021-10-16T10:56:29Z")

</div>

the websocket is fine, may I know how do I split the payload. (  
Sorry for asking such a stupid question)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 October 2021 10:56 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/7 "2021-10-16T10:56:56Z")

</div>

Not at all a stupid question - a perfectly reasonable one.

---

<div class="post-metadata">

**Author:** ![fangfang94](https://avatars.discourse-cdn.com/v4/letter/f/58956e/32.png) [@fangfang94](https://discourse.nodered.org/u/fangfang94)\
**Post date:** [16 October 2021 10:57 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/8 "2021-10-16T10:57:27Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fdce7052e314b8fb354e1da1f70679c649c2c455.png)

I set the socketId like this.  
so I should add this

```auto
  maxHttpBufferSize: 1e8
});

```

inside to my code right?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 October 2021 10:58 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/9 "2021-10-16T10:58:22Z")

</div>

When sending from the client, you don't need to worry about the socket id, uibuilderfe will add that for you 🙂

---

<div class="post-metadata">

**Author:** ![fangfang94](https://avatars.discourse-cdn.com/v4/letter/f/58956e/32.png) [@fangfang94](https://discourse.nodered.org/u/fangfang94)\
**Post date:** [16 October 2021 10:59 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/10 "2021-10-16T10:59:43Z")

</div>

Understood, so I can remove

```auto
uibuilder.send({
  "topic": "get_socket_id"
});

```

from my code

just stay with

```auto
uibuilder.start();
uibuilder.onChange('msgsReceived', function (newVal) {
  if (msg.topic === "get_socket_id") {
    app_socket = msg._socketId;
  }
});

```

to receive the socketid?

---

<div class="post-metadata">

**Author:** ![fangfang94](https://avatars.discourse-cdn.com/v4/letter/f/58956e/32.png) [@fangfang94](https://discourse.nodered.org/u/fangfang94)\
**Post date:** [16 October 2021 11:06 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/11 "2021-10-16T11:06:00Z")

</div>

Just notice that

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/acd075c21634c73c9a53921d7eea4121212e9dd5.png)

CAUTION: request is not finished yet!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 October 2021 11:09 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/12 "2021-10-16T11:09:57Z")

</div>

That is normal. What happens with websockets is that an http connection is made initially and once the handshake as completed, the connection is "upgraded" from http to ws. In the network list, you will then see a connection with a status of `101` which is the open connection. This will then hopefully stay open as long as that tab is connected.

If you click on that line, you should be able to see the ongoing comms between the client and the server.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b736139be3dc699fa74b4e0f663047dbfa854054.png)

---

<div class="post-metadata">

**Author:** ![fangfang94](https://avatars.discourse-cdn.com/v4/letter/f/58956e/32.png) [@fangfang94](https://discourse.nodered.org/u/fangfang94)\
**Post date:** [16 October 2021 11:13 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/13 "2021-10-16T11:13:45Z")

</div>

Alright, so what I need to do right now is split the data before send to UI builder, and after process the data in node red I receive it back to append the table.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [16 October 2021 12:54 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/14 "2021-10-16T12:54:04Z")

</div>

> [@fangfang94](#):
>
> split the data before send to UI builder

this sounds like a tedious process 😅

you could, _as a test_, add ` maxHttpBufferSize: 1e8` in socket server options  
change `.node-red\node_modules\node-red-contrib-uibuilder\nodes\libs\socket.js`

**Lines 130**

```auto
let ioOptions = {
            'path': uib_socketPath,
            "maxHttpBufferSize": 1e8

```

save, restart NR and test it so @TotallyInformation can have some feedback whether its a feature worth adding in uibuilder.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 October 2021 13:17 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/15 "2021-10-16T13:17:37Z")

</div>

> [@UnborN](#):
>
> this sounds like a tedious process

You _do_ have a computer to hand - so it won't be tedious, that's what computers are for! 😉

> [@UnborN](#):
>
> feedback whether its a feature worth adding in uibuilder

As mentioned, already was on the backlog to be able to change [socket.io](http://socket.io) config. Not all that high up the backlog admitedly but now bumped up some, for sure. It will be up to people to change the config themselves though as, for most people, they wont need it.

If I can. I'll try to squeeze this into the v5 release currently being worked on.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [16 October 2021 13:39 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/16 "2021-10-16T13:39:02Z")

</div>

> [@TotallyInformation](#):
>
> so it won't be tedious, that's what computers are for!

hehe .. i know .. i was thinking about the small complexity of unnecessary code, to have to slice the array of data and send it piece by piece and then in the front end do the reverse to append it to whatever table its gonna be presented on. when it could be as simple as increasing the bufferSize (hard coded)

ps. i read you other post of the new uibuilder changes. excellent work!!

---

<div class="post-metadata">

**Author:** ![fangfang94](https://avatars.discourse-cdn.com/v4/letter/f/58956e/32.png) [@fangfang94](https://discourse.nodered.org/u/fangfang94)\
**Post date:** [16 October 2021 15:29 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/17 "2021-10-16T15:29:54Z")

</div>

after add maxHttpBufferSize and it works like a charm

but I will also learn how to split to prepare for future 🤣

anyways thanks @UnborN and @TotallyInformation

you guys really kind and helpful.

thousand thanks!

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [16 October 2021 17:55 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/18 "2021-10-16T17:55:03Z")

</div>

nice .. glad it worked for you because i tried to test it also by sending a 7mb string as a payload but i couldnt replicate the error.  
anyway .. keep in mind that when you update uibuilder node to a newer version you'll lose that change

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [17 October 2021 12:08 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/19 "2021-10-17T12:08:22Z")

</div>

> [@fangfang94](#):
>
> ```auto
> uibuilder.onChange('msgsReceived', function (newVal) {
> if (msg.topic === "get_socket_id") {
> app_socket = msg._socketId;
> }
> });
> 
> ```

i later noticed that in most of your code screenshots you use the `onChange msgsReceived` event that passes in `newVal`. Based on the [documenation](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-library?id=currently-available-pre-defined-events) newVal here will be a counter / integer ?

In order to get the actual `msg` from NR, shouldn't that be :

```auto
uibuilder.onChange('msg', function(msg){
    console.info('msg received from Node-RED server:', msg)
})

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 October 2021 12:08 UTC](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/20 "2021-10-31T12:08:58Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

[Next page](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288.md?page=2)