[JavaScript] 간단한 웹소켓 WebSocket 실행기

프로젝트 준비를 위해 웹소켓을 실행해보려고 합니다.
(스프링 부트 프로젝트로 빌드된 환경입니다.)

서버용 js파일을 하나 만들어주고 터미널에 명령어를 입력해줍니다.

npm init

실행하면 package name, version .. 등등 터미널에서 입력하는 과정이 있는데 현재는 테스트용 서버 실행이 목적이기 때문에 엔터, 엔터만 연타해보도록 합니다.

Is this OK? 가 나오면 엔터를 누르고 실행합니다.

실행한 후에 확인해보면 터미널을 실행한 경로에 json 파일이 생성된 것을 확인할 수 있습니다.

name은 패키지 이름이 default입니다.

웹소켓 연결을 쉽게 해주는 라이브러리를 실행합니다.

npm install express ws

새로운 json 파일이 생겼습니다.

테스트 해보기 위해 html 파일을 하나 생성해봅니다. html 구성에 간단하게 버튼을 만들어주었습니다.

<button id="send">메세지 보내기</button>

server.js 파일도 하나 생성해서 node.js 서버를 만들어줍니다.

const express = require('express');
const app = express();
const Websocket  = require('ws');

const socket = new Websocket.Server({
    port: 8003		// 웹소켓 port
});

app.listen(5000);	// 서버 port

app.use("/",function(req, res) {
    res.sendfile(__dirname + '/main.html');
});

처음에 인스톨했던 라이브러리를 변수로 담고 (like import 구문) 이것은 앞으로 웹소켓 서버 역할을 하게됩니다. 접속 포트는 5000번이고 웹소켓 포트는 8003번입니다.

터미널에 $ node server.js 실행하면 localhost로 오류없이 정상 실행되는 모습을 확인할 수 있습니다.

그러면 웹소켓으로 메세지를 전송해보겟습니다.

유저가 메세지 전송요청을 보내기 위해 html에 웹소켓 연결을 추가해줍니다.

<button id="send" onclick="socket.send('hi')">메세지 보내기</button>

<script>
    let socket = new WebSocket("ws://localhost:8003")
</script>

유저의 요청을 받아보기 위해 server.js에도 추가해줍니다.

socket.on('connection', (ws, req) => {
    ws.on('message', (msg) => {
        console.log('서버에서 온 메세지 : ' + msg);
    });
});

다음과 같이 올린 데이터와 서버에서 받은 클라이언트(ws)의 메세지를 확인해보았습니다.

서버에서 클라이언트로 데이터를 보내려면 아래의 코드를 활용하면 됩니다.

socket.on('connection', (ws, req) => {
    ws.on('message', (data) => {
        console.log('클라이언트에게 보내는 메세지 : ' + data);
        ws.send('서버에서 보내는 메세지 : ' + data);
    });
    ws.send('보낸다 경로로 서버에서 : ' + req.socket.remoteAddress)
});

추가적으로 코딩애플의 설명을 참고하였는데 버전 차이인지 아래 new Websocket.Server에서 Server가 인식이 안되는 문제가 있었지만 실행에서 문제는 없었습니다.

const Websocket  = require('ws');

const socket = new Websocket.Server({
    port: 8003		// 웹소켓 port
});

다른 방법으로는 WebSocketServer를 인스턴스 생성하여 사용해도 동일하게 작동하기 때문에 혹시 지원되지 않는다면 아래 코드를 사용하면 됩니다.

const { WebSocketServer }  = require('ws');

const socket = new WebSocketServer({
    port: 8003
});

스프링 부트 환경에서 웹소켓을 사용했을 때 CORS 문제로 웹소켓 실행이 되지 않았는데

npm install cors

실행하고 cors 세팅을 추가해서 문제가 해결됐습니다.

const cors = require('cors');

app.use(cors());

문제 발생 이유를 간단히 설명하자면 스프링 부트 응용 프로그램과 Node.js 서버가 서로 다른 포트 또는 도메인에서 실행 중인 경우 CORS 문제가 발생될 수 있다고 합니다. 스프링 부트의 요청을 허용하려면 Node.js 서버에서 CORS 설정을 구성해야 해서 이를 위해 cors 미들웨어를 사용하였습니다.