팀 프로젝트를 진행 중 알림 서비스에 대해 이야기하면서 소켓 통신에 관한 주제가 나왔습니다.
그래서 프로젝트를 진행하기 전에 웹 소켓에 대해 알아보려고 합니다.

<br>
<br>

## <span style="color: #7360BD">📌 웹 소켓(Web Socket) 이란?</span>

HTTP 통신을 이용하면 클라이언트에서 서버에 요청을 보내야만 서버에서 응답을 할 수 있습니다.
즉, 서버에서는 요청을 받지 않으면 클라이언트에 통신할 수 없는 것입니다.
이러한 문제점을 해결하기 위해서는 **양방향으로 통신할 수 있는 웹 소켓 통신**을 이용해야합니다.

<br/>

채팅, 문의, 알림, 트레이딩과 같은 **'실시간'** 이라는 키워드가 필요한 기능들은 HTTP 통신을 사용해서는 구현할 수 없습니다.
이러한 기능을 제작할 때 소켓통신을 이용해야합니다.

<br/>

웹 소켓 통신 연결은 아래 코드와 같은 방법으로 시작합니다.

```js
let socket = new WebSocket("ws://chanstory.dev");
```

'http', 'https' 프로토콜과 다르게 'ws', 'wss' 프로토콜을 사용합니다.
'ws', 'wss'의 차이는 'http', 'https'와 같은 관계로 보안과 신뢰성에서 차이가 있습니다.


<br/>
<br/>

## <span style="color: #7360BD">🤝 웹 소켓 연결 과정</span>

브라우저에서 소켓 통신을 이용하기 위해서는 소켓 통신이 가능한지 확인하는 **핸드셰이크(Hand Shake)** 과정이 필요합니다.
<br/>
헨드셰이크 과정은 이렇습니다.
1. 브라우저에서 HTTP 통신을 이용하여 서버에 소켓 통신이 가능한지 요청을 보냅니다. 이 때 헤더에 소켓을 사용하기 위한 Upgrade, Connection, WebSocket에 관한 정보를 함께 전송합니다.
    ```
    GET /chat
    Host: https://chanstory.dev
    Origin: https://chanstory.dev
    Connection: Upgrade
    Upgrade: websocket
    Sec-WebSocket-Key: ...
    Sec-WebSocket-Version: 13
    ```
2. 서버에서 웹 소켓 통신이 가능하다면 서버에서 웹 소켓 통신이 가능하다는 101 상태의 응답을 보냅니다. 이 때 서버에서는 클라이언트에서 받은 'Sec-WebSocket-Key' 키 값에 문자를 더한 뒤 암호화하여 'Sec-WebSocket-Accept'로 클라이언트로 응답합니다.
    ```
    101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: ...
    ```
3. 이후에는 'ws' 혹은 'wss' 프로토콜을 이용해 양방향 통신을 진행합니다.

<br/>
<br/>

## <span style="color: #7360BD">😎 웹 소켓을 사용해보자</span>

웹 소켓은 HTML5 표준 기술인 [WebSocket API](https://developer.mozilla.org/ko/docs/Web/API/WebSocket)를 사용해서 구현할 수 있습니다.
WebSocketAPI를 사용했을 때 오래된 브라우저에서 작동하지 않는 문제가 발생할 수 있는데 이를 보완해주는 라이브러리인 [socket.io](https://socket.io/docs/v4/)를 사용할 수도 있습니다.
<br/>
저는 Websocket API를 사용하여 클라이언트에서 서버로 간단한 메세지를 전송하도록 구현해보겠습니다.

<br/>

먼저 소켓 서버를 만들겠습니다.
>app.js
```js
// express, ws 객체 생성
const express = require("express");
const ws = require("ws");

const app = express();

const httpServer = app.listen(3001, () => {
  console.log("서버가 3001번 포트로 동작합니다.");
});

const webSocketServer = new ws.Server({
  server: httpServer,
});

webSocketServer.on("connection", (ws, request) => {
  // 연결한 클라이언트 ip 확인
  const ip = request.socket.remoteAddress;

  console.log(`클라이언트 [${ip}] 접속`);

  // 연결이 성공
  if (ws.readyState === ws.OPEN) {
    console.log(`[${ip}] 연결 성공`);
  }

  // 메세지를 받았을 때 이벤트 처리
  ws.on("message", (msg) => {
    console.log(`${msg} [${ip}]`);
    ws.send(`${msg} 메세지를 확인했어요.`);
  });

  // 에러 처리
  ws.on("error", (error) => {
    console.log(`에러 발생 : ${error} [${ip}]`);
  });

  // 연결 종료 처리
  ws.on("close", () => {
    console.log(`[${ip}] 연결 종료`);
  });
});
```


<br/>

다음으로는 웹 소켓 서버에 연결할 html 파일을 만들겠습니다.
>index.html
```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>web socket</title>
  </head>
  <script>
    const webSocket = new WebSocket("ws://localhost:3001");

    // 웹 소켓 연결 이벤트
    webSocket.onopen = function () {
      alert("웹소켓 서버와 연결에 성공했습니다.");
    };

    // 웹 소켓 메세지 수신
    webSocket.onmessage = function (event) {
      alert(event.data);
    };

    // 웹 소켓 연결 종료
    webSocket.onclose = function () {
      alert("웹소켓 서버와 연결이 종료되었습니다.");
    };

    // 오류 발생
    webSocket.onerror = function (error) {
      console.log(error);
    };

    function sendMessage() {
      const message = document.getElementById("message").value;
      webSocket.send(message);
    }
  </script>
  <body>
    <div>
      <input type="text" id="message" />
      <button type="button" onclick="sendMessage()">전송</button>
    </div>
    <div></div>
  </body>
</html>
```

<br/>

클라이언트에서는 웹 소켓 서버와의 연결 상태에 따라 알림을 주고 메세지를 입력하고 버튼을 누르면 서버로 메세지를 전송하는 간단한 기능을 가지고 있습니다.

<br/>

서버에서는 접속한 클라이언트와 연결 상태에 따른 메세지를 로그로 남기고 메세지를 받으면 답장을 하도록 구현했습니다.

<br/>

테스트 결과입니다.
왼쪽이 클라이언트 오른쪽이 서버입니다.

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/be35d766-aa36-4b93-4772-69c8ed3dbd00/public)


팀 프로젝트를 진행 중 알림 서비스에 대해 이야기하면서 소켓 통신에 관한 주제가 나왔습니다.
그래서 프로젝트를 진행하기 전에 웹 소켓에 대해 알아보려고 합니다.

<br>
<br>

## <span style="color: #7360BD">📌 웹 소켓(Web Sock

웹 소켓의 개념과 간단한 예제