유저간 채팅기능 만들기 1. 채팅방 만들기

크롬 개발자도구에서 이렇게 안나오다가 나오고 있습니다

http://localhost:8080/chatroom 404 (Not Found)

vscode는 BSONTypeError: Argument passed in must be a string of 12 bytes or a string of 24 hex characters or an integer

현재  server.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const MongoClient = require('mongodb').MongoClient;

app.use(express.urlencoded({ extended: true }));
app.use(express.json()); // parse json

app.use('/public', express.static('public'));

app.set('view engine', 'ejs');
app.set('views','./views');

var db;
MongoClient.connect('mongodb+srv://scott:scott@cluster0.eeagm.mongodb.net/perfumeapp?retryWrites=true&w=majority', function(에러, client){
    if (에러) return console.log(에러);
    db = client.db('perfumeapp');
    app.listen('8080', function(){
      console.log('listening on 8080')
    });
  })

  app.get('/sub', function(요청, 응답){
    응답.render('sub.ejs')
  });

  app.get('/write',function(요청, 응답){
    응답.render('write.ejs')
  });
 
  app.get('/', function(요청, 응답){
    응답.render('index.ejs')
  });

  app.get('/chat', function(요청, 응답){
    응답.render('chat.ejs')
  });

  app.get('/mypage', function(요청, 응답){
    응답.render('mypage.ejs')
  });

  app.get('/logout', function(요청, 응답){
    응답.render('logout.ejs')
  });

  app.get('/join', function(요청, 응답){
    응답.render('join.ejs')
  });

  app.post('/add', function(요청, 응답){
    응답.send('전송완료');
    db.collection('notecounter').findOne({name : '작성물갯수'}, function(에러, 결과){
      console.log(결과.totalNote)
      var 총작성물갯수 = 결과.totalNote;
 
      db.collection('note').insertOne( { _id : 총작성물갯수 + 1,제목: 요청.body.title, 금액:요청.body.problem} , function(에러,결과){
        console.log('저장완료');
       
        db.collection('notecounter').updateOne({name:'작성물갯수'},{ $inc :{totalNote:1}},function(에러,결과){
          // db.collection('accounter').updateOne({name:'상품갯수'},{$inc :{AllProduct:1}})
          if(에러){return console.log(에러)}
        })
       
      });
    });
   
  });
  app.get('/list',function(요청,응답){
      db.collection('note').find().toArray(function(에러,결과){
      console.log(결과)
      응답.render('list.ejs',{notes:결과});    
    });
     
  });

  const passport = require('passport');
  const LocalStrategy = require('passport-local').Strategy;
  const session = require('express-session');
 
  app.use(session({secret : '비밀코드', resave : true, saveUninitialized: false}));
  app.use(passport.initialize());
  app.use(passport.session());

  app.get('/login', function(요청, 응답){
    응답.render('login.ejs')
  });

  app.post('/logout',function(요청, 응답){
    요청.logout();
    응답.redirect('/');
  });

  app.post('/login', passport.authenticate('local', {failureRedirect : '/fail'}), function(요청,응답){
    응답.redirect('/sub')
  });
 
  app.get('/pen',로그인했니,function(요청,응답){
    응답.render('pen.ejs');
  });

  function 로그인했니(요청,응답,next){
    if(요청.user){
      next()
    } else {
      응답.send('로그인안하셨는데요')
    }
  }

  app.get('/chat', 로그인했니, function(요청, 응답){

    db.collection('buyroom').find({ member : 요청.user._id }).toArray().then((결과)=>{
      console.log(결과);
      응답.render('chat.ejs', {data : 결과})
    })
 
  });

  app.get('/board',로그인해야지,function(요청,응답){
    응답.render('board.ejs');
  });

  function 로그인해야지(요청,응답,next){
    if(요청.user){
      next()
    } else {
      응답.send('로그인아직인가요')
    }
  }

  passport.use(new LocalStrategy({
    usernameField: 'uid',
    passwordField: 'pw1',
    session: true,
    passReqToCallback: false,
  }, function (입력한아이디, 입력한비번, done) {
    //console.log(입력한아이디, 입력한비번);
    db.collection('user').findOne({ uid: 입력한아이디 }, function (에러, 결과) {
      if (에러) return done(에러)
 
      if (!결과) return done(null, false, { message: '존재하지않는 아이디요' })
      if (입력한비번 == 결과.pw1) {
        return done(null, 결과)
      } else {
        return done(null, false, { message: '비번틀렸어요' })
      }
    })
  }));

  passport.serializeUser(function (user, done) {
    done(null, user.uid)
  });
 
  passport.deserializeUser(function (아이디, done) {
    db.collection('user').findOne({uid : 아이디}, function(에러, 결과){
      done(null, 결과)    
    })    
  });

    app.post('/register', function (요청, 응답) {
    db.collection('user').insertOne({ uid: 요청.body.uid, pw1: 요청.body.pw1, pw2: 요청.body.pw2, 이름: 요청.body.name,  성별: 요청.body.gender, 휴대폰번호:요청.body.ph,주소:요청.body.addr}, function (에러, 결과) {
      응답.redirect('/')
    })
  })

list.ejs

<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/public/main.css">
<title>블루밍 상세페이지</title>
</head>
<body>
<%- include('nav2.html') %>
<h4 class="ml-2 my-3 text-center">상품 목록</h4>

<div class="container">
  <ul class="list-group">
    <% for (var i=0;i<notes.length; i++){ %>
    <li class="list-group-item">
        <p>
        글번호 : <%= notes[i]._id%>
        </p>
         <p>
          제목 : <%= notes[i].제목 %>
        </p>
        <h3> 금액 : <%= notes[i].금액 %></h3>
        <button class="btn btn-secondary chat" data-id="<%= notes[i].작성자 %>">이 유저와 채팅하기</button>
      </li>
    <% } %>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
  $('.chat').click(function(e){
    var _id = e.target.dataset.id;
    $.post('/chatroom',{당한사람id : _id})
    .then(()=>{
      console.log('게시물 생성완료')
    })
  })
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/public/chat.css">
<title>블루밍 상세페이지</title>
</head>
<body>
<%- include('nav2.html') %>
<h4 class="ml-2 my-3 text-center">상품 목록</h4>

<ul class="list-group chat-list">

  <% for (var i=0; i < data.length ; i++){ %>
    <li class="list-group-item" data-id="<%= data[i]._id %>">
      <h6> <%= data[i].title %> </h6>
      <h6> <%= data[i].problem %> </h6>      
      <h6 class="text-small"> <%= data[i].member[0] %> </h6>
    </li>
  <% } %>
   
  <li class="list-group-item">
    <h6>채팅방1</h6>
    <h6 class="text-small">채팅방아이디</h6>
  </li>

</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

/chat 으로 하면 분명 data:결과라고 정의했는데 인식을 하지 않습니다.