[Vue+WebRTC] (4) Socket.io room 설정
vueRTC
2019.08.05.
What to do?
- Node.js 서버를 저번에 만들었는데, 여기에 webRTC 튜토리얼에 맞게 socket 서버안에 room을 만들기 위함
기존 코드
// index.js의 일부분
io.sockets.on('connection', function(socket){
// 연결되면 소켓 아이디를 콘솔에 출력
console.log(socket.id)
}
변경된 코드
- 추가된 부분에 대한 설명은 코드 블럭안에…
io.sockets.on('connection', function(socket) {
// 연결되면 소켓 아이디를 콘솔에 출력
console.log(socket.id)
// log 함수는 메세지를 클라이언트에 보내기 위한 함수임
// socket emit으로 log 이벤트와 args로 'array'를 보냄
function log() {
let array = ['Message from server:']
array.push.apply(array, arguments)
socket.emit('log', array)
}
// socket 이벤트인 'message'에 대한 핸들러를 추가
// socket.broadcast를 설정하게되면, sender 이외의 모든 유저에게 실행된다는 뜻
// 따라서, 서버를 먼저 개통한 sender를 제외한 나머지 클라이언트에 'message' 이벤트를 발생시킴
socket.on('message', function(message) {
log('From Client: ', message)
// for a real app, would be room-only (not broadcast)
socket.broadcast.emit('message', message)
})
// socket 이벤트인 'create or join' 이벤트에 대한 핸들러 추가
socket.on('create or join', function(room) {
log('Received request to create or join room ' + room)
// 'room'이름에 접속된 모든 소켓의 이름을 가져옴
let clientsInRoom = io.sockets.adapter.rooms[room]
// 몇 개의 소켓이 접속되있는지 count
let numClients = clientsInRoom
? Object.keys(clientsInRoom.sockets).length
: 0
log('Room ' + room + ' now has ' + numClients + ' client(s)')
// 연결된 소켓이 0이면, room에 참가하고, 'created' 이벤트 발생시킴
if (numClients === 0) {
socket.join(room)
log('Client ID ' + socket.id + ' created room ' + room)
socket.emit('created', room, socket.id)
// 연결된 소켓이 1이면, 이미 존재하는 room에 참가하고, `joined` 이벤트 발생시킴
} else if (numClients === 1) {
log('Client ID ' + socket.id + ' joined room ' + room)
io.sockets.in(room).emit('join', room)
socket.join(room)
socket.emit('joined', room, socket.id)
io.sockets.in(room).emit('ready')
} else {
// 2명 이상이 같은 방에 접속 못하도록, `full` 이벤트로 방지 (아무것도 안함)
socket.emit('full', room)
}
})
// ipaddr 이벤트 ?
socket.on('ipaddr', function() {
let ifaces = os.networkInterfaces()
console.log(ifaces)
for (let dev in ifaces) {
ifaces[dev].forEach(function(details) {
if (details.family === 'IPv4' && details.address !== '192.168.0.10') {
socket.emit('ipaddr', details.address)
}
})
}
})
// 'bye' 이벤트 발생시, 콘솔에 메세지 출력
socket.on('bye', function() {
console.log('received bye')
})
})
마무리
- 수정 필요한 부분
ipaddr
이벤트 핸들러에대한 설명 추가해야함.
다음에는 Vue에서 로컬 유저와 원격 유저가 1대 1로 비디오 채팅을 할 수 있도록 나머지를 설정 할 예정입니다.
Thank You for Visiting My Blog, Have a Good Day 😆
© ChansNotes Powered By Gatsby
© ChansNotes Powered By Gatsby