converting socket.io to firebase realtime database?

Question

Before I begin, I am trying to make a messaging application for the web, kind of like discord.

I am currently working on a chat that uses Firebase's, Realtime Database, and there is previous code I have from a 'server.js' file that I made once while following some youtube video. This is the code

const functions = require("firebase-functions");

const express = require('express');
const path = require('path');

const app = express();
const server = require("http").createServer(app);

const io = require('socket.io')(server);

app.use(express.static(path.join(__dirname+"/public")));

io.on('connection', function(socket) {
    socket.on('newUser', function(username){
        socket.broadcast.emit('update', username + " joined the conversation");
    });
    socket.on('exituser', function(username){
        socket.broadcast.emit('update', username + " left the conversation");
    });
    socket.on('chat', function(message){
        socket.broadcast.emit('chat', message);
    });
})

exports.app = functions.https.onRequest(app);
server.listen(5050);

And I am trying to understand how I could "translate" this to work with Firebase's realtime database. Sorry if this is a silly question :/.

If anyone could help it would mean the world!!

Here is my (so far) converted code, it doesn't really have the messaging part:

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-analytics.js";
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-database.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: 
  authDomain: 
  databaseURL: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
  measurementId: 
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const database = getDatabase(app);


const htmlApp = document.querySelector(".app");
let unmae = "";
const time = Date.now();

htmlApp.querySelector(".join-screen").addEventListener('keypress', function(event) {
  if (event.code === 'Enter') {
    let username = htmlApp.querySelector('.join-screen #username').value;
    if (username.length == 0) {
      console.warn("Err. Username too short must be 1 Character or higher")
      return;
    }
    
    console.log('username created sucessfully');
    set(ref(database, 'users/'), {
    username: username
    });

    //Pure Javascript Method
    htmlApp.querySelector('.join-screen').classList.remove('active');
    htmlApp.querySelector('.chat-screen').classList.add('active');

    //JQuery
    //put here
  }
});

htmlApp.querySelector(".join-screen #join-user").addEventListener('click', function() { 
  let username = htmlApp.querySelector('.join-screen #username').value;
    if (username.length == 0) {
      console.warn("Err. Username too short must be 1 Character or higher")
      return;
    }
    
    console.log('username created sucessfully');
    set(ref(database, 'users/'), {
    username: username
    });

    //Pure Javascript Method
    htmlApp.querySelector('.join-screen').classList.remove('active');
    htmlApp.querySelector('.chat-screen').classList.add('active');

    //JQuery
    //put here
});

htmlApp.querySelector('.chat-screen #send-message').addEventListener('keypress', function(send) {
  if (send.code === 'Enter') {
    let message = htmlApp.querySelector('.chat-screen #message-input').value
  }
})

I am planning on putting the socket.io to firebase code at the bottom of the code attached ^

converting socket.io to firebase realtime database?

0 Answers