실시간 통신을 위한 socket.io 뚫기

socket.io란?

실시간 웹 응용 프로그램을위한 JavaScript 라이브러리이다.
웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 한다.
브라우저에서 실행되는 클라이언트 측 라이브러리와
Node.js 용 서버 측 라이브러리로 구분되어 있다.

install

라이브러리이므로 npm을 이용하여 설치가 가능하다.

-   npm install socket.io

socket.emit(event, callback1) & socket.on(event, callback2)

socket.io는 동일한 event명을 가진 socket끼리의 상태 공유 및 통신으로써 동작된다.
socket.emit을 통하여 callback1과 같이 어떤 함수가 실행되거나 결과로써의 값이 존재하게 되면,
동일한 event명을 가진 socket.on의 함수 callback2로 결과값이 전달되어,
그 다음으로 원하는 동작을 시킬 수 있다.

creating server

기본적인 서버를 구축함과 동시에, socket.io 사용을 위한 setting도 진행해주었다
socket.io는 서버와 클라이언트 양측에서 모두 환경이 구축되어 있어야 통신이 가능해진다.

main.js

1. created a basic server

   //open express http server
   const express = require('express');
   const app = express();
   const http = require('http').createServer(app);
   

2. settings for socket.io

   //require socket.io moudle before settings
   const io = require('socket.io')(http);
   

3. socket.io connection to server
   client에서 채팅방 입장 누른 경우 connection 이벤트가 발생한다.
   connection이 존재하는 경우, => 다음의 코드들이 작동하게 된다
   다음 코드 이후에 등장하는 코드들, send event 등등은 connection이 존재하는 경우에만 동작 가능한 것으로 설계되어있다.

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

4. after socket.io connection
   채팅방 입장 이후, 경우에 따른 분기가 필요했다.

• 채팅 가능한 상대가 없었던 경우

• 채팅 상대가 있었던 경우

      //client에서 메시지 전송 누른 경우 send 이벤트 발생, => 이후 코드 작동    
      socket.on('send', (contents, senduser_id, chatroom_id) => {
          console.log('something sended!');
  

5. after socket.io send event
   send 이벤트가 발생한 경우,
   해당 이벤트 내에서 처리해주어야 했던 작업들이다.
   먼저, 보낸 사용자의 아이디를 참조하여, chat.js 파일이
   사용자가 존재하는 채팅방의 아이디에 맞게 채팅 기록인 contents를 데이터베이스에 저장시키는 작업.

      app.post('/chat/send', (req, res) => {
      //req.body는 contents, senduser_id, chatroom_id
      //chat.js가 이 곳의 req.body를 db에 전달하여 저장,
      //chat.js로부터의 result는 해당 chatroom의 모든 chatlog 내포

      socket.emit('chatlogs', result);

      });
  });
  

클라이언트는 'chatlogs'라는 이벤트에 맞추어, state chatlogs를 업데이트 시켜주어야 한다. 
이 때 클라이언트측에서는 다음과 같은 코드를 적용하여야 할 것이다. socket.on('chatlogs', result => this.setState({ chatlogs: result }))

6. client에서 bye 버튼 누른 경우
   대화 상대방이 채팅방을 나가는 경우이다.
   지정된 문장을 보여줄 수 있도록 설정해준다.

   socket.on('bye', goodbye => {
     //goodbye는 emit 'bye'에서 지정된 '상대방이 나갔습니다' 멘트
     app.post('/chat/bye', (req, res) => {
     //db까지 갈 필요 없음
    //chat/send와는 거의 동일하지만,
    //추가로 해당 chatroom을 disable 시키는 부분이 다름
       socket.emit('endChat', result);
    //아래는 클라이언트
    //socket.on('endChat', result => this.setState({ chatlogs: result })) 마지막 퇴장 멘트로 메시지 생성
   });
     socket.leave(chatroom, () => {
       console.log('user leaved');
     });
   });
   });