221125 Node.js #12

김혜진·2022년 11월 25일

git nodejs socket

Node.js

목록 보기

12/13

Socket

네트워크 프로그래밍의 이해

http 통신 방식과 소켓 통신 방식의 차이점

네트워크를 통해 서버로 데이터를 가져오기 위한 통신 방식 2가지

http 통신

클라이언트 요청 시에만 서버가 응답하여 정보를 전송하고 곧바로 연결 종료하는 방식.
요청을 보냈을 경우 연결 및 내용을 기다리는 시간이 소요됨.
단방향적 통신으로 서버가 클라이언트로 요청을 보낼 수 없음.
콘텐츠 위주의 데이터를 사용할 때 이 방식을 사용
모바일 앱은 필요한 경우에만 서버로 정보를 요청하므로 http 통신을 주로 사용

소켓 통신

서버와 클라이언트가 특정 포트를 통해 연결하여 실시간 양방향 통신을 하는 방식.
http 통신과 달리 서버가 클라이언트에 요청이 가능하고, 실시간 연결 유지.
실시간 스트리밍 서비스, 온라인 게임 또는 채팅과 같이 즉각 정보를 주고 받는 경우 사용.

소켓과 파일 입출력의 공통점

C언어를 공부하면서 처음 접한 내용은 printf와 scanf를 이용하여 키보드와 모니터로 데이터를 주고 받는 정도였다.
화면과 키보드(콘솔)를 통해 입출력하는 대상을 파일로 바꾸어서 파일 입출력을 공부해 본 적이 있다.
콘솔 입출력과 파일 입출력에는 어떠한 공통점이 있다고 생각되지 않는가?
파일 입출력과 소켓 통신 사이에도 어떠한 공통점을 발견할 수 있을 것이다.
파일은 로컬에서 통신, 소켓은 멀리 떨어진 호스트들간의 통신
소프트웨어 차원에서 호스트들간에 연결해주는 장치를 소켓이라고 한다.

소켓의 이해

소켓은 다소 추상적이다.
집에있는 전화기를 생각해보자. 분명 멀리 떨어진 누군가와 대화하기 위해 필요하나 물건이다.
전화기가 바로 소켓의 개념이다. 멀리 떨어진 두 개체를 연결시켜주는 도구이기 때문이다.

websocket : 양방향 통신 가능

TCP 서버/클라이언트 함수 호출 관계

서버/클라이언트의 전체적인 흐름

서버는 소켓 생성 이후 bind, listen, accept 함수의 연이은 호출을 통해 대기상태에 들어간다.
클라이언트는 소켓 생성 이후 connect 함수 호출을 통해 연결 요청을 하게 된다.

서버 소켓 세팅

npm install socket.io

server.js

// ────────────────── socket 세팅 ──────────────────
const http = require('http').createServer(app); // 서버 생성
const {Server} = require('socket.io'); 
const io = new Server(http);

// ────────────────── mongoDB ──────────────────
app.set('view engine', 'ejs');

var db;
const mongoClient = require('mongodb').MongoClient;
mongoClient.connect(
    process.env.DB_URL,

    function(err, client) {
    if(err) return console.log(err);

    db = client.db('TodoApp');

    // 소켓 코드
    app.db = db;
})


// 소켓서버 http로 불러왔으므로 app을 http로 변경
http.listen( process.env.PORT, function() { // 8080 포트에 서버를 띄워라
    console.log('listening on 8080');
})

클라이언트 소켓 세팅

서버와 통신할 때 송신은 내가 원할 때 하는 것이지만, 수신은 항상 대기하고 있어야 한다. 내부적으로 계속 돌면서 대기를 한다.
웹소켓에서는 io.on()이 그 역할을 해준다.

클라이언트⇒서버 메세지 전송

server.js

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

io.on('connection', function(socket) { // 수신부
    console.log('유저 접속됨');

    socket.on('user-send', function(data) {
        console.log(data);
    })
})

