reactjsdjangowebsocketproxyguacamole

Websocket disconnects immediately after handshake (guacamole)


Forgive bad formatting as it is my first question on here, and thanks in advance for reading! I am currently writing a remote web application that utilises Apache Guacamole to allow RDP, VNC, and SSH connections. The components I am using are:

Django for backend server - API calls (database info) and Guacamole Websocket Transmissions; I am using Pyguacamole with Django consumers to handle Guacamole Server communication; Reactjs for frontend and proxy; Nginx for reverse proxy; All this is hosted on a Centos Stream 8 vm

Basically, my websocket has trouble communicating through a proxy. When I run the application without a proxy (firefox in centos running localhost:3000 directly), the guacamole connection works! Though this is where the application communicates directly with the Django server on port 8000. What I want is for the react application to proxy websocket communications to port 8000 for me, so my nginx proxy only has to deal with port 3000 for production.

Here is the code I have tried for my react proxy (src/setupProxy.js):

const { createProxyMiddleware } = require('http-proxy-middleware');
let proxy_location = '';

module.exports = function(app) {
    app.use(createProxyMiddleware('/api', { target: 'http://localhost:8000', changeOrigin: true, logLevel: "debug" } ));
    app.use( createProxyMiddleware('/ws', { target: 'ws://localhost:8000' + proxy_location, ws: true, changeOrigin: true, logLebel: "debug" } ));
};

I have also already tried with http://localhost:8000 for the ws target url. Also, the api proxy works, but I am unsure if the ws proxy works. After making a websocket request, the consumer does a guacamole handshake, but disconnects the websocket before it can send anything back.

Also, the HPM output shows that it does try upgrading to websocket, but the client disconnects immediately.

Do let me know if you require more information.


Solution

  • I managed to find what was wrong, it was a small mistake though I felt the need to update this thread.

    Basically, in consumers I used accept() instead of websocket_accept(), receive() instead of websocket_receive(), and so on. Careless mistake on my part, but hope this helps someone out!