Uibuilder App Vue work fine in Firefox but not in Chrome

General
1

Hi,

I've a app vue to dynamic change a svg fill colors that work fine in Firefox but in Chrome it doesn't work:

websocket.js:121 WebSocket connection to 'ws://-----------------.es:1881/uibuilder/vendor/socket.io/?EIO=4&transport=websocket&sid=jlnC2iuICG6DAFrQAABw' failed: WebSocket is closed before the connection is established.

uibuilderfe.min.js:1 [uibuilderfe:ioSetup:connect_error] SOCKET CONNECT ERROR - Namespace: /xxxxxx, ioPath: /uibuilder/vendor/socket.io, Reason: Invalid namespace Error: Invalid namespace
at Socket.onpacket (socket.js:466:29)
at Emitter.emit (index.mjs:136:20)
at manager.js:204:18

Any idea?

2

So the issue is that the uibuilder client library cannot work out the correct namespace. The namespace should generally be the uibuilder URL prefixed with a forward slash.

So if your uibuilder url is test, the namespace should be /test.

Unfortunately, you are using the old client library and so you have to manually pass the namespace to the uibuilder.start function which you have to call in your Vue startup or mounted function.

If you switch to using the new uibuilder.iife.min.js library version, you don't need to call the start function as it works out the namespace much more reliably for itself.

3

Thanks,

It doesn't updated at the same time that uibuilder node ?

I update the library manually, but the problem is the same

In Firefox it works well but it show this:
[uibuilderfe:ioSetup:client-connect] Server version (6.6.0) not the same as the client version (6.5.0-old)

4

No, clearly stated in various parts of the documentation that the uibuilderfe library is no longer under development and you should move over to the newer library. However, note that there are some breaking differences (also you can remove uibuilder.start() and you need to check your various links in your html as some of the paths have changed) that you need to take into account when doing so.

The new library is a lot more consistent and has many newer features. It is also a lot more robust than the old library.

Don't worry about that - I only spotted that myself today, it is a minor issue in the last release. It has no impact on code.

Can you please share your html and js files (create simple ones if your live ones are complex). Also, could you please create a test uibuilder node set to use the blank Vue template. See if that has the same issue?

And finally, what version of VueJS are you using and is it locally installed (via the uibuilder library manager) or from a CDN (over the Internet)?

Thanks.

5

Hi again, I started the proyect form blank template wich include new library. Now it doesn't any problem with Chrome, but the vue component doesn't work.

This is my vue app, but I don't know how to chage it to use the new Library.

Vue.component("App7", {
    template: `<div id="app7">

SVG PATH ...

<\div>
`,
   data() {
      return {

        // attributes grouped into styles
        appStyle: {
          backgroundColor: '#ffffff'
        },
        valve1Style: {
              fill: '#e15649',
        },
        valve2Style: {
              fill: '#e15649',
        },
        valve3Style: {
              fill: '#e15649',
      },
      };
   },
   computed: {
   },
   mounted: function () {
      uibuilder.start();
      var app = this;

      uibuilder.onChange('msg', function (msg) {
          app.valve1Style.fill = msg.payload.valve1;
          app.valve2Style.fill = msg.payload.valve2;
          app.valve3Style.fill = msg.payload.valve3;
      });
   },
});
6

What errors are you getting?

Also, your Vue components should not try to do uibuilder.start(), this is only required once early in the load process. In any case, start is run for you when the uibuilder client library is loaded, you no longer need to run it unless you are trying to use a 3rd-party dev server (and in that case, you have to pass some parameters).

7

Sorry, the probem was mine, I did all from the beginim with the new library and all works fine.

Thanks

1 Like
8

No problem. Glad you got it working. There shouldn't be another big change to the front-end library now since the newer library is a much better and more flexible structure.

9

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