websocket 연결 (node + nginx + react)

nodejs를 react와 websocket으로 연결해주기 위해서 nginx를 사용해봤다.

순서대로 작성하였다.

Server Side

• websocket을 생성할 server 부분을 만들어야 하기 때문에, server 폴더를 만든후 초기화를 시킨다.
  mkdir server
npm init

• 그리고 필요한 모듈인 ws를 깔아준다.
  npm install --save ws

• index.js를 생성해서 websocket을 작성한다.

const WebSocket = require("ws");
const ws = new WebSocket.Server({port:8008});

ws.on("connection", (ws, req) => {
	console.log("NEW USER CONNECT");
})

포트는 8008번으로 열었다.
일단 연결이 되면 콘솔에다가 NEW UESR CONNECT를 찍게 하였다.

• terminal에다 websocket을 돌려두자!
  node index.js

• node server에는 websocket이 계속해서 응답을 기다리고 있는 상황이다.

Nginx Side

• /opt/homebrew/etc/nginx/nginx.conf config file 수정

(https://stackoverflow.com/questions/53477693/how-do-i-configure-ws-websocket-on-nginx-nodejs-server)

http {
    include       mime.types;
    default_type  application/octet-stream;
	sendfile        on;
    keepalive_timeout  65;
	fastcgi_buffers 64 4K;
    server {
        listen       8080;
        server_name  localhost;
        location /ws {
            proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection 'upgrade';
			proxy_set_header Host $host;
			proxy_cache_bypass $http_upgrade;
			proxy_pass http://localhost:8008;
        }

여기서 listen은 8080포트로 연결을 해준다는 말이고, 밑에 proxy_pass는 8080(nginx)에 연결되면 8008(node server)로 넘겨주겠다. 라는 의미가 된다.
websocket이라서 location을 /ws이라고 했다.

• 이제 nginx를 실행해줘야한다.
  이미 실행되고 있었다면 brew services restart nginx
  처음 실행이라면 brew services start nginx

• 그럼 이제 nginx의 8080포트에 접속할 client가 필요하다.

Client Side

• create react-app을 실행해서 client 폴더를 만들어 준다.
  yarn create react-app client

• App.js에서 websocket을 불러온다.

import './App.css';
import { useState } from "react";

function App() {
  const [msg, setMsg] = useState("");
  var ws = new WebSocket('ws://localhost:8080/ws');
  ws.onmessage = (event) => {
    console.log(event.data);
    setMsg(event.data);
  }
  return (
    <div className="App">
      {msg}
    </div>
  );
}

export default App;

8008포트가 아닌 nginx에서 나오는 8080포트로 연결이 된걸 볼 수 있고 nginx.conf의 location에 /ws로 라우팅을 해뒀기 때문에 접속도 ws://localhost:8080/ws 이렇게 해야한다.

아직 App.js에서 메세지를 받지는 못한다. 그 이유는 앞선 node 서버에서 ws에 연결되면 다른건 안하고 로그만 찍혀나오게만 했기 때문이다. 그러나 터미널을 보면 새 커넥션이 생겼다는 말이 나온다.

이렇게 nginx를 통해 react의 3000포트에서도 nodejs의 8008포트를 받아올 수 있게 되었다.