Socket.IO 자기 브라우저 에서만 emit 되는 현상 해결 방법


남는시간에 react를 공부해 보고자 튜토리얼들을 보고 난 후


실시간 채팅기능을 만들어 보고자


socket.io를 사용 하게 되었다.


여러가지 React Socket.io 라든지  Socket.io React 라던지 여러가지 많았는데 이것 저것 삽질 하다가


그냥 원래 node.js에서 잠깐 만들었던 방법으로 socket.io만 사용해서 구현 하기로 했다.


그런데 분명히 코딩도 제대로 했고


브라우저에서 emit 날려주면 날린 브라우저에서는 값을 다시 제대로 받아 오는데


다른 브라우저에서 날려준 값을 받아오지 못하는게 아닌가


반나절을 삽질을 하다가


socket.io 레퍼런스 사이트를 들어가 하나씩 들춰 보기 시작했다.


.

.

.

.


세상에....


한달사이에 또 무언가 바뀌어 있었다 ㅋㅋㅋㅋㅋㅋ



view단에서가 아니라 server단에서 바뀐게 있었다


기존에 서버에 작성했던 코드는


1
2
3
4
5
6
7
8
9
// 소켓 통신 관련
var io = require('socket.io').listen(3303);
console.log("socket server run!!");
 
io.sockets.on("connection"function(socket){
  socket.on('private'function(msg){ // 응답
    socket.emit('private',msg); // 요청
  });
});
cs



이런식이었다. 그런데 이게 업데이트 되면서


위와 같이 작성한 소켓통신은 통신을 요청한 브라우저 에서만 다시 서버에서 요청을 날려주는 것 이었다.


응답은 받지만 다시 클라이언트로 요청을 날려주는건 요청한 브라우저에게만 날려 주는 것.



접속한 모두가 서버로 부터 요청을 받기 위한 방법


1
2
3
4
5
6
7
8
9
10
// 소켓 통신 관련
var io = require('socket.io').listen(3303);
console.log("socket server run!!");
 
// 커넥션된 모드에게 날려주는 것
io.on('connection'function(socket){
  socket.on('chat'function(msg){
    io.emit('chat', msg);
  });
});
cs


서버에서 이렇게 작성을 해 주어야 한다.



뭐가 다른지 햇갈린다면 두개를 동시에 비교 해 보도록 하자



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 소켓 통신 관련
var io = require('socket.io').listen(3303);
console.log("socket server run!!");
 
// 소켓 통신 날린 사람만 받을 수 있는 것.
io.sockets.on("connection"function(socket){
  socket.on('private'function(msg){ // 응답
    socket.emit('private',msg); // 요청
  });
});
 
 
// 커넥션된 모드에게 날려주는 것
io.on('connection'function(socket){
  socket.on('chat'function(msg){
    io.emit('chat', msg);
  });
});
cs



위는 날린 사람에게만 날려주는 것


아래는 모두에게 날려주는 것


커넥션을 할때 io.sockets.on 과 io.on의 차이 였다.


물론 이렇게 한다면 개인적인 소켓통신을 하도록 하는 것이 더 편해지는 것 같다.






+ Recent posts