Question regarding get client/deployment

[HuyNguyenDePaul]

Hello everyone,

I had a question regarding the deployment of a trame application. Currently, I have written a trame application (client+server) using VTK/ParaView and have successfully deployed the application through an iframe. However, from my mentors and the peers I am working with, they have some concerns using an iframe to deploy the trame application. Mainly regarding performance and security. We were thinking of implementing token-based authentication; however, I feel like that there will be a lot of headaches in the future. Therefore, I was looking to see if trame had a better way, and I found (from this thread: https://discourse.paraview.org/t/how-to-communicate-interactively-in-trame-server-and-client/12583) that we could use the get_client method. However, I am not sure if I am misunderstanding what this is method is doing, because when I was experimenting with the examples, it didn't seem to exactly work for me. So, I wanted to make sure before continuing to experiment. From what I understand (please correct me if I am wrong), I will invoke the get_method, similar to how I would use an iframe. I will pass the get_method the WebSocket endpoint, and it will allow me to interact with the client. This get_method will then act as a proxy, enabling user communication solely with the client. Then I will use the iframe and embed the trame client instead of the trame application. As a result, the server of the trame application will be protected from malicious activities, as the user will not interact directly with the server, and only with the trame client. If this is incorrect, please inform me, and if possible, could you suggest other solutions to increase the security/performance when deploying a trame application. If I am making this more complicated than it has to be, please also correct me and could you guide me in the correct direction.

Also, sorry if this is a stupid question, I have next to no knowledge in JS, HTML, CSS and frontend programming/web-development in general.

Best,
Huy Nguyen

[jourdain]

Hi Huy,

I don't understand what you are describing, which probably means that it is not happening as you think. But technically, trame already secures the WebSocket connection with a token-based system. So, as long you leverage it, you can be good.
I guess for those deployment/security question, it is hard to help without having the full picture and some real thinking around your specific setup. It might be worth looking into some small support from us so we can go to the bottom of it together.

[HuyNguyenDePaul]

Hi Mr. Jourdain,

Sorry for not being clear. What I meant is that when I looked at the discussion and what the example from the repository was trying to accomplish, I thought that:

1. I was able to have another python process (client.py) drive my trame.py application (client+server).
2. I would be able to invoke the get_client method, pass the WebSocket endpoint of the python process (client.py).
3. Once I connected to client.py, I would have access to the state variables from trame.py application. This is where I get confused. Since my trame.py application has client+server, am I writing an entirely new client side or am I somehow accessing the client from trame.py (the application)?
4. Regardless of my confusion regarding the third bullet point. I thought that once I was able to have the client.py written, I would be able to replace the trame.py (application) being embedded in the iframe with the client.py (the python process). I thought this would be achievable since from the example client.py (https://github.com/Kitware/trame-server/blob/master/examples/client-server/client.py), we are starting a new server. I could specify the port and pass it to the iframe. Effectively meaning that users would only be able to interact with the client.py and not the trame.py (application). This is why I called the client.py a proxy.

However, it seems I have totally misunderstood what the purpose of this method is, or the capabilities of this method. I did not know that trame secures the WebSocket connection with a token-based system, thank you for telling me, I will look into this further and discuss this with my peers and mentors.

I have one big question I was wondering if you or anyone could answer. Is using iframe to deploy a trame application a good solution? I feel the more and more I work with trame and iframes, I feel like I will encounter a big problem sooner or later as this is roundabout solution. I feel like there should be a better solution, but I am unsure of it due to the lack of my experience in frontend/web development. Anyway, thank you for your response!

Best,
Huy Nguyen

[jourdain]

Thanks for the clarification. I guess I was confused initially since there is no relationship between the python client and the iframe usage. I guess the true question is what is your use case. Why do you do with trame and why do you need an iframe? What kind of data exchange do you have between your main web app and trame? Do you need data exchange between you other web server and the trame process?

…

On Wed, Jul 10, 2024 at 00:25 Huy Nguyen ***@***.***> wrote: Hi Mr. Jourdain, Sorry for not being clear. What I meant is that when I looked at the discussion and what the example from the repository was trying to accomplish, I thought that: 1. I was able to have another python process (client.py) drive my trame.py application (client+server). 2. I would be able to invoke the get_client method, pass the WebSocket endpoint of the python process (client.py). 3. Once I connected to client.py, I would have access to the state variables from trame.py application. This is where I get confused. Since my trame.py application has client+server, am I writing an entirely new client side or am I somehow accessing the client from trame.py (the application)? 4. Regardless of my confusion regarding the third bullet point. I thought that once I was able to have the client.py written, I would be able to replace the trame.py (application) being embedded in the iframe with the client.py (the python process). I thought this would be achievable since from the example client.py ( https://github.com/Kitware/trame-server/blob/master/examples/client-server/client.py), we are starting a new server. I could specify the port and pass it to the iframe. Effectively meaning that users would only be able to interact with the client.py and not the trame.py (application). This is why I called the client.py a proxy. However, it seems I have totally misunderstood what the purpose of this method is, or the capabilities of this method. I did not know that trame secures the WebSocket connection with a token-based system, thank you for telling me, I will look into this further and discuss this with my peers and mentors. I have one big question I was wondering if you or anyone could answer. Is using iframe to deploy a trame application a good solution? I feel the more and more I work with trame and iframes, I feel like I will encounter a big problem sooner or later as this is roundabout solution. I feel like there should be a better solution, but I am unsure of it due to the lack of my experience in frontend/web development. Anyway, thank you for your response! Best, Huy Nguyen — Reply to this email directly, view it on GitHub <#561 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACH45SJTFCECKA3KZNJOR3ZLRWPXAVCNFSM6AAAAABKSFGU52VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMBQGM2DKOA> . You are receiving this because you commented.Message ID: ***@***.***>

[HuyNguyenDePaul]

Hi Mr. Jourdain,

Yes, I should have given more context on our project. That's my bad. So currently, we have a Django webserver, a database server, and a trame/visualization(s) server. All of these processes are ran on one HPC machine, but the mentor(s) are thinking of running each of these servers on different machine(s) in the future.

Why do you do with trame and
why do you need an iframe?

The trame/visualization server is meant to serve users visualizations. Also, we are using Trame because it is easy to use, since none of us are experts in JavaScript. We currently need an iframe because it was the easiest implementation of loose coupling. However, iframes seem to be a big problem. Actually, just yesterday, I was tasked with rewriting the Trame application, and implementing the client in JavaScript (Vue). I looked at your example here: https://github.com/Kitware/vtk-web-solutions/tree/master/client-server and have started to implement it. Your example was great for me, and I was able to rewrite the server_side code of my application. Although there have been some problems with the vue_client due to my lack of experience with JavaScript. I was also wondering if I could get support for such things as this, as I see myself writing a lot of JavaScript code related to trame in the future, and it would not be a bad idea to receive some professional help.

What kind of data exchange do you have between
your main web app and trame? Do you need data exchange between you other
web server and the trame process?

Django needs to send the trame/visualization server "big" data and other important information. I am not sure what is considered "big", but it is the file size is larger than 100GB. Trame client will then tell the trame server, and the server will read this data, do all the computation, and return visualizations. The trame/visualization(s) server will also need to send some information back to Django, such as modified data, so that data will not be lost. I looked at your example: https://github.com/Kitware/trame-iframe/tree/master/examples and this is basically what is needed. Except currently, we aren't using trame-iframe (I only discovered this widget yesterday), we are using html iframe, and simply passing the trame/visualization http website url (e.g. http://localhost:8080/).

Knowing all this, although I want to keep using an iframe, I think the mentor(s) are not fond of using iframes to deploy the trame application. But I had some questions regarding trame-iframe if that is fine, they might sound stupid but I really do not know much about frontend/web-development. What is the main difference between passing the trame application http website url and the way that trame-iframe works? I don't know much about web-development, but from what I can see when I looked at the example, I saw that no url was ever passed, which is quite curious to me.

Note: I may have misrepresented some aspects of the project/context or maybe some of it does not make sense. Sorry if it doesn't make all that much sense, this is only from what I understand (I only work on a portion of the project) and there are a lot more knowledgeable people than me who are working on this project. I hope that some peers of mine who are more knowledgeable could better give an answer to your question(s).

Best,
Huy Nguyen

[jourdain]

Thanks for the clarification. Based on what you are saying, it seems that the iframe is indeed the simplest. But you might be able to get away in pure trame and having your trame server talking to django directly. Or going full custom on the js side. But we can definitely help either with some coding help or guidance. Feel free to reach out to https://www.kitware.com/trame/ for more details.

[HuyNguyenDePaul]

Hi Mr. Jourdain,

I was able to successfully write the vue-client for my trame_server, thanks to your various examples! But while I was writing the vue-client, a question occurred to me. I was wondering how exactly does trame work with Vue.js. I was reading your response "Trame define a server and generate the HTML template for Vue.js so it can be connected to that server and drive it" (from here: https://discourse.vtk.org/t/trame-possibilities-of-frontend-and-backend-separation/10219"). And I was wondering if it would be possible to directly grab the vue.js code that would be generated. If this is possible, I think that would save me quite a lot of time writing JavaScript/the client. Although, I don't think this quite possible since I have looked at the source code and have modified it, but it doesn't produce what I am expecting it too. Therefore, I was wondering if you had any suggestions. Also, since I am a student (undergraduate) and so are my peers (graduate), I was wondering if we students would get discount if we required professional assistance?

Best,
Huy Nguyen

[jourdain]

Just print the layout. That will give you the vue template. For the js, you should look at trame-client.