Socket.io - 실습 (room)
Room
각 소켓 (각각의 브라우저나 세션이 만드는 커넥션)은 Socket.io에서 제공하는 Room에 접속할 수 있다.
Sever
wsServer.on('connection', (socket) => {
socket.onAny((event) => {
console.log(`Socket Event: ${event}`);
});
// nickname
// room
socket.on('enter_room', (roomName, nickname, done) => {
socket['nickname'] = nickname;
socket.join(roomName);
done();
socket.to(roomName).emit('welcome', socket.nickname, countRoom(roomName));
wsServer.sockets.emit('room_change', publicRooms());
});
socket.on('disconnecting', () => {
socket.rooms.forEach((room) =>
socket.to(room).emit('bye', socket.nickname, countRoom(room) - 1)
);
});
socket.on('disconnect', () => {
wsServer.sockets.emit('room_change', publicRooms());
});
socket.on('new_message', (msg, room, nickname, done) => {
socket.to(room).emit('new_message', `${nickname}: ${msg}`);
done();
});
});
=> Nickname을 소켓에 저장한다. join 메서드를 통해 소켓에 해당 room을 저장하고, rooms에서 해당 소켓에 들어가있는 커넥션을 추적할 수 있다. 또한 to 메서드를 통해 해당 소켓에 있는 커낵션들에게 브로드캐스팅이 가능하다.
Client
const socket = io();
const welcome = document.getElementById('welcome');
const roomList = document.getElementById('roomList');
const form = welcome.querySelector('form');
const room = document.getElementById('room');
roomList.hidden = true;
room.hidden = true;
let roomName;
let nickname;
function showRoom() {
welcome.hidden = true;
roomList.hidden = false;
room.hidden = false;
changeTitleH3(roomName);
changeUserH2(nickname);
const msgForm = room.querySelector('#msg');
msgForm.addEventListener('submit', handleMessageSubmit);
}
function changeTitleH3(user, newCount) {
const h3 = room.querySelector('h3');
console.log(newCount);
h3.innerText = `Room ${user} ${newCount ? '(' + newCount + ')' : ''}`;
}
function changeUserH2(content) {
const h2 = room.querySelector('h2');
h2.innerText = `User ${content}`;
}
function handleRoomSubmit(event) {
event.preventDefault();
const roomElement = form.querySelector('#roomName');
const nickElement = form.querySelector('#nickname');
socket.emit('enter_room', roomElement.value, nickElement.value, showRoom);
roomName = roomElement.value;
nickname = nickElement.value;
roomElement.value = '';
nickElement.value = '';
}
form.addEventListener('submit', handleRoomSubmit);
function addMessage(message) {
const ul = room.querySelector('ul');
const li = document.createElement('li');
li.innerText = message;
ul.appendChild(li);
}
function handleMessageSubmit(event) {
event.preventDefault();
const input = room.querySelector('#msg input');
const value = input.value;
socket.emit('new_message', input.value, roomName, nickname, () => {
addMessage(`You: ${value}`);
});
input.value = '';
}
socket.on('welcome', (user, newCount) => {
changeTitleH3(roomName, newCount);
addMessage(`${user} arrived!`);
});
socket.on('bye', (left, newCount) => {
changeTitleH3(roomName, newCount);
addMessage(`${left} left ㅠㅠ`);
});
socket.on('new_message', addMessage);
socket.on('room_change', (rooms) => {
const ul = roomList.querySelector('ul');
ul.innerHTML = '';
if (rooms.length === 0) {
return;
}
rooms.forEach((room) => {
const li = document.createElement('li');
li.innerText = room;
ul.append(li);
});
});
=> Room의 개수나 PublicRoom 파트는 뒷절 adapter에서 설명한다.
Author And Source
이 문제에 관하여(Socket.io - 실습 (room)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lsa3163/Socket.io-실습-room저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)