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

채팅방 중복 개설

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

강의로 돌아가기

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

글쓴이

글

2023년 2월 3일 17:44 #66714

참가자

아래 사진처럼 코드를 짜서, 기존에 존재하는 채팅방이 있으면 해당 채팅방으로 이동하고
 기존에 존재하는 채팅방이 없으면 새로운 채팅방을 개설하게끔 코드를 짰습니다.


문제는 의도한대로 기능은 정상적으로 작동 하는데, 채팅 버튼을 누를 때마다, db 상에 채팅방이 하나씩 더 생기고 있습니다.
무엇이 문제인가요?

2023년 2월 3일 19:59 #66723

키 마스터

forEach반복문 때문에 DB에서 찾아온 document 갯수만큼 코드를 실행해주고있어서그런듯요 
반복문바깥에 쓰거나 합시다

2023년 2월 5일 12:19 #66883

참가자

저 코드에서 어떻게 수정해야하나요.. 밖으로 빼면 빼는데로 오류가 생겨서 어떻게 해야될 지 잘 모르겠어요 도와주세요

2023년 2월 5일 14:04 #66899

참가자

<!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/detail.css" rel="stylesheet" />
<link href="css/basic.css" rel="stylesheet" />
<link href="css/upload.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">

 마켓

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

<hr class="dropdown-divider">

구매 의뢰하기
판매하기


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


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

<div class="container">
<div class="detail-title">
 상세페이지
</div>
<div class="detail-pic my-4" style="background-image: url('https://placeimg.com/640/380/tech')"></div>
<div>
<h5 class="author">업로더 : </h5>
<hr>
<h5 class="title">제목 : </h5>
<p class="date">게시일 : </p>
<button class="btn btn-outline-secondary" id="button">재생</button>
<button class="btn btn-outline-secondary" id="stop">정지</button>
<p class="content">설명 : </p>
<p class="price">가격 : </p>
</div>
<button class="btn btn-outline-secondary" id="done">판매완료</button>
<button class="btn btn-outline-secondary" id="edit">수정</button>
<button class="btn btn-outline-secondary" id="delete">삭제</button>
<button class="btn btn-outline-secondary" id="chat">채팅</button>
</div>

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

if (localStorage.getItem('user') != null) {

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

var 내uid = JSON.parse(localStorage.getItem('user')).uid

$('#done').click(function () {
if (!confirm("판매 완료 처리 하시겠습니까?")) {
alert("취소했습니다.");
 } else {
//게시글 '제목', '가격' 입력 칸에 [판매완료] 입력.
alert("판매 완료 되었습니다.");
 }

//해당 상품 id가 포함된 모든 채팅방의 채팅 기능 비활성화 >> 채팅방 접속 시, " 핀메가 완료되어 더 이상 대화를 나눌 수 없습니다." 출력
 })

var 채팅방id;
var 쿼리스트링 = new URLSearchParams(window.location.search);

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

db.collection("chatroom").where("who", "array-contains-any", [내uid, 판매자uid]).get().then((result) => {
result.forEach((a) => {

//기존 채팅방으로 이동
if (내uid === a.data().who[0] && 판매자uid === a.data().who[1]) {
console.log(a.data().who[0]);
console.log(a.data().who[1]);

//채팅방 id 출력
db.collection("chatroom").get(a.id).then(function (doc) {
console.log(a.id)
 });
기존채팅방id = a.id;
console.log(기존채팅방id);
//기존 채팅방으로 가기
setTimeout(() => window.location.href = 'chatroom.html?id=' + 기존채팅방id, 2000);

 }
// //새로운 채팅방
else if (내uid != a.data().who[0] && 판매자uid != a.data().who[1]) {
var 데이터 = {
who: [내uid, 판매자uid],
판매자uid,
product: 상품명,
date: new Date()
 }
db.collection('chatroom').add(데이터).then(function (doc) {
console.log(doc.id);
sessionStorage.setItem('chatroom', JSON.stringify(doc.id))

채팅방id = JSON.parse(sessionStorage.getItem('chatroom'));

setTimeout(() => window.location.href = 'chatroom.html?id=' + 채팅방id, 2000);
 })
 }
 })
 })
 })

