로그인
장바구니에 상품이 없습니다.

파이어베이스 채팅방 질문

이 주제에는 17개 답변, 2명 참여가 있으며 codingapple가 2 년, 6 월 전에 전에 마지막으로 업데이트했습니다.

강의로 돌아가기

8 글 보임 - 11 에서 18 까지 (총 18 중에서)

글쓴이

글

2023년 1월 31일 15:53 #66172

참가자

chat.html 코드는 아래와 같습니다.

2023년 1월 31일 16:53 #66186

키 마스터

db.collection('chatroom').add() 말고 어떤 chatroom안의 document인지도 표기해서 .add() 해야할듯요

2023년 1월 31일 17:00 #66189

참가자

어떤 document를 지정해야되는지 보이기는 하는데, 코드로 명시를 어떻게 해야될 지 모르겠습니다.. 도움 부탁드려요

2023년 1월 31일 17:34 #66196

참가자

선생님꼐서 예시로 작성해주신 chat.html 코드에서는 .text-small 상의 채팅방 id를 가져다가 명시하면 되는데, 제가 수정하여 작성한 코드에서는 채팅방 id를 어떻게 가져다가 명시해야될 지를 모르겠습니다 ㅜㅜ

2023년 1월 31일 17:45 #66199

참가자

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>채팅하기</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="css/chat.css" rel="stylesheet">
<link href="css/basic.css" rel="stylesheet">
</head>

<body>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.6.2.min.js"
integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>

<script>
var firebaseConfig = {
apiKey: "AIzaSyC0yKgR3yvA5YMKwCOk_SIQbfDIpyKh20w",
authDomain: "stockbgm-c32fb.firebaseapp.com",
projectId: "stockbgm-c32fb",
storageBucket: "stockbgm-c32fb.appspot.com",
messagingSenderId: "406644331721",
appId: "1:406644331721:web:fac7736eebed51e9fca918",
measurementId: "G-4SPZTKP7YY"
 };
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

</script>

<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
< img src="images/logo.png">

<div id="nav-name">
<span class="ms-auto mx-2" id="userName"></span>
</div>

<div id="nav-login">
<span class="ms-auto mx-2" id="userName">로그인</span>
</div>

<div id="nav-logout">
<span class="ms-auto mx-2" id="userName"><a class="navbar-brand" type="submit" class="btn btn-primary"
id="logout">로그아웃</span>
</div>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">

<div id="nav-mypage">
<li class="nav-item">
마이페이지

</div>

<li class="nav-item">
About

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
 마켓

<ul class="dropdown-menu">
마켓
Bgm 마켓
구매 의뢰 목록

<hr class="dropdown-divider">

구매 의뢰하기
판매하기


<li class="nav-item">
(예정)


</div>
</div>
</nav>

<div class="container p-4 detail">
<div class="row">

<div class="chat-room">
<ul class="list-group chat-content">
<!-- <span class="chat-box">채팅방1 content0</span>
 <span class="chat-box">채팅방1 content0</span>
 <span class="chat-box mine">채팅방1 content0</span> -->

<div class="input-group">
<input class="form-control" id="chat-input" value="채팅을 입력하세요."
onfocus="if(this.value=='채팅을 입력하세요.'){this.value=''}"
onblur="if(this.value==''){this.value='채팅을 입력하세요.'}" />
<button class="btn btn-secondary" id="send">전송</button>
</div>
</div>
</div>
</div>

<script>
const db = firebase.firestore();
const storage = firebase.storage();

//비회원 접속 차단 코드
if (localStorage.getItem('user') != null) {

 }
else {
alert('로그인 후 서비스를 이용하실 수 있습니다.')
window.location.href = "login.html"
 }

var 내uid = JSON.parse(localStorage.getItem('user')).uid;
var 쿼리스트링 = new URLSearchParams(window.location.search);
var 채팅방id = $(this).children('.text-small').text();

//메시지 전송 코드
$('#send').click(function () {

var 데이터 = {
content: $('#chat-input').val(),
date: new Date(),
uid: 내uid,
 }

db.collection('chatroom').doc(채팅방id).collection('messages').add(데이터)

input.value = null;
 })

db.collection('chatroom').where('who', 'array-contains', 내uid).get().then((result) => {
result.forEach((a) => {
console.log(a.data())

db.collection('chatroom').doc(채팅방id).collection('messages').orderBy('date').onSnapshot((result) => {
$('.chat-content').html('');

result.forEach((a) => {
messageUid = a.data().uid;
if (내uid == messageUid) {
var 템플릿 = `
 <li><span class="chat-box mine">${a.data().content}</span></li>
 `;
$('.chat-content').append(템플릿)
 } else {
var 템플릿 = `
 <li><span class="chat-box">${a.data().content}</span></li>
 `;
$('.chat-content').append(템플릿)
 }

 })
//채팅 스크롤 다운 코드
$('.chat-content').scrollTop($('.chat-content').prop('scrollHeight'));
 })

 })
 })

// // 유저정보 확인
// if (localStorage.getItem('user') != null) {
// var 뺀거 = localStorage.getItem('user')
// $('#userName').html(JSON.parse(뺀거).displayName)
// }

// firebase.auth().onAuthStateChanged((user) => {
// if (user) {
// console.log(user.uid)
// console.log(user.displayName)
// localStorage.setItem('user', JSON.stringify(user))
// }

// })

//회원/비회원 nav바 show/hide 및 유저정보 확인 코드
$(function () {
if (localStorage.getItem('user') != null) {
var 뺀거 = localStorage.getItem('user')
$('#userName').html(JSON.parse(뺀거).displayName)
document.getElementById("nav-login").style.display = "none";
document.getElementById("nav-logout").style.display = "";
document.getElementById("nav-name").style.display = "";
document.getElementById("nav-mypage").style.display = "";
 } else {
document.getElementById("nav-login").style.display = "";
document.getElementById("nav-logout").style.display = "none";
document.getElementById("nav-name").style.display = "none";
document.getElementById("nav-mypage").style.display = "none";
 }
 })

firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log(user.uid)
console.log(user.displayName)
localStorage.setItem('user', JSON.stringify(user))
 }

})

//로그아웃 코드
$('#logout').click(function () {
firebase.auth().signOut()
localStorage.removeItem('user')
setTimeout(() => window.location.href = "index.html", 3500);
alert('로그아웃을 완료했습니다.');
 })

//채팅 입력창 엔터키로 메세지 전송하기 코드
var input = document.getElementById("chat-input");

input.addEventListener("keypress", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("send").click();
 }
 });
</script>

</body>

</html>



위의 코드에서, 채팅방id는 어떻게 변수 선언해야되나요?? 도움이 꼭 필요합니다...

2023년 1월 31일 20:01 #66226

키 마스터

로컬스토리지나 html안에 채팅방id를 몰래 저장해놓아야 가져올 수 있을듯요 
채팅방id가 url에 표기되어있으면 그걸 가져옵시다

2023년 2월 2일 14:07 #66493

참가자

사진에서처럼 #chat 버튼 눌러서 채팅방을 생성한 직후에, 로컬스토리지에 생성된 채팅방의 id를 저장하고자 하는데요
자꾸만 전체 채팅방의 id를 가져오는데, 해당 채팅방에서 새로 생성된 채팅방 id만 끌어 오려면 코드를 어떻게 수정해야하나요?

2023년 2월 2일 14:39 #66504

키 마스터

db.collection().add().then(function(doc) {
    console.log(doc.id);
})
쓰면 방금 add로 집어넣은 document id 출력해줍니다

글쓴이

글

8 글 보임 - 11 에서 18 까지 (총 18 중에서)

답변은 로그인 후 가능합니다.

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