Socket : Node.js 곁들여서 채팅방 구현해보기 (1)

• 매번 HTTP 통신만 해봤지 socket을 써본 적이 없어서
  하루 날잡고 간단하게 구현해봤다.
• FE는 다른 분들 코드 보고 거의 옮겨왔다.

구현

1. index.html 진입 시 닉네임 입력

• 닉네임 중복 시 alert 창 표시
• 현재 대화방에 접속 중인 유저 수, 유저 닉네임 표시

2. 대화방에 접속하거나 나갈 때, 표시
3. 본인이 입력한 대화창은 오른쪽,
   본인 이외의 다른 사람이 입력한 대화창은 왼쪽에 표시됨

---

TIL 📚

1. 웹 소켓

보통 웹에서 데이터를 주고 받을 땐 HTTP를 사용함.

하지만 HTTP는 요청이 있어야만 응답을 보내주기 때문에 실시간을 보장하지 않음

폴링, 롱폴링 방식을 사용할 수도 있지만 불필요한 HTTP 요청, 응답이 늘어나고 서버와 네트워크 부하 또한 커짐

-> 그래서 웹 소켓이 발전하게 되었고,
한번의 요청으로 서버와 네트워크가 실시간을 데이터를 주고 받을 수 있게 됨

socket.io 사용법

emit을 통해 신호를 보내고, on을 통해 신호를 받는다.
이거만 기억해도 반은 먹고 들어간다.

Back-end

• $ npm install socket.io --save

  var app = require('express')();
  var http = require('http').Server(app);
  var io = require('socket.io')(http); // socket 객체 : io
  // 해당 서버를 소켓 서버임을 설정
  
  // 클라이언트가 최초 접속 시 보여지는 화면
  app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
  });
  
  // 서버 실행
  http.listen(3000, function () {
    console.log('server listening on port : 3000');
  });
  
  // connection을 수립하고, callback 인자로 socket을 받음
  io.on('connection', function (socket) {
  	// 연결이 성공했을 경우 실행됨
  
  	socket.on('disconnect', function () {
      	// 클라이언트의 연결이 끊어졌을 경우 실행됨
     });
  )}

Front-end

• $ npm install socket.io-client --save

  <script src="/socket.io/socket.io.js"></script>
  <script>
      const socket = io();
      socket.on("서버에서 받을 신호", (데이터) => {
  		// 특정 신호를 받으면 실행할 코드
  	})
      
      socket.emit("서버로 보낼 신호", 데이터);
  </script>

메세지 전달 대상 정하기

1. 나를 제외한 전체에게 메시지 전송할 때
socket.broadcast.emit("신호")

2. 네임스페이스 특정해서 전송하기

• 클라이언트 모두에게 메시지 전송하는 것
  == / 네임 스페이스에게 메시지 전송
• 네임 스페이스를 바꾸기 위해선 of 사용

// chat인 네임 스페이스에 메시지 전달

    io.connect("주소/chat")
    
    const chat = io.of("/chat");
    chat.on('connection', (socket) => {
    	... 
    })
    
    io.of("/chat").emit("신호", 데이터)

3. 특정 클라이언트 한 명에게만 메시지 전송

• socket.id 로 소켓 아이디 얻을 수 있음
• 답장을 받기 위해선 데이터를 보낼 때
  자신의 소켓 아이디를 넣어 전달하면 됨!

    io.to("소켓 아이디").emit("신호");

4. 특정 그룹에게 메시지 전송

• 그룹 들어가기 / 나가기

    socket.join("방의 아이디")	// 그룹 들어가기
    socket.leave("방의 아이디")	// 그룹 나가기

• 그룹에게 메시지 전송

    io.to("방의 아이디").emit('신호', 데이터) 
    // 그룹 전체에게 메시지 전송
    
    socket.broadcast.to("방의 아이디").emit('신호', 데이터)
    // 나를 제외한 그룹 전체에게 메시지 전송

• 그룹 목록, 그룹 안에 소켓들 확인

    
    io.adapter.rooms // 그룹 목록
    io.of("네임스페이스").adapter.rooms // 특정 네임 스페이스에 속한 그룹 목록
    socket.adapter.rooms // 그룹 안 소켓들 확인

• 🍯 서버에 방 아이디, 방에 속한 소켓 아이디를 저장해놓으면
  DB 역할을 할 수 있다.

    [
      { _id: 'room01', members: ['zero_id', 'aero_id']},
      { _id: 'room02', members: ['nero_id', 'hero_id']},
    ]

---

2. express

Node 웹 프레임워크

Node.js를 사용해 서버를 개발하고자 하는 개발자들을 위해

서버를 쉽게 구성할 수 있게 해주는 프레임워크

사용법

server와 관련된 내용을 js 파일에 작성하고,
$ node (파일명.js) 만 입력하면 간단하게 서버를 실행할 수 있다.

---

채팅방 목록도 구현해봐야겠당

🌈 Reference

• socket.io
  https://www.zerocho.com/category/NodeJS/post/57edfcf481d46f0015d3f0cd