[Network] [NodeJS] Socket.IO를 사용하여 소문자를 보내면 대문자로 바꾸기

💻 BackEnd/🟩 NodeJS

[Network] [NodeJS] Socket.IO를 사용하여 소문자를 보내면 대문자로 바꾸기

Dbswnstjd 2022. 4. 21. 17:48

Socket.IO

Client.HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Socket.io Test</title>

    <script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
      }

      #chatContent {
        border: 1px solid #000;
        width: 100%;
        height: 200px;
        margin-bottom: 10px;
        overflow-y: auto;
      }

      #myChat {
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="chatContent"></div>
    <input id="myChat" type="text" />

    <script>
      const socket = io.connect('http://localhost:3000');

      socket.on('msg', function (data) {
        $('#chatContent').append(`${data}<br>`);
      });

      $('#myChat').on('keyup', function () {
        if (window.event.keyCode == 13) {
          $('#chatContent').append(`Client : "${$(this).val()}" 보냅니다.<br>`);
          socket.emit('msg', $(this).val());
          $(this).val('');
        }
      });
    </script>
  </body>
</html>

먼저 클라이언트에서 보여줄 간단한 화면을 만들어 보았다.

const socket = io.connect('http://localhost:3000');

html파일은 매우 기본적인 내용만 포함하고 있는 코드이다.

socket 모듈을 사용하여 서버의 3000번 포트에서 테스트를 진행할 것이다.

io.connect는 서버와의 연결을 하기 위한 코드이다.

tcpServer.js

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

const port = 3000;


const user = {
  id: 'test',
  password: '1234',
}; // 데이터 베이스를 대신 해줄 user 정보
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/client.html');
});

app.get('/login', (req, res) => {
  res.sendFile(__dirname + '/login.html');
});

app.post('/login', (req, res) => {
  console.log(req.body);
  const id = req.body.user_id;
  const password = req.body.user_pwd;
  console.log(id);
  if (id === user.id && password === user.password) res.redirect('/');
  // 데이터 베이스 연결을 하게 되면 쿼리문이 들어가게 됨
  else res.send('아이디나 비밀번호가 틀렸습니다. ');
});

http.listen(port, () => {
  console.log(`Listening on ${port}`);
});

io.on('connection', (socket) => {
  console.log(socket.id, 'Connected');

  socket.emit('msg', `${socket.id}가 연결 되었습니다. `);

  socket.on('msg', (data) => {
    console.log(socket.id, data);
    var result = '';
    for (let i = 0; i < data.length; i++) {
      if (data[i] === data[i].toUpperCase()) {
        result += data[i].toLowerCase();
      } else {
        result += data[i].toUpperCase();
      }
    }
    socket.emit('msg', `Server: ${result}를 받았습니다. `);
  });
});

NodeJS에서 express를 사용하여 app객체를 생성하고 http 서버를 만든다.

또한 socket.io 모듈을 사용하도록 한다.

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/client.html');
});

여기서 localhost:3000/으로 접근하면 client.html 파일을 렌더링 해준다.

소켓을 연결하기 전에 socket 모듈의 주요 메소드를 알아보자.

메소드명	설명
socket.on('methodName', callback Function(data){})	소켓에 연결된 브라우저나 서버에서 메소드명을 파라미터로 갖는 emit을 호출하게 되면 이후 콜백함수가 동작하게 된다. emit 메소드의 파라미터를 data로 받아와 적절한 동작을 수행한다.
socket.on('connection', function(socket))	소켓 연결을 위해 필수적으로 수행되야 하는 함수. function의 파라미터로 소켓 객체를 사용이 가능하다.
socket.emit('methodName', data)	소켓 연결된 브라우저/서버에서 메소드명을 갖는 on 함수를 호출 한다. 이때 on 함수에 필요한 데이털르 data로 함께 전송한다.
socket.join('SpaceName')	'공간명'을 키로 하여 소켓들을 관리할 수 있게 해주는 메소드

socket.emit을 통해 클라이언트에 socket id를 보내주어 어느 소켓과 연결되어 있는지 확인이 가능하다.

그리고 Server에서 Client에서 보내온 데이터가 소문자면 대문자로 바꾸어주고 대문자면 소문자로 바꾸어준다.

이는 Client에서 보내온 데이터가 소문자인지 대문자인지 구별하기 위해 하나씩 검사를 해주도록 하였다.

글자를 대문자로 바꾸었을 때 기존의 글자와 같다면 대문자이므로 소문자로 바꾸어 주고 그 외의 경우는 모두 대문자로 바꾸어 준다.

nodemon을 사용하여 tcpServer.js 를 실행하여 준다.

서버를 키고 localhost:3000에 접속하면 아래와 같이 나오게 된다.

서버와 클라이언트가 연결되었음을 알 수 있다.

아래에 내용을 입력하면 대문자는 소문자로, 소문자는 대문자로 바꿔주게 된다.

[회고]

nodeJS를 쓰면서 여러가지 API를 만들어 보았지만 Socket.IO는 처음 사용해 보았다. 네트워크에서 배운 HTTP와 TCP 프로토콜을 사용하여 구현하였는데 네트워크에 대한 이해도 되고 처음 해보는 소켓프로그래밍이어서 채팅을 더 자세하게 구현해보고 싶은 마음이 생겼다. 클라이언트 쪽은 잘 알지 못해서 제대로 하지 못했는데 시간이 된다면 제대로 다시 구현해보고 싶다.