🗂 목차
- Node.js와 Socket.io를 이용한 채팅 구현 (1)
- Node.js와 Socket.io를 이용한 채팅 구현 (2) 👨💻
- Node.js와 Socket.io를 이용한 채팅 구현 (3)
이번 시간에는 Socket.io의 Namespace와 Room을 알아보겠습니다.
저번 코드를 보면 localhost:3000/ 로 들어왔는데 socket.io 서버가 바로 연결이 되는걸 확인 할 수 있었는데요, 이것이 Namespace라고 할 수 있습니다.
이게 무슨 소리냐구요? Namespace란게 같은 Namespace에 있는 소켓 끼리만 통신 하는 개념입니다. 그리고 Default-Namespace가 / 이기 때문에 socket.io로 연결 되었던거죠!
그럼 Room은 무엇일까요? Room은 Namespace의 하위 개념입니다.(NameSpace -> Room -> Socket ) Namespace안에 있는 소켓들을 또 다시 Room으로 나눌 수 있습니다. 그럼 이제 Namespace와 Room 사용법을 간단하게 살펴보겠습니다.
Namespace
socket.io에 나와있는 Namespace사용 방법인데요, 서버 쪽은 io.of()를 통해 Namespace를 지정해주면 되고, 클라이언트는 Default-Namespace와 같은 코드에 Namespace만 적어주면 됩니다. 그럼 이걸 활용해서 각각 다른 Namespace로 가는 버튼 두개를 만들어 보겠습니다.
app.js
/* socket\namespace\app.js */
const app = require(‘express’)();const server = require(‘http’).Server(app);const io = require(‘socket.io’)(server);
server.listen(3000, () => { console.log(‘connect 3000’);});
app.get(‘/’, (req, res) => { res.sendFile(__dirname + ‘/index.html’);});
// NameSpace 1번
const namespace1 = io.of(‘/namespace1’);
// connection을 받으면, news 이벤트에 hello 객체를 담아 보낸다
namespace1.on(‘connection’, (socket) => { namespace1.emit(‘news’, { hello: “Someone connected at namespace1” });});
// NameSpace 2번
const namespace2 = io.of(‘/namespace2’);// connection을 받으면, news 이벤트에 hello 객체를 담아 보낸다
namespace2.on(‘connection’, (socket) => { namespace2.emit(‘news’, { hello: “Someone connected at Namespace2” });});
index.html
<!DOCTYPE html><html> <head> <script src=”/socket.io/socket.io.js”></script> <script> function namespace(nsp) { const namespace = io(‘/namespace’ + nsp); // news라는 이벤트를 받을 시 콘솔에 data.hello를 출력
namespace.on(‘news’, (data) => { console.log(data.hello); }); } </script> </head> <body> <button onclick=”namespace(1)”>namespace1</button> <button onclick=”namespace(2)”>namespace2</button> </body></html>
이전 시간에 했던 Default-Namespace와 다를게 거의 없습니다. 실행 시키면 각각 다른 Namespace로 향하는 button 두개가 생성됩니다. 누르기 전에 개발자 도구를 열어 console 창을 켜주세요.
왼쪽 창에서 먼저 첫번째 버튼을 눌러서 namespace1에 들어간 상태입니다. 그 다음에 오른쪽 창에서 첫번째 버튼을 눌러서 접속을 하니 이미 접속해 있는 왼쪽창에도 “Someone connected at namespace1” 메세지가 콘솔창에 나왔습니다.
Room
Room은 namespace로 나눠진 socket들을 또 나눌 수 있습니다.
이런 느낌이라고 생각하시면 편할것 같네요 :)
Room은 socket.join()으로 접속하고, socket.leave()로 나갑니다.
특정 room에게 이벤트를 보낼 시 io.to()를 통해 보내시면 됩니다.
다음 시간에는 본격적으로 Namespace와 Room을 이용하여 채팅 서비스를 구현해 보겠습니다.
