Working with WebSocket

Hi everyone!

I have Linux Zoom Bot, from bot i send data to WebSocket and try to retranslate this data to the frontend.

I’m proxy my WebSsocket to domain using nginx, after that I check connection and it work well.

However, I have next error in my Zoom App when I try get and show data

I’m add my domain to allow list, but it don’t help

This is my code for connect and get data in React

useEffect(() => {
    // Establish WebSocket connection
    const socket = io(`http://2675507-cd79415.twc1.net/${meetingID}/`, {
      withCredentials: true
    });

    // Event listener for WebSocket messages
    socket.on('message', function (message) {
      // Log received data in console
      console.log('Received:', message);

      // Extract emotion and percentage from the message
      const [prediction, percentage] = message.split(':');
      const emotionKey = emotion.trim().toLowerCase();
      console.log('Prediction:', prediction, "  PredictionKey: ", predictionKey);

      // Add emotion to buffer
      setBuffer(prevBuffer => [...prevBuffer, emotionKey]);
    });

    return () => {
      // Clean up WebSocket connection 
      socket.disconnect();
    };
  }, []);

And like this looks my WebSocket

const WebSocket = require("ws");
const http = require('http');
const WebSocketServer = new WebSocket.Server({ noServer: true });

function broadcast(message) {
  WebSocketServer.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      console.log(message);
      client.send(`[Linux Bot]: ${message}`);
    }
  });
}

WebSocketServer.on('connection', ws => {
  // ws.id = UUID();
  ws.on('message', message => broadcast(message));
});

const httpServer = http.createServer((req, res) => {
  // Set CORS headers
  res.setHeader('Access-Control-Allow-Origin', '*'); // Replace 'http://frontend:3000' with the actual URL of your frontend app
  res.setHeader('Access-Control-Allow-Headers', '*');
  res.setHeader('Access-Control-Request-Method', '*');
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PUT, DELETE');

  // Respond to preflight requests
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
    return;
  }

  // Handle other HTTP requests here if needed
});

httpServer.on('upgrade', (request, socket, head) => {
  WebSocketServer.handleUpgrade(request, socket, head, (ws) => {
    WebSocketServer.emit('connection', ws, request);
  });
});

httpServer.listen(8765, () => {
  console.log('WebSocket server is running on port 8765');
});

Hey @emotioniq!

The configuration of your client and server look correct, so it seems like this may be an issue with ngrok or your reverse proxy.

One potential issue is that ngrok uses a “stub” when accessing your site. When you connect a websocket, you connect to this stub, which doesn’t have any information regarding CORS.

The workaround here is to disable this by providing the ngrok-skip-browser-warning as mentioned on ngrok’s site.

You can add this as a custom header using socket io as outlined here.

If you’re still having issues, your reverse proxy might also be causing issues with the CORS headers. You would want to check your nginx config to ensure these are set appropriately. Here’s an example of how you can do this.

Another alternative is to use Recall.ai for your meeting bots instead. It’s a simple 3rd party API that lets you use meeting bots to get raw audio/video from meetings without you needing to spend months to build, scale and maintain these bots. Recall also has a simple websocket API that simplifies the process of receiving real time audio and video from calls, and allows you to abstract away the complexities of building/deploying/ websocket servers so you can focus on building your core product offering.

Let me know if you have any questions!