I am attempting to link my Firebase real-time database with Cloud Firestore, but I am encountering import errors in the process

I am currently working on enhancing the online functionality of my chat app by implementing a presence system using Firebase Realtime Database. Here is the code snippet that I have created for this purpose:

db refers to Firestore and dbt refers to the Realtime Database

import { auth, db, dbt } from "@/firebase/firebase";
import { ref as rtdbRef, set, onValue, onDisconnect } from "firebase/database";
const connectedRef = rtdbRef(dbt, ".info/connected");
const myConnectionsRef = rtdbRef(dbt, `status/` + user.uid);
onValue(connectedRef, (snap) => {
  if (snap.val() === false) {
  return ;
}
onDisconnect(myConnectionsRef).set("disconnected").then(() => {
  updateFirestoreUser(true, user);
  set(myConnectionsRef, "connected")
});

In order to achieve my goal of updating the 'isOnline' variable in Firestore cloud when a user goes offline, I came across a solution from the Firebase documentation. However, I encountered errors with each line of the provided code:

var userStatusFirestoreRef = firebase.firestore().doc('/status/' + uid);
var isOfflineForFirestore = {
  state: 'offline',
  last_changed: firebase.firestore.FieldValue.serverTimestamp(),
};
var isOnlineForFirestore = {
  state: 'online',
  last_changed: firebase.firestore.FieldValue.serverTimestamp(),
};
firebase.database().ref('.info/connected').on('value', function(snapshot) {
  if (snapshot.val() == false) {
      userStatusFirestoreRef.set(isOfflineForFirestore);
      return;
  };
  userStatusDatabaseRef.onDisconnect().set(isOfflineForDatabase).then(function() {
    userStatusDatabaseRef.set(isOnlineForDatabase);
    userStatusFirestoreRef.set(isOnlineForFirestore);
  })
});

Answer №1

Here is a code snippet that demonstrates how to update a value in Firestore cloud using the real-time database presence system. While it may not be an exact solution to your query, it serves as a suitable workaround.

useEffect(() => {
    const userStatusRef = rtdbRef(dbt, `status/` + currentUser?.uid);
    onValue(userStatusRef, (snapshot) => {
        const data = snapshot.val();
        console.log(data);
        if(data === "connected"){
            updateFirestoreUser(true, currentUser);
        }else{
            updateFirestoreUser(false, currentUser);
        }
    });
    //eslint-disable-next-line
}, [])

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery tip: prevent redundancy in your code by using fadeOut() efficiently

One common issue I encounter is: I have a potentially hidden element I need to perform certain actions on that element If the element is visible, then fade it out using fadeOut() Once the actions are completed, fade the element back in with fadeIn() The ...

What is the most effective way to accurately identify the mobile platform of a user using JavaScript?

I need to determine whether a user has accessed the application through a browser on Android or iOS. The company would like to display slightly different content depending on the platform. While I am aware that navigator.platform can be used for this pur ...

Error: JSON parsing error due to unexpected token C at the beginning of the string

When using ajax and json formatting, I am encountering this message. In PHP, the code array("message" => "Success", "data" => $data) is displayed successfully. However, it is not able to callback to ajax. How can I resolve this issue without deleting ...

What is the best approach to setting up dynamic Vue routing?

I am working on implementing dynamic routing for the website that relies on changes in agreements. Here is the path tree I have set up: const routes = [ { path: "/", redirect: "/home", component: DefaultLayou ...

Troubleshooting jQuery and Mootools compatibility problem in Internet Explorer 8

I am currently working on a webpage that is using both Mootools 1.4 and jQuery 1.5.1 at the same time. I understand that this setup is not ideal, but for various reasons, I have no choice in the matter. Most browsers display the page without any issues, ho ...

Activate Vuetify to toggle a data object in an array list when the mouse hovers over

I'm currently working on a project where I need to toggle a Vuetify badge element for each item in an array when the containing div is hovered over. While I've been able to achieve a similar effect using CSS in a v-for loop with an array list, I ...

Designing a layout for a chat application that is structured from the bottom up

I'm currently in the process of designing a web application for a chat platform. I have access to an API that provides a list of messages: chatsite.com/api/thread/1/messages/ [ { "id": 2, "sender": { "id": 2, ...

The lifespan of my cookie is limited

I am utilizing the jQuery.min.js from https://github.com/carhartl/jquery-cookie and my cookie code looks like this: $(function() { //hide all divs just for the purpose of this example, //you should have the divs hidden with your css //check ...

Using HTML5 to play video from a stored binary string

I have been attempting to extract the data from a video file in binary format using the FileReader.readAsBinaryString(Blob|File) method, as demonstrated in this example http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files. My intention i ...

Guide to verifying the fourth character in the Vuejs confirm password field

password field validation rules: <!-- Password --> <label class="form__group is-required"> <span class="form__label">Password</span> <input class="form__input" type="password" name="for ...

What is the process of retrieving the return value after creating data in Firestore

I have been experimenting with creating data using firestore in the following manner: createData({state}) { return db.collection('items').add({ title: state.title, ingredients: state.ingredients, creat ...

Tips for maintaining a marker at the bottom of the screen while zooming, similar to Google Maps

Is there a way to customize the zoom behavior in my project? I want to maintain the bottom position while resizing the other three directions, and also include pitch adjustments. https://i.sstatic.net/hQdg8.gif https://i.sstatic.net/m3xef.gif I aim for t ...

Modify a class attribute within a function

I need to modify the this.bar property within my class when a click event occurs. The issue is that the context of this inside the click function is different from the this of the class. export class Chart { constructor() { this.bar; } showC ...

Is there no body sent in the $.ajax post request?

My server is returning an error when I try to make a simple post request. It's saying that the post request has no body and all the keys have an "undefined" value. Here is the code for my post request: let alert_title = 'Alert'; let alert ...

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

I have an object type tag on my page that displays a PDF file. Everything is functioning correctly, but in Internet Explorer, my sub-menu is being hidden behind the object tag. var objTag = $('<object></object>') .attr({ data: source ...

Steps for importing jQuery typings into TypeScript:1. First, install the jQuery

I've searched for similar questions, but haven't found one that matches my issue. Can someone help me figure out what to do next? In my Visual Studio project, I used package.json to download jquery typings into the node_modules folder: { "ver ...

Is it possible to silence the other person's audio using livekit?

As a developer, I create meeting apps using React and livekit technology. I am looking for a reliable method to silence the audio of other participants in the virtual room. Any suggestions? ...

Is it possible to use the AngularJS function with the <div> HTML element?

I am facing an issue with displaying a modal when clicking on a <div> element. The function assigned to show the modal by changing the CSS property 'display' from 'none' to 'block' works fine when attached to a button, b ...

What is the most secure approach for defining the file path of an HTML file within an express.js application?

In my directory setup, I have the index.js file located at: path/to/home-page/src/routes This is also where you can find the __dirname. The html file resides at: path/to/home-page/public/bootstrap/Homepage/page.html To serve the html document by relati ...

The global class variable encounters an error when trying to assign the value of "socket" to it

Within my class constructor, I am setting up a Socket connection and then storing the socket parameter in a global class variable (this.socket_variable = socket) so that I can access it across all functions in the class. CODE const { Server } = require(&q ...