복습

복습하러가기

간단 요약:

server.js

const app = express();

const http = require('http').Server(app);
const io = require('socket.io')(http);

http.listen(process.env.PORT, function () {
      console.log('listening on port 8080');
});

app.get('/socket', function (req, res) {
  res.render('socket.ejs');
});

io.on('connection', (socket) => {
  // 프론트에서'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
  socket.on('user-send', function (data) {
    console.log(data);
  });

});

client

// socket.ejs
 <div class="container">채팅방</div>
 <input type="text" id="input1" />
 <button id="send">서버에 메세지 보내기</button>

// socket.js
function init() {
  var socket = io();

  $('#send').click(function (e) {
    socket.emit('user-send', $('#input1').val());
  });
}

init();

3줄 요약
1. npm i socket.io , http, io , http.listen
2. io.on(){ socket.on() }으로 클라이언트에서 보내는 데이터 받을 수 있음
3. 클라이언트는 socket.emit('','')으로 서버에 데이터 보낼 수 있음

서버 -> 유저 메세지 전송은?

마찬가지로, io.emit를 이용해서 서버에서 유저에게 메세지를 보낼 수 있다.
아래 코드는 클라에서 데이터를 보내면, socket.on으로 수신후, io.emit()으로 클라이언트한테 데이터를 보내고있다.

server.js

io.on('connection', (socket) => {
  // 누가 'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
  socket.on('user-send', function (data) {
    io.emit('broadcast', '반가워');
  });
});

socket은 주고 받고가 가능한데, 이 받는것이 가능하게끔해주는게 'socket.on'이다.
서버에서 데이터를 보냈으니 클라이언트에서도 받아줘야한다.

socket.js

function init() {
  var socket = io();

  $('#send').click(function (e) {
    socket.emit('user-send', $('#input1').val());
  });

  socket.on('broadcast', function (data) {
    console.log(data);
    // 출력 결과: 반가워
  });
}

init();

그럼 실시간 소통은 어떻게?

키워드는 io.emit()이다.
io.emit()은 소켓에 참여하고있는 모든 유저에게 메세지를 보내주는데 (단체 채팅방) 이걸 활용해서 코드를 이런식으로 작성하면 되겠다.

io.on('connection', (socket) => {
  // 누가 'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
  socket.on('user-send', function (data) {
    io.emit('broadcast', data);
  });
});

이렇게하면 클라이언트에서 보낸 데이트를 받아서 (socket.on) 다시 클라이언트로 보내주게된다. (io.emit)

구글 시크릿모드와 일반모드에서 각각 페이지를 켜서 테스트를 해보면 잘 된다.

단체 메시지말고 한명한테만 보내고싶어요!

io.on('connection', (socket) => {
  // 누가 'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
  socket.on('user-send', function (data) {
    // io.emit('broadcast', data);
    io.to(socket.id).emit('broadcast', data);
  });
});

socket.id는 유저가 web socket에 접속을 하면

io.on('connection', (socket) => {

}

위의 socket에 접속유저 정보가 들어있는데 여기서 id를 가져온것이다.
아무튼 위의 코드로 하면 자기한테만 메세지가 전송이된다.
이 기능으로 특정유저에게 메세지를 보낼 수 있는 기능 및 자기에게 메세지보내기 등등 기능을 만들 수 있을것 같다.