Scribd
Upload
2 views2 pages

App Js

This document contains JavaScript code for a chat application using Firebase. It initializes Firebase services, handles message sending with optional file uploads, and retrieves messages in real-time to display in the chat interface. The code also includes functionality for automatically resizing the message input area and playing a notification sound when new messages arrive.

Uploaded by

alex181672
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views2 pages

App Js

This document contains JavaScript code for a chat application using Firebase. It initializes Firebase services, handles message sending with optional file uploads, and retrieves messages in real-time to display in the chat interface. The code also includes functionality for automatically resizing the message input area and playing a notification sound when new messages arrive.

Uploaded by

alex181672
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.

1/firebase-
app.js";
import {
getFirestore, collection, addDoc, serverTimestamp, onSnapshot,
getStorage, ref, uploadBytes, getDownloadURL
} from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";

const firebaseConfig = {
apiKey: "AIzaSyAFr0X5iAx4ESYKpfZmkcYIR6W4J7Gjdlw",
authDomain: "bogdanio-chat.firebaseapp.com",
projectId: "bogdanio-chat",
storageBucket: "bogdanio-chat.appspot.com", // Проверьте название в Firebase
Console!
messagingSenderId: "672006362714",
appId: "1:672006362714:web:60bee11c290f7029ba2a63"
};

const app = initializeApp(firebaseConfig);


const db = getFirestore(app);
const storage = getStorage(app);

// Элементы DOM
const msgForm = document.getElementById("msgForm");
const msgInput = document.getElementById("msgInput");
const fileInput = document.getElementById("fileInput");
const messages = document.getElementById("messages");
const notifySound = document.getElementById("notifySound");

// Автоматическое расширение textarea


msgInput.addEventListener("input", () => {
msgInput.style.height = "auto";
msgInput.style.height = msgInput.scrollHeight + "px";
});

// Отправка сообщений
msgForm.addEventListener("submit", async (e) => {
e.preventDefault();
const text = msgInput.value.trim();
const file = fileInput.files[0];

if (!text && !file) return;

try {
let mediaUrl = "";
if (file) {
const fileRef = ref(storage, `uploads/${Date.now()}_${file.name}`);
await uploadBytes(fileRef, file);
mediaUrl = await getDownloadURL(fileRef);
}

await addDoc(collection(db, "messages"), {


text,
mediaUrl,
timestamp: serverTimestamp()
});

msgInput.value = "";
fileInput.value = "";
msgInput.style.height = "auto";
} catch (error) {
console.error("Ошибка отправки:", error);
alert("Ошибка: " + error.message);
}
});

// Получение сообщений в реальном времени


onSnapshot(collection(db, "messages"), (snapshot) => {
messages.innerHTML = "";
snapshot.forEach(doc => {
const msg = doc.data();
const msgEl = document.createElement("div");
msgEl.className = "message";
msgEl.innerHTML = `<div>${msg.text || ""}</div>`;

if (msg.mediaUrl) {
const isImage = msg.mediaUrl.match(/\.(jpe?g|png|gif|webp)$/i);
const isVideo = msg.mediaUrl.match(/\.(mp4|webm|ogg)$/i);

if (isImage) {
msgEl.innerHTML += `<img src="${msg.mediaUrl}" alt="Image">`;
} else if (isVideo) {
msgEl.innerHTML += `<video controls src="${msg.mediaUrl}"></video>`;
}
}

messages.appendChild(msgEl);
});
messages.scrollTop = messages.scrollHeight;
notifySound.play();
});

You might also like