오늘은 socket.io를 디테일하게 사용할 수 있게 해주는 namespace에 대해 알아보도록 하겠습니다.
서버와 클라이언트가 연결되면 실시간 데이터 공유가 가능한데요.
socket을 그냥 사용하면 데이터가 모든 socket으로 들어갑니다.
모든 노드가 연결되어 있다고 생각하시면 됩니다.
특정 노드끼리만 연결해주는 것이 namespace입니다.
room도 많이 쓰이는데요.
room은 namespace의 하위 개념으로 namespace안에 있는 소켓들을 room으로 나눌 수 있습니다.
room은 다음 차시에서 배우도록 하겠습니다.
예시를 통해 알아보도록 하겠습니다.
var express = require('express')
var http = require('http');
const { Socket } = require('socket.io');
var app=express();
var server = http.Server(app);
server.listen(8080);
app.get('/',(req,res)=>{
res.sendFile(__dirname+'/namespace.html')
})
//기본 네임스페이스
var io = require('socket.io')(server);
//네임스페이스
var namespace = io.of('/balmostory');
namespace.on('connection',(Socket)=>{
console.log('success')
Socket.emit('message','hello')
})
위의 코드는 서버 코드입니다.
io.of를 통해 namespace를 /balmostory로 지정해주었습니다.
이렇게 되면 namespace 객체는 클라이언트에서 /balmostory 네임스페이스를 사용하는 소켓과만 통신을 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- socketio 라이브러리 로딩하는 cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
<script>
var namespace = io('http://localhost:8080/balmostory');
namespace.on('connect',()=>{
console.log('connect success')
})
namespace.on('message',(data)=>{
alert(data)
})
</script>
</body>
</html>클라이언트 쪽 코드입니다.
io(.../balmostory)가 있습니다.
서버의 /balmostory인 네임스페이스를 가진 부분과 데이터를 공유합니다.
아래와 같은 결과가 나옵니다.
정리해보면 네임스페이스는 url주소로 연결됩니다.
여러 경로가 존재할 수 있고 같은 경로를 가진 서버와 클라이언트 소켓들이 통신을 하게 됩니다.
두 가지를 만들어보도록 하겠습니다.
var express = require('express')
var http = require('http');
const { Socket } = require('socket.io');
var app = express();
var server = http.Server(app);
server.listen(8080);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/namespace.html')
})
//기본 네임스페이스
var io = require('socket.io')(server);
//네임스페이스
var namespace = io.of('/balmostory');
namespace.on('connection', (Socket) => {
console.log('success')
namespace.emit('message', 'hello')
})
var namespace_2 = io.of('/balmostory_2');
namespace_2.on('connection', (Socket) => {
console.log('success_2')
namespace_2.emit('message','hello_2')
})
namespace_2를 추가로 만들었습니다.
각각의 네임스페이스는 message라는 이름으로 hello, hello_2라는 데이터를 각각 보냅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="hi_1"></div>
<div id="hi_2"></div>
<!-- socketio 라이브러리 로딩하는 cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
<script>
var hi_1 = document.getElementById('hi_1')
var hi_2 = document.getElementById('hi_2')
var namespace = io('http://localhost:8080/balmostory');
namespace.on('connect', () => {
console.log('connect success')
})
namespace.on('message', (data) => {
hi_1.innerHTML = data
})
var namespace_2 = io('http://localhost:8080/balmostory_2')
namespace_2.on('connect', (Socket) => {
console.log('connect success_2')
})
namespace_2.on('message',(data)=>{
hi_2.innerHTML = data
})
</script>
</body>
</html>
받은 코드를 각각의 url로 연결된 것들이 html 코드로 찍어줍니다.
결과가 다음과 같이 나온 것을 알 수 있습니다.
네임스페이스와 룸, 소켓의 관계는
네임스페이스가 룸과 소켓을 룸이 소켓을 포괄하는 관계입니다.
네임스페이스를 통해 큰 줄기의 데이터 통신을 만들고 룸을 통해 미세하게 소켓을 연결할 수 있습니다.
'기타 > Express.js' 카테고리의 다른 글
| express socket.io 기본 사용법(2) (0) | 2020.12.11 |
|---|---|
| express socket.io 기본 사용법(1) (0) | 2020.12.10 |
| express 오류 처리 미들웨어 (0) | 2020.11.26 |
| express 미들웨어 만들기, body-parser, cors 사용하기 (0) | 2020.11.26 |
