websocket vs socket.io
-
WebSocket
- HTML5 웹 표준 기술
- 매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용함
- 이벤트를 단순히 듣고, 보내는 것만 가능함
-
Socket.io
- 표준 기술이 아니며, 라이브러리임
- 소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도함
- 방 개념을 이용해 일부 클라이언트에게만 데이터를 전송하는 브로드캐스팅이 가능함
server 예시
io.on("connection", (socket, callback) => {
// 서버에서 받음
socket.on("enter_room", (roomName, done) => {
// 방 만들기
socket.join(roomName);
// 클라에 있는 함수를 서버에서 호출하지만
// 실행은 클라이언트에서 실행됨
done();
// 채팅
socket.to(roomName).emit("welcome", socket.nickname, countRoom(roomName));
io.sockets.emit("room_change", publicRooms());
});
});
clinet 예시
const socket = io();
// 채팅창 보여주기
function showRoom(msg) {
welcome.hidden = true;
room.hidden = false;
}
function handleSubmit(event) {
event.preventDefault();
const input = form.querySelector("input");
// 클라에서 보냄
socket.emit("enter_room", input.value, showRoom);
roomName = input.value;
input.value = "";
}
Socket.io의 Namespace와 Room
localhost:3000/ 로 들어왔는데 socket.io 서버가 바로 연결이 되는걸 확인 할 수 있었는데요, 이것이 Namespace라고 할 수 있습니다.
Namespace란게 같은 Namespace에 있는 소켓 끼리만 통신 하는 개념입니다.
그리고 Default-Namespace가 / 이기 때문에 socket.io로 연결되었습니다.
Room은 Namespace의 하위 개념입니다.(NameSpace -> Room -> Socket ) Namespace안에 있는 소켓들을 또 다시 Room으로 나눌 수 있습니다.
room
JavaScript learner