강사님 처럼 실시간으로 채팅이안되는듯합니다.

[정중식]

왼쪽 채팅방을 클릭해야 새로운채팅내용이 로드되요
선생님 동영상을보면 전송누르자마자 바로 새로운채팅내용이 로드되는데.. 혹시 제가 뭐 빠트린게있을까요? 
계속 선생님코드와 대조해봤는데 못찾겠습니다..

chat.js

function init() {
  $('#send').click(function () {
    var chatText = $('#chat-input').val();
    var data = {
      parent: nowChatRoomId,
      content: chatText,
    };

    $.post('/message', data).then((result) => {
      
    });
  });

  var nowChatRoomId;
  var eventSource;

  $('.list-group-item').click(function (e) {
    $(this).css('background-color', '#eee');
    nowChatRoomId = $(this).attr('data-id');
    $('.chat-content').html('');

    // 프론트엔드에서 실시간 소통채널 여는법
    eventSource = new EventSource('/message/' + nowChatRoomId);
    eventSource.addEventListener('test', function (e) {
      var data = JSON.parse(e.data);
      data.forEach((item) => {
        $('.chat-content').append(
          `<li><span class="chat-box">${item.content}</span></li>`
        );
      });
    });
  });
}

init();

message.js

app.get('/message/:parentid', isLogin, function (req, res) {
  res.writeHead(200, {
    Connection: 'keep-alive',
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
  });

  db.collection('message')
    .find({ parent: req.params.parentid })
    .toArray()
    .then((result) => {
      res.write('event: test\n');
      res.write(`data: ${JSON.stringify(result)}\n\n`);
    });

  const pipeline = [{ $match: { 'fullDocument.parent': req.params.parendid } }];

  const changeStream = db.collection('message').watch(pipeline);

  changeStream.on('change', (result) => {
    console.log(result.fullDocument);
    var addData = [result.fullDocument];
    res.write('event: test\n');
    res.write(`data: ${JSON.stringify(addData)}\n\n`);
  });
});

app.post('/message', isLogin, function (req, res) {
  var data = {
    parent: req.body.parent,
    userId: req.user._id,
    content: req.body.content,
    date: new Date(),
  };

  db.collection('message')
    .insertOne(data)
    .then((result) => {
      console.log('메시지 저장 성공');
      res.send(result);
    });
});

[정중식]

당연히 클릭이벤트쪽에 작성을해놨으니까 그런거라고 저도 생각을하고있기는한데.. 강사님 코드랑비교해보면 똑같이 클릭이벤트에 해놓으셨는데 왜 저만 이런 동작을하는지를 모르겠어욤..

  $('.list-group-item').click(function (e) {
    $(this).css('background-color', '#eee');
    nowChatRoomId = $(this).attr('data-id');

    $('.chat-content').html('');

    // 프론트엔드에서 실시간 소통채널 여는법
    eventSource = new EventSource('/message/' + nowChatRoomId);
    eventSource.addEventListener('test', function (e) {
      var data = JSON.parse(e.data);

      data.forEach((item) => {
        $('.chat-content').append(
          `<li><span class="chat-box">${item.content}</span></li>`
        );
      });
    });
  });
 

[codingapple]

.addEventListener('test' 이랑 
  changeStream.on('change', 안에 console.log 써서 실행은 잘 되고 있나 확인합시다 

[정중식]

아 오타가있었네요 말씀하신대로 콘솔들 찎어보니 실행이 안되고있었습니다.

근데 궁금한게 두가지있습니다.

  $('.list-group-item').click(function (e) {
    $(this).css('background-color', '#eee');
    nowChatRoomId = $(this).attr('data-id');

    $('.chat-content').html('');

    // 프론트엔드에서 실시간 소통채널 여는법
    eventSource = new EventSource('/message/' + nowChatRoomId);
    eventSource.addEventListener('test', function (e) {
      var data = JSON.parse(e.data);
      console.log('data:', data);

      data.forEach((item) => {
        $('.chat-content').append(
          `<li><span class="chat-box">${item.content}</span></li>`
        );
      });
    });
  });
 

1. 이 코드에서는 클릭이되어야   eventSource = new EventSource('/message/' + nowChatRoomId); 이 코드가 동작해야하는거아닌가요?
근데 사진처럼 한번 클릭해놓은 것만으로도 계속 클릭이벤트가 유지가 되는건가요?

2.   $('.list-group-item').click(function (e) {
    $(this).css('background-color', '#eee');
 
...
}

위의 코드에서 this부분이 궁금한데요,

$(this)라고안하고,console.log( e.target.dataset.id)이라고하면 li태그 부분을 정확히 짚어야 콘솔이 잘 출력되고 h6태그 부분을 클릭하면 언디파인이출력되는 반면에,
this를 적으면 li부분뿐만아니라 h6태그를 클릭해도 dataset.id가 잘 출력되더라구요 혹시 뭐때문인지 여쭤봐도될까요?

[codingapple]

이벤트리스너는 새로고침하지 않는 이상 계속 달려있습니다
this는 이벤트리스너 달린 html요소를 뜻해서 그렇습니다

[정중식]

감사합니다

[글쓴이]

글