var 판매자uid;
var 상품명;
var 파일위치;

var 쿼리스트링 = new URLSearchParams(window.location.search);

db.collection('product').doc(쿼리스트링.get('id')).get().then((result) => {
console.log(result.data())

판매자uid = result.data().uid;
상품명 = result.data().title0;
파일위치 = result.data().bgm;
$('.author').html('Bgm 업로더 : ' + result.data().name0)
$('.title').html('Bgm 제목 : ' + result.data().title0)
$('.date').html('게시일 : ' + result.data().date0.toDate().toLocaleString())
const button = document.getElementById('button')
const audio = new Audio(파일위치)
button.addEventListener('click', (e) => {
audio.play()
 })
const stopButton = document.getElementById('stop')
stopButton.addEventListener('click', (e) => {
audio.pause()
 })

$('.content').html('설명 : ' + result.data().content0)
$('.price').html('가격 : ' + result.data().price0 + '원')
$('.detail-pic').css('background-image', `url(${result.data().image0})`)
 })

$('#edit').click(function () {
window.location.href = 'edit.html?id=' + 쿼리스트링.get('id')
 })

$('#delete').click(function () {
// var reply = confirm("정말 삭제 하시겠습니까?");
db.collection("product").doc(쿼리스트링.get('id')).delete().then(() => {
setTimeout(() => window.location.href = "market.html", 1500);
 })
 })

$(function () {
db.collection('product').doc(쿼리스트링.get('id')).get().then((result) => {
console.log(result.data().uid)

if (내uid == 판매자uid) {
document.getElementById("done").style.display = "";
document.getElementById("edit").style.display = "";
document.getElementById("delete").style.display = "";
document.getElementById("chat").style.display = "none";
 } else {//조건 1이 아닐떄
document.getElementById("done").style.display = "none";
document.getElementById("edit").style.display = "none";
document.getElementById("delete").style.display = "none";
document.getElementById("chat").style.display = "";
 }
 })

})

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

})

// 내uid = localStorage.getItem('user').uid
// 판매자uid = db.collection('product').get().uid

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

</script>
</body>

</html>

현재 코드는 이렇습니다.

2023년 2월 5일 20:36 #66934

키 마스터

forEach대신 if (result.empty) { 같은거 써봐서 찾아온게 있는지 없는지 체크해봅시다

2023년 2월 6일 11:52 #67008

참가자

말씀해주신 부분 어떻게 사용해야될 지 이해하지 못하겠습니다.

며칠째 같은 코드만 붙들고 있습니다... 도와주세요ㅠㅠㅠㅠ제발요

2023년 2월 6일 14:43 #67036

키 마스터

기존 채팅방이 없으면 result.empty 출력했을 때 true같은게 나올텐데
if (result.empty == true) {
  새로 채팅방 개설하는 코드
}
이럽시다

2023년 2월 6일 16:28 #67060

참가자

계속 같은 질문 남겨서 죄송합니다. 아무래도 해결이 안됩니다... 선생님이 알려주신 코드대로 작성해보았지만 아예 채팅 버튼을 눌러도 아무 반응을 하지 않습니다.

2023년 2월 6일 19:19 #67098

키 마스터

else문도 추가하거나 콘솔창에 무슨에러뜨나 확인해봅시다

2023년 2월 8일 16:23 #67418

참가자

정말 계속 붙들고 있어도 답이 안나옵니다. 검색도 해보고 말씀해주신대로 해봐도 뭐가 답이 나오질 않아요.. 정답 코드 좀 부탁드릴게요

글쓴이

글

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

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

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

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