(김유선) 중고거래 사이트를 SPA로 만들기 11일차 - 웹소켓 기능
2024. 4. 19. 23:43ㆍ프로젝트 일지
앞으로 남은 기능이 내 채팅, 내 상점 등이 있지만 그것들은 시간만 있다면 딱히 하기에 어려운 것은 아니고 당장 시간이 없기에 채팅 기능만 구현하고 마무리하려 한다.
채팅 기능을 만들어줘야 하는데, 양방향 통신이 필요하므로 html 통신이 아닌 웹 소켓 통신을 이용하겠다.
나는 socket.io 라이브러리를 사용해서 웹 소켓 통신이 가능하게 만들었다.
먼저 상품 상세 페이지를 클릭하면
이렇게 상품 상세창이 보이는데, 저기서 채팅하기를 누르면 판매자인 하이요 닉네임을 가진 사람과 요청.user의 대화방이 하나 만들어진다(물론 로그인을 안한 상태라면 채팅하기를 눌렀을 때 로그인 페이지로 이동한다).
이렇게.
그래서 로그인을 한 상태라면
이렇게 창을 하나 띄워주고,
유저가 보낼 값을 입력하고 보내기를 누르면 화면에 보낸 값이 뜬다.
중요한 것은 채팅방에 있는 다른 유저가 보내기를 눌렀을 때 그 값도 이 창에 뿌려줘야 하는 것이다.
그리고 채팅방에 있는 두 명 외에는 다른 이들에게는 이 데이터를 뿌려주지 않는다.
그렇게 해서 작성한 코드는 다음과 같다.
<서버>
io.on('connection', (socket)=>{ //연결되면
console.log('소켓 연결됨')
socket.on('room',async(data)=>{ // 누구한테 room이라는 이름으로 요청 받으면 데이터 이름의 방에 넣어줌
socket.join(data) // data 룸에 넣어줌
})
socket.on('message', async(data)=>{ // 누구한테 메시지 받으면
io.to([data.writer, data.user]).emit('chatting', data.text) // 이 대화방에만 data.text 보내줌
await db.collection('chat').insertOne({
room : [data.writer, data.user],
writer : data.user,
text : data.text
})
})
})
<html>
const socket = io()
socket.emit('room', [click_writernick, firstdata.user.nickname])
console.log([click_writernick, firstdata.user.nickname][1])
$.get('/userchat')
.done(function(userchat){
console.log(userchat.chat.room.includes([click_writernick, firstdata.user.nickname]))
})
$('.chat_container').html(`
<div class="chat_close">x</div>
<div class="chat_list">
</div>
<div class="form">
<input class="chat_input" type="text" name="" id="">
<input class="chat_submit" type="submit" value="보내기">
</div>
`)
socket.on('chatting', (data) => {
$('.chat_list').append(`<div class="chat_box">
<p>${data}</p>
</div>`)
})
$('.chat_submit').click(function(){
socket.emit('message', {text : $('.chat_input').val(), writer : click_writernick, user : firstdata.user.nickname})
})
아직 디비를 띄워주지는 못했지만, 어차피 나중에 웹소켓을 또 사용하게 될 거라 생략하도록 하겠다.
이상으로 끗.
'프로젝트 일지' 카테고리의 다른 글
| (김유선) 풀스텍 양성과정 팀프로젝트 프론트엔드 04.30 (0) | 2024.04.30 |
|---|---|
| (김유선) 풀스텍 양성과정 팀프로젝트 프론트엔드 04.29 (0) | 2024.04.29 |
| (김유선) 중고거래 사이트를 SPA로 만들기 10일차 - 다양한 기능 (0) | 2024.04.18 |
| (장준영)Vanilla JavaScript로 SPA 구현하기 [8일차] - 식당/카페 여석 확인 어플리케이션 (1) | 2024.04.18 |
| (장준영)Vanilla JavaScript로 SPA 구현하기 [7일차] - 식당/카페 여석 확인 어플리케이션 (0) | 2024.04.18 |