Nodejs 구이김 프로젝트 25-04-02 ~ 25-04-17

 

안녕하세요 이번에는 Nodejs 구이김 프로젝트로 블로그를 쓰게되었습니다.

 

• 어떤 프로젝트였는지에 대한 설명
• 내가 맡은 부분과 쓰여진 기술에 대한 설명 
• 후기 

어떤 프로젝트였는가?

저희는 이번에 프로젝트로 `라이브 음악 스트리밍`사이트를 만들어봤는데 일단 이름은 구이김 뮤직스라고 했습니다

 

내가 맡은 부분과 쓰여진 기술에 대한 설명

일단 저는 라이브스트리밍 페이지에서 socketio와 webRTC를 썼고 페이지를 호스트페이지와 시청자 페이지를 나눠서 구현하였습니다.

 

일단 제가 맡은부분은 라이브 스트리밍하는 페이지, 서치페이지, 다시보기 페이지를 맡았습니다 

일단 이페이지는 스트리밍 페이지입니다. 이페이지는 호스트쪽 페이지이고 기능은 실시간 채팅구현 , 음악 연속재생 , 녹화 시작및 종료 그리고 녹화시작시 채팅이 실시간 말풍선으로 나오게하는 기능도 추가하였습니다  그리고 다시보기페이지도 구현을 하여서 하단에 다시보기를 누르면 다시보기 페이지로 이동합니다.

 

그리고 시청자 페이지입니다 일단 메인 페이지에서

시청자 페이지 이동

위에 사진에 시청하기 버튼을 클릭하면 시청자 페이지 이동을 합니다 . 

 

그럼 이제 시청자 페이지를 보여드리겠습니다.

여기가 시청자 페이지입니다 . 시청자 페이지인 만큼 일단 노래 시작 녹화 시작 종료 등은 없고 호스트가 방송을 시작하면 볼수있는 화면과 접속자가 누구있는지를 구현하였고 실시간 채팅도 구현하였고 다시보기를 볼수있게 구현하였습니다. 그리고 호스트페이지에서 녹화종료를 누를시 5초후 이페이지에서 떠나게되며 메인페이지로 가게 구현하였습니다 . 

 

그리고 검색 페이지입니다. 

 

일단 서치할수있는 기능을 만들었고 음악 이름 과 아티스트로 검색을 가능하게 하였습니다 그리고 페이지네이션으로 7개씩만 보일수 있게하였고 7개가 넘으면 1 페이지에 7개 2페이지에 7 개 이렇게 구현하였습니다. 

그리고 노래 제목을 누르면 하단 재생바가 나와서 노래를 듣을수 있게하였습니다.

 

여기서 중요하게 들어간 기술들은 mysql ,nodejs, html , css , socketio ,webRtc 등이 있고 일단

mysql 은 시퀄라이즈로 구현을 하였고 백엔드에서는 nodeJs와 socketIo , webRTC 등을 사용하였습니다

그리고 화면에서 프론트엔드단에서는 Html, Css , JavaScript 이렇게 사용하였습니다 

 

일단 후기는 socketIo를 배우고 바로 구현을 하는것이라 힘들었고 이게 오디오와 같이 구현할때 http프로토콜 규정으로 socketIo하나로만 구현이 힘들어서 webRTC를 사용해서 구현해서 webRTC를 공부하는데 있어서 시간이 좀 걸렸던것 같습니다 그리고 프로젝트를 다마지고나니 뭔가 더 구현을 할수있을지 않았을까라는 생각이 많이들면서 더 기능적으로도 css화면적으로도 구현을 더 잘할수 있지않았나라는 생각이 들었습니다. 다음에 또 프로젝트가 있으면 더 발전된 프로젝트로 찾아뵙겠습니다 . ㅎㅎ