웹소켓 (WebSocket)은 웹페이지에서 실시간으로 양방향 통신을 가능하게 해주는 HTML5 프로토콜이다.

웹소켓을 통해 서버로 메세지를 주고 받는 경우 요청없이 데이터를 처리 할 수 있다.

그렇기 때문에 실시간 데이터통신이 필요한 채팅앱이나 기타 어플리케이션 제작에 필요한 프로토콜이다.

 

https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%93

 

웹소켓 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다. 웹소켓 프로토콜은 2011년 IETF에 의해 RFC 6455로 표준화되었으며 웹

ko.wikipedia.org

 

node.js에서 이러한 WebSocket 기술을 간단하고 강력하게 사용 할 수 있게 도와주는 npm 모듈이 바로 soket.io 이다.

 

https://socket.io/

 

Socket.IO

Reliable Rest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatically try to reconnect.

socket.io

socket.io에서는 2가지가 중요한데 먼저 데이터를 emit(전송)하고 그 후에 또 다른 데이터를 on(전달) 받는 개념으로 통해 양방향 데이터 채널이 구성 된다.

 

 

먼저 본격적인 앱 제작전에 HTML 파일 및 css 파일을 처리해 준다. 또한 client 사이드의 컨트롤을 위해 js파일도 생성 해준다.

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Chat App</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <div id="message-container"></div>
  <form id="send-container">
    <input type="text" id="message-input">
    <button type="submit" id="send-button">보내기</button>
  </form>
  <script src="http://localhost:3000/socket.io/socket.io.js"></script>
  <script src="app.js"></script>
</body>
</html>

 

style.css

body {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

#message-container {
  width: 80%;
  max-width: 1200px;
}

#message-container div {
  background-color: #CCC;
  padding: 5px;
}

#message-container div:nth-child(2n) {
  background-color: #FFF;
}

#send-container {
  position: fixed;
  padding-bottom: 30px;
  bottom: 0;
  background-color: white;
  max-width: 1200px;
  width: 80%;
  display: flex;
}

#message-input {
  flex-grow: 1;
}

 

script.js (client side)

// socketApp 초기화
const socketApp = io('http://localhost:3000');

// DOM selecte
const messageContainer = document.getElementById('message-container');
const messageForm = document.getElementById('send-container');
const messageInput = document.getElementById('message-input');

// 처음 접속시에 유저의 이름을 물어본다.
const name = prompt('What is your name?');
addMessage('You joined');

// Server로 데이터를 보낸다.
socketApp.emit('new-user', name);

// Server에서 데이터가 왔을시 (socket.broadcast.emit)
socketApp.on('chat-message', data => {
  addMessage(`${data.name}: ${data.message}`);
});

socketApp.on('user-connected', name => {
  addMessage(`${name} connected`);
});

socketApp.on('user-disconnected', name => {
  addMessage(`${name} disconnected`);
});

// 기본적으로 html 파일에서 데이터를 submit 했을 때
messageForm.addEventListener('submit', e => {
  e.preventDefault();
  const message = messageInput.value;
  addMessage(`You: ${message}`);
  // Server로 데이터를 보낸다.
  socketApp.emit('send-chat-message', message);
  messageInput.value = '';
});

function addMessage(message) {
  const messageElement = document.createElement('div');
  messageElement.innerText = message;
  messageContainer.append(messageElement);
};

 

 

그럼 이제 server쪽을 제작 해보자. 

 

먼저 npm module들을 설치 해준다.

npm init -y
npm i soket.io
npm i nodemon --save-dev

 

그 다음에 server쪽 script를 작성한다.

// socket을 import 하고 3000 port 사용 명시
 const socketApp = require('socket.io')(3000);
 const users = {};
 
 // socketApp을 초기화 하고 연결 완료시에
 socketApp.on('connection', socket => {
  // 각각의 event마다 데이터를 처리 할 수 있다.
  socket.on('new-user', name => {
    users[socket.id] = name;
    // client쪽으로 다시 이벤트를 보내준다.
    socket.broadcast.emit('user-connected', name);
  });
  socket.on('send-chat-message', message => {
    socket.broadcast.emit('chat-message', { message: message, name: users[socket.id] });
  });
  socket.on('disconnect', () => {
    socket.broadcast.emit('user-disconnected', users[socket.id]);
    delete users[socket.id];
  });
});

 

Socket통신은 굳이 실시간 채팅 어플리케이션이 아니더라도 쓸 곳이 많으니 상황에 따라 잘 활용하면 좋을거 같다.

'Node & AWS > Node' 카테고리의 다른 글

eslint, prettier, eslint-config-airbnb #2  (0) 2022.10.09
eslint, prettier, eslint-config-airbnb #1  (0) 2022.10.09
JWT (JSON Web Token)  (1) 2022.09.25
process.env 환경변수 (environment)  (0) 2022.09.22
http module #0  (0) 2022.01.18

티스토리툴바