WebSocket Not Receiving Data Change Events from Couchbase Sync Gateway in Browser but Works with Mobile Replication

Couchbase Server
1

WebSocket Not Receiving Data Change Events from Couchbase Sync Gateway in Browser but Works with Mobile Replication

I’m trying to set up a WebSocket connection to receive real-time data change events from Couchbase Sync Gateway in my browser. However, I’m facing an issue where the WebSocket connection is established successfully, but no events are received when data in the Couchbase database is updated.

Interestingly, this behavior works perfectly when using Couchbase replication with a mobile device, so the issue seems specific to the WebSocket connection in the browser.

My Setup:

HTML/JavaScript Code for WebSocket Connection:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Couchbase WebSocket Sync Example</title>
</head>
<body>
    <h1>Couchbase Sync Gateway WebSocket Example</h1>
    <div id="data-container">
        <p>No data changes detected yet...</p>
    </div>

    <script>
        // Replace with your Sync Gateway URL
        const syncGatewayURL = "ws://192.168.29.220:4984/user_data/_changes?feed=websocket";

        // Open WebSocket connection
        const socket = new WebSocket(syncGatewayURL);

        // Handle connection open
        socket.onopen = () => {
            console.log("WebSocket connection established.");
        };

        // Handle incoming messages (document changes)
        socket.onmessage = (event) => {
            const change = JSON.parse(event.data);

            // Log the change to console
            console.log("Change Detected:", change);

            // Display the change on the web page
            const container = document.getElementById("data-container");
            const newData = document.createElement("p");
            newData.textContent = `Document ID: ${change.id}, Revision: ${change.changes[0].rev}`;
            container.appendChild(newData);
        };

        // Handle WebSocket errors
        socket.onerror = (error) => {
            console.error("WebSocket error:", error);
        };

        // Handle WebSocket closure
        socket.onclose = () => {
            console.warn("WebSocket connection closed.");
        };
    </script>
</body>
</html>

Sync Gateway Configuration:

{
  "interface": ":4984",
  "adminInterface": ":4985",
  "log": ["*"],
  "databases": {
    "user_data": {
      "server": "http://couchbase-server:8091",
      "bucket": "user_data",
      "username": "Administrator",
      "password": "Administrator",
      "enable_shared_bucket_access": true,
      "import_docs": true,
      "users": {
        "GUEST": {"disabled": false, "admin_channels": ["*"]}
      },
      "num_index_replicas": 0,
      "sync": "function (doc, oldDoc) { if (doc.type == 'location') { channel(doc.channels); } }"
    }
  }
}

What I Have Observed:

  1. Connection Works: The WebSocket connection successfully establishes, as confirmed by logs.
  2. No Data Events in Browser: No change events are received when data is updated in the Couchbase database.
  3. Mobile Replication Works: The same Sync Gateway configuration works perfectly with mobile devices using Couchbase replication, and changes sync without issues.

Questions:

  1. Is there any additional parameter required in the WebSocket URL to receive change notifications?
  2. Could this be related to CORS or authentication issues in the browser environment?
  3. Do I need to include specific filters, heartbeat intervals, or authentication tokens to get updates through WebSockets?

Any help or pointers to resolve this issue would be greatly appreciated!

Thank you in advance!

2

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