양방향 통신을 위해 socket.io 라이브러리를 설치하고 공부..
✨socket.io 설치 및 셋팅
- 터미널을 열어
npm install socket.io@4입력하여 설치
- 서버파일 상단에 셋팅 코드 추가
const { createServer } = require('http')
const { Server } = require('socket.io')
const server = createServer(app)
const io = new Server(server) 
-
app.listen이라고 되어있던 코드를
server.listen으로 변경해줌
-
실시간 통신해줄 html파일에도 socket.io 설치
<script src="https://cdn.jsdelivr.net/npm/socket.io@4.7.2/client-dist/socket.io.min.js"></script>
<script>
const socket = io()
</script>
- 유저가 웹소켓 연결시 서버에서 코드 실행하려면
io.on('connection', () => {
console.log('누군가 웹소켓연결함')
})
콘솔로그 찍어서 테스트해보기
현재 chatDetail페이지에 연결해두고 들어가보니
잘 나오면 연결이 잘 된것..!
- 유저->서버 데이터 전송을 위해 ejs파일로 돌아가 아래처럼 코드 작성해줌
socket.emit('데이터이름', '데이터')
데이터를 전송해줬으면 서버에서는 수신해줘야한다.
socket.on('데이터이름', (data)=>{
console.log('유저가보낸것', data)
})
데이터 이름을 "age"로 해서 20을 보냈으니, data부분에는 20이 들어가야한다.
잘 들어오는 모습~~
반대로 서버->모든유저 데이터 전송은
io.emit('데이터이름', '데이터')
수신을 위해 ejs파일 다시 가서 아래처럼 작성해본다.
socket.on('데이터이름', (data)=>{
console.log(data)
})
잘 되는지 브라우저 콘솔창을 확인해보자.
웹 소켓이 잘 동작하는 것을 확인했으니 이제 정말 채팅기능!!
✨실시간 채팅기능
- 유저->서버 메세지 보내면 서버는 유저에게 메세지 뿌려주기
현재 io.emit을 사용하면 모든 유저에게 뿌려주게 되는데,
채팅방에 있는 유저에게만 데이터를 주고받게 하고싶은 경우에는
room이라는 기능을 이용하면 된다.
서버에서 room에 속한 유저에게만 메세지 전송이 가능하게 된다!
socket.join('룸이름');유저가 1번 방에 join이 되고싶다면
이렇게 작성해서 요청해주고,
서버에서는
이렇게 이름을 확인해서 1에 join을 시켜줄 수 있다.
유저가 특정 룸에 메세지 보내려면
유저는 서버로만 메세지를 전송할 수 있기 때문에
유저가 서버한테 요청해야함
-
전송 버튼 누르면 서버한테 emit을 보내는 걸로 메세지 전송을 부탁해보자
-
서버는 메세지를 수신하면 룸에 전달해준다.
우선 이렇게 콘솔창에 찍어보면
데이터는 저렇게 들어오니
io.to(room번호).emit('작명', 보낼메세지);이런 식으로 서버가 특정 룸에만 데이터를 쏴줄 수 있다. -
유저가 룸 메세지를 수신하려면 ejs에 script를 다시보자
