파이어베이스 강의 채팅방 응용 문제

6 글 보임 - 1 에서 6 까지 (총 6 중에서)

글쓴이

글

2023년 1월 16일 12:50 #62867

참가자

<!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

마켓

중고 마켓

구매 의뢰 목록

<hr class="dropdown-divider">

구매 의뢰하기

판매하기

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

<form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav>

<div class="container p-4 detail">
<div class="row">
<div class="col-3 p-0">
<ul class="list-group chat-list">
<!-- <li class="list-group-item">
 <h6>채팅방1</h6>
 <h6 class="text-small">채팅방아이디</h6>

-->

</div> <div class="col-9 p-0"> <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>

-->

<script>
const db = firebase.firestore();
const storage = firebase.storage();
var 내uid = JSON.parse(localStorage.getItem('user')).uid;

$('#send').click(function () {

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

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

var 채팅방id;

db.collection('chatroom').where('who', 'array-contains', 내uid).get().then((result) => {
result.forEach((a) => {
console.log(a.data())
var template = `<li class="list-group-item">
 <h6>${a.data().product}</h6>
 <h6 class="text-small">${a.id}</h6>
 </li>`
$('.chat-list').append(template)

$('.list-group-item').click(function (e) {
채팅방id = $(this).children('.text-small').text();

e.stopImmediatePropagation();

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

var 채팅방uid;
result.forEach((a) => {

var 템플릿 = `
 <li><span class="chat-box">${a.data().content}</span></li>
 `;
// console.log(a.data())
console.log(a.data().uid);
채팅방uid = a.data().uid;

if (내uid == 채팅방uid) {
$('.chat-box').addClass('mine');
 }
else {
document.getElementById("chat-box");
 }

$('.chat-content').append(템플릿)

 })
 })

 })
 })
 })

// // 유저정보 확인
// 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))
// }

// })

$(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 {//조건 1이 아닐떄
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('로그아웃을 완료했습니다.');
 })

</script>

</body>

</html>

현재 코드는 위와 같습니다. 제가 보낸 메세지가 채팅방 우측에 뜨지 않고 첨부된 사진처럼 가장 최근에 전송한 메세지만 좌측에 뜨는데,
 코드 상에 무슨 문제가 있는건가요?
어떻게 해야 제가 보낸 메세지가 우측에 출력 될까요?

2023년 1월 16일 15:23 #62901

codingapple

키 마스터

.chat-box라는 html이 생성되기 전에 
$('.chat-box').addClass('mine'); 해서 그런듯요 
uid가 같으면 <li><span class="chat-box mine">${a.data().content}</span></li> 이런거 추가하라고 합시다

2023년 1월 16일 16:17 #62905

이형민

참가자

해당 부분 참고하여,

result.forEach((a) => {

var 템플릿 = `
 <li><span class="chat-box mine">${a.data().content}</span></li>
 `;
// console.log(a.data())

$('.chat-content').append(템플릿)

console.log(a.data().uid);
messageUid = a.data().uid;

if (내uid == messageUid) {
document.getElementById("chat-box mine");
 }
else {
$('chat-box mine').removeClass('mine');
 }
 })

위와 같이 작성해보았는데,

이렇게 우측으로 다 치우쳐서 나오는데 어떤게 문제인가요?

2023년 1월 16일 17:22 #62918

이형민

참가자

console.log() 이용해서 '내uid', 'messageUid' 모두 확인해본 결과도 이상 없습니다. 그래도 작동을 저렇게 하는데 도와주세요ㅠㅠ

2023년 1월 16일 20:20 #62950

codingapple

키 마스터

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(템플릿)
}
합시다

2023년 1월 16일 23:23 #63008

이형민

참가자

해결 되었습니다!! 감사합니다!!!!

글쓴이

글

6 글 보임 - 1 에서 6 까지 (총 6 중에서)

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

로그인

파이어베이스 강의 채팅방 응용 문제

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