[React] WebSocket 을 활용한 서버간의 통신

개요

WebSocket 을 활용하여 Backend 와 Frontend 를 연결하고,
연결이 잘 되었는지 Message 를 보내 확인해보려한다.

WebSocket

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket

먼저, 공식문서를 참조하여 Server 에 WebSocket 서버를 생성한다.

라이브러리 설치
```
npm i ws
```
https://www.npmjs.com/package/ws

라이브러리를 설치 후 서버를 생성할때,
WS 서버와 Express 서버 둘 다 작동하기 원한다면 아래와 같이 서버를 생성 해 주면 된다.

http://localhost:3000
ws://localhost:3000

import http from "http"
import Express from "express"
import WebSocket from "ws"

const app = Express()
const server = http.createServer(app)
const wss = new WebSocket.Server({ server })

Express 는 WS 를 지원하지 않음

후에, 서버 단 에서 연결이 잘 되었는지 터미널에서 확인하기 위해 console.log 를 보내준다.

const handleListen = () => console.log(`Listening on http://localhost:3000`)
server.listen(3000, handleListen)

Connection

Server 에서 WebSocket 서버를 생성 해 주었다면,
실시간 통신을 위해 클라이언트 영역과의 연결을 해 주어야 한다.

// server.js
// on 메소드는 connection event 를 기다림
wss.on('connection', (socket) => {
    console.log(socket)
}) // 익명함수 socket 은 connection 이벤트가 발생 했을 경우 socket 을 받음

// client.js
const socket = new WebSocket(`ws://${window.location.host}`)

Server 단에서 console.log(socket)을 찍고,
브라우저에서 새로고침을 해 보면 아래와 같이 socket 에 담긴 정보를 터미널에서 확인할 수 있다.

Message Event

위 단계를 거쳐 socket에 담긴 정보를 확인 해 보았으니,
Server 단에서 서버가 연결 되었을때 메세지를 보내,
Client 단에서 메세지를 받아보도록하자.

// server.js
wss.on('connection', (socket) => {
    console.log('Connection to Browser 💌')
    socket.send('hello !!!') // socket 으로 데이터 전송
}) 

// client.js
// 서버가 구동되었을때의 이벤트
socket.addEventListener('open', () => {
    console.log('Connection to Server ✅')
})

// 서버에서 메세지를 send 했을때의 이벤트
socket.addEventListener('message', (message) => {
    console.log('Just got this: ', message.data, '서버에서 보낸 메세지 !')
})

// 서버를 껏을때의 이벤트
socket.addEventListener('close', () => {
    console.log('Disconnected to Server ❌')
})

코드를 확인 해 보면,
먼저, server.js에서 send 메소드를 통해 hello ! 라는 메세지를 socket 에 보냈으며
이를 client.js 에서 addEventListener를 통해 메세지를 받을 수 있다. socket에서 제공하는 Event 는 4 가지로,
open, message, error, close 를 제공하고 있다.

첫 번째 이벤트는,
open Event 를 사용해 socket 이 open 되었다면,
브라우저에 연결되었다는 메세지를 출력하는 로직이다.

두 번째 이벤트는,
message 이벤트를 사용해 Server 단에서 보낸 메세지를 받는 로직이다.

세 번째 이벤트는,
close 이벤트를 사용해 ctrl + c 를 사용해 서버를 종료 했을때,
브라우저에서 확인할 수 있는 메세지가 담긴 로직이다.

이를 브라우저에서 확인 해 보면,
메세지 이벤트에 대한 결과가 콘솔 창에 출력되고 있다.