Youtube Clone Coding (10. Video view)

LeeJaeHoon·2021년 11월 13일
0
post-thumbnail
  1. 백엔드에서 video view올려주는 api만들기
    • api Router 만들기
      import express from "express";
      import { registerView } from "../controllers/videoController";
      
      const apiRouter = express.Router();
      
      apiRouter.post("/videos/:id/view", registerView);
      
      export default apiRouter
    • registerView controller 만들기
      • 상태코드를 보낼때 status가 아닌 sendStatus로 보내야 프론트에서 요청을 했을때 pending이 안됨.

        export const registerView = async (req, res) => {
          const { id } = req.params;
          const video = await Video.findById(id);
          if (!video) {
            return res.sendStatus(404);
          }
          video.meta.views = video.meta.views + 1;
          await video.save();
          return res.sendStatus(200);
        };
  1. 프론트에서 api호출하기
  • video의 view이니깐 video를 다 봤을때 api를 호출해야 한다.
    • video의 ended event를 이용한다 → video가 끝났을때 발생하는 이벤트
  • video의 id를 가져오기위해 pug에서 videocontainer에 data-id로 video id를 백엔드에서 불러온다.
    • 설정한 data-id를 videoContainer.dataset.id로 가져 올 수 있다.

      const handleEnded = () => {
        const { id } = videoContainer.dataset;
        fetch(`/videos/${id}/view`, {
          method: "POST",
        });
      };
      video.addEventListener("ended", handleEnded);

0개의 댓글