728x90
socketio로 멀티 채팅을 구현하고 싶다면 room을 만들어야한다.
그 로직을 보도록 하자.
server
// app.js의 본문내에 삽입하시면 된다.
var io = require('socket.io').listen(3100);
var roomName;
io.on('connection', function (socket) {
console.log('connect');
var instanceId = socket.id;
socket.on('joinRoom',function (data) {
console.log(data);
socket.join(data.roomName);
roomName = data.roomName;
});
socket.on('reqMsg', function (data) {
console.log(data);
io.sockets.in(roomName).emit('recMsg', {comment: instanceId + " : " + data.comment+'\n'});
})
});
서버의 코드가 바뀌었다.
여기서 새로운 부분은 바로 joinRoom이다.
socket.join(data.roomName);
이 구문은 내가 특정 룸에 들어가는걸 의미한다.
io.sockets.in(roomName).emit('recMsg', {comment: instanceId + " : " + data.comment+'\n'});
또한 보낼때도 특정 룸으로 보내야한다.
여기서 그 룸은 내가 등록했던 룸으로만 보낼수 있다.
이 방식으로 보낸다면 브로드캐스트로 전송되어 이 룸에 속한 모든 사람들이 동시에 볼 수 있다.
client
<!--index.ejs-->
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="../socket.io-client/dist/socket.io.js"></script>
<script src="../jquery/dist/jquery.min.js"></script>
</head>
<body>
<textarea rows="20" cols="30" id="chat"></textarea><br>
<input type="text" id="user"><input type="button" value="msg submit" onclick="myOnClick()">
</body>
<script>
var socket = io.connect('http://localhost:3100');
socket.emit('joinRoom', {roomName: 'myroom'});
socket.on('recMsg', function (data) {
console.log(data.comment)
$('#chat').append(data.comment);
});
function myOnClick() {
socket.emit("reqMsg", {comment: $('#user').val()});
$('#user').val('');
}
</script>
</html>
클라이언트 코드도 한번 보도록하자.
var socket = io.connect('http://localhost:3100');
이 부분에 들어갈때는 이제 주소를 제대로 적어줘야한다.
만약 외부 아이이피라면 그 아이피를 그대로 적어주면된다.
그게 아니라면 같은 와이파이 군을 사용해서 내부 아이피로 서로 통신해야한다.
socket.emit('joinRoom', {roomName: 'myroom'});
여기서 room이름을 넘겨준다.
굳이 이렇게 만들지 않아도 된다. 룸이름을 특정짓게만 할 수 있다면 어떻게 짜도 상관은 없다.
나머지는 크게 수정할것이 없다.
이제 테스트 해보자
통신이 서로 제대로 되고 있음을 확인할 수 있다.