Firebase Real-time Database connection from Java -> JavaScript - javascript

I want to set up a Firebase Real-time Database connection from my Java backend to my JavaScript frontend, but the messages are not pushed to the client.
The backend Java code looks like this:
FirebaseOptions options = new FirebaseOptions.Builder()
.setServiceAccount(getServletContext().getResourceAsStream("/WEB-INF/xxx.json"))
.setDatabaseUrl("https://xxx.firebaseio.com")
.build();
FirebaseApp.initializeApp(options);
DatabaseReference ref = FirebaseDatabase
.getInstance()
.getReference();
ref.child("users").setValue("aaa");
My javascript code on the frontend looks like this:
var config = {
apiKey: "xxx",
authDomain: "xxx.firebaseapp.com",
databaseURL: "https://xxx.firebaseio.com",
storageBucket: "xxx",
messagingSenderId: "xxx"
};
firebase.initializeApp(config);
var database = firebase.database();
var myRef = firebase.database().ref("users");
myRef.on('value', function(snapshot) {
alert(5);
});
Is there something wrong with this code or why are the messages are not pushed? Am I missing something?

Related

"firebase is not defined" error using the current vr. of firebase

I tried making a simple chat forum using YouTube tutorial. upon its release it works wonderful so I tried using its code structure while updating the core infos and it only result in an error. I tried many time to avail, I'm new to programming so im looking for help.
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"</script>
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-database.js"</script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyCTBkpUWMU_pL6qIb_hMXVDS_sCYQ2BROU",
authDomain: "rd-try-ce276.firebaseapp.com",
databaseURL: "https://rd-try-ce276-default-rtdb.firebaseio.com",
projectId: "rd-try-ce276",
storageBucket: "rd-try-ce276.appspot.com",
messagingSenderId: "47874427531",
appId: "1:47874427531:web:819f34b203e6ae82c0628e"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
function sendMessage() {
alert("Hello! I am an alert box!");
//get message
var message = document.getElementById("message").value;
//save in database
firebase.database().ref("messages").push().set({
"message": message
})
}
</script>

How can I use data collection from firestore in html

currently I creating the website using cloud firestore as my database. Right now I can query the data from my collection but it didn't work when I try to display that data on my html web page.
const firebase = require("firebase/app")
require("firebase/firestore")
var firebaseConfig = {
apiKey: "AIzaSyCxrJbfDOorE9H4E0I2O98tLftoxFAHNLU",
authDomain: "school-bus-tracking-syst-3ff71.firebaseapp.com",
databaseURL: "https://school-bus-tracking-syst-3ff71.firebaseio.com",
projectId: "school-bus-tracking-syst-3ff71",
storageBucket: "school-bus-tracking-syst-3ff71.appspot.com",
messagingSenderId: "200434933461",
appId: "1:200434933461:web:4cece32389af487c944c5c",
measurementId: "G-Q9C278TWTV"
};
firebase.initializeApp(firebaseConfig);
var firestore = firebase.firestore();
const inputTextfield = document.querySelector("#contactnum");
const docRef = firestore.doc("driver/D001");
docRef.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
inputTextfield.innerText = doc.data().contactNo;
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
and my HTML file is
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-firestore.js"></script>
<input type="text" id="contactnum">
<script scr = "./we.js"></script>
I tried this but I don't get anything display on my html website. Thank you in advance!

Firebase realtime database not returning any data

I am trying to retrieve an object the i added to my firebase realtime database But i am not getting anything and i dont know why . i made sure to implement and call firebase correctly .
This is the response i get one i cal the database .
and this is my imlimentation
<script>
var firebaseConfig = {
apiKey: "*",
authDomain: "*",
databaseURL: "*",
projectId: "*",
storageBucket: "*",
messagingSenderId: "*",
appId: "*"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var dbRef = firebase.database();
var contactsRef = dbRef.ref("survey");
console.log(contactsRef)
</script>
You need to attach a listener to retrieve the data:
var dbRef = firebase.database();
var contactsRef = dbRef.ref("survey");
contactsRef.once('value').then(function(snapshot) {
console.log(snapshot.val());
});
snapshot.val() will give you all the data under node survey.
For more information check this:
https://firebase.google.com/docs/database/web/read-and-write#read_data_once

Write to Firebase Storage with JavaScript gives "Cross-Origin Request Blocked"

I have made a web app which includes a form with two fields and what I want to happen is when I click the button, my data should be written to Firebase. So I made an onclick function which writes to Firebase, the function is called but it doesn't write to Firebase. I get this error message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
https://firebasestorage.googleapis.com/v0/b/storymap-da000.appspot.com/o?name=11-2-2018-0-6-27.
(Reason: CORS request did not succeed).[Learn More]
My vanilla JavaScript code:
var config = {
apiKey: "XXX",
authDomain: "XXX",
databaseURL: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX"
};
firebase.initializeApp(config);
window.addEventListener('load', function() {
const fileButton = document.getElementById("fileButton");
const up = document.getElementById("up")
});
fileButton.addEventListener('change', function(e){
var file = e.target.files[0];
var storageRef = firebase.storage().ref(image_name);
storageRef.put(file)
});
up.onclick=function(){
var lat = new URL(location.href).searchParams.get("lat")
var lng = new URL(location.href).searchParams.get("lng")
var title = document.getElementById("title").value
var story = document.getElementById("story").value
var database = firebase.firestore()
database.collection("Stories").add({
title:title,
story:story,
lat: lat,
lng:lng,
url:image_name});}
Any ideas?
i think you need to register your domain in your firebase app

Firebase data retrieval to web

// Initialize Firebase
var config = {
apiKey: "AIzaSyBz13eirmEOGD1uXOZwf6tKGnEsjfwsUFo",
authDomain: "platformtechproject.firebaseapp.com",
databaseURL: "https://platformtechproject.firebaseio.com",
projectId: "platformtechproject",
storageBucket: "platformtechproject.appspot.com",
messagingSenderId: "1065758005439"
};
firebase.initializeApp(config);
var database = firebase.database();
ref msgs clllection
var msgRef = firebase.database().ref('survey');
I am trying to connect to firebase, but I continue getting these errors on chrome console failing to connect to firebase:
Chrome console error
This is because you did not write:
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
in the <head>...</head>
You have to write it to be able to use the firebase sdk in your project.
more info here:
https://firebase.google.com/docs/web/setup

Categories

Resources