socket.ejs

  <body>
    <%- include('nav.html') %>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>

    <h1 class="ml-2 my-3 text-center">채팅방</h1>
    <input id = "msg" />
    <button id="send">서버에 메시지 보내기</button>

    <script>
      let socket = io(); // 웹소켓에 접속해주세요.
      $('#send').click(function() {
        // 버튼 클릭 시 수행
        socket.emit('user-send', $('#msg').val())
      })
      
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>

서버⇒클라이언트 메세지 전송

server.js

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

io.on('connection', function(socket) { // 수신부
    console.log('유저 접속됨');

    socket.on('user-send', function(data) {
        console.log(data);
        // io.to(soket.id) : soket.id를 가진 사람에게만 메세지 보내겠다.
        // io.emit : broadcast
        io.to(socket.id).emit('broadcast', data); 
    });
})

socket.ejs

<body>
    <%- include('nav.html') %>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>

    <h1 class="ml-2 my-3 text-center">채팅방</h1>

    <textarea class="container mt-4" id="rcv" rows="10"></textarea>

    <input id = "msg" />
    <button id="send">서버에 메시지 보내기</button>

    <script>
      let socket = io(); // 웹소켓에 접속해주세요.

      $('#send').click(function() {
        // 버튼 클릭 시 수행
        socket.emit('user-send', $('#msg').val());
      })

      socket.on('broadcast', function(data) {
        console.log(data);
        $('#rcv').append(data + '\n');
      })
      
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>

채팅방

server.js

      $('#room1').click(function() {
        // 채팅방1에 입장
        socket.emit('joinroom', '채팅방 입장 시켜줘')
      })

      $('#room1-send').click(function() {
        // 채팅방1에 입장
        socket.emit('room1-send', '채팅방 1번 채팅')
      })

socket.ejs

  <body>
    <%- include('nav.html') %>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>

    <h1 class="ml-2 my-3 text-center">채팅방</h1>

    <textarea class="container mt-4" id="rcv" rows="10"></textarea>

    <input id = "msg" />
    <button id="send">서버에 메시지 보내기</button>
    <p></p>
    <button id="room1">채팅방1 입장</button>
    <button id="room1-send">채팅방1에서 메시지 보내기</button>

    <script>
      let socket = io(); // 웹소켓에 접속해주세요.
      $('#room1').click(function() {
        // 채팅방1에 입장
        socket.emit('joinroom', '채팅방 입장 시켜줘')
      })

      $('#room1-send').click(function() {
        // 채팅방1에 입장
        socket.emit('room1-send', $('#msg').val())
      })

      $('#send').click(function() {
        // 버튼 클릭 시 수행
        socket.emit('user-send', $('#msg').val());
      })

      socket.on('broadcast', function(data) {
        console.log(data);
        $('#rcv').append(data + '\n');
      })
      
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>

Git

로컬 버전 관리 시스템 : Git(내 소스코드 관리)
원격 버전 관리 시스템 : Github(협업)

Github

버전관리 시스템
소스코드의 변경사항을 관리하는 도구
각각의 파일을 백업한다.
타인에게 공유해서 여러 사람이 공동으로 작업할 수 있게 한다.
드랍박스, 구글 드라이브, 원 드라이브, 아이 클라우드
파일의 변경 상황을 추적하고, 백업하고, 공유해주는 서비스
CVS, SVN, GIT
Git은 현 시점에서 가장 많이 사용되는 버전 관리 시스템
왜 우리는 깃허브를 배워야 하나?
대부분의 개발자들이 깃허브 닷컴이라는 서비스를 알고있고 이용하고 있다.
현존하는 절대 다수의 오픈 소스들은 깃허브를 매개로 공동작업으로 만들어지고 있다고 해도 과언이 아니다.
개발자라면 깃허브는 꼭 알아야 할 서비스이다.
협업을 해야 한다면 깃허브를 알아야 의사소통에 엄청난 도움을 줄 것이다.