Node.js를 사용한 WebSockets에 대한 빠른 소개

소개

WebSocket을 사용하면 기존 HTTP 프로토콜을 사용하지 않고도 네트워크를 통해 데이터를 보내고 받을 수 있습니다. WebSocket을 사용하여 실시간 애플리케이션을 구축할 수 있습니다. 예를 들어 새 메시지를 보기 위해 페이지를 새로 고치지 않고도 다른 사용자에게 메시지를 보낼 수 있습니다.

우리는 ws 라이브러리를 사용할 것입니다. WebSockets 서버 및 클라이언트를 생성할 수 있는 Node.js 모듈입니다.

전제 조건

시작하기 전에 Node.js가 설치되어 있는지 확인하세요.

Download Node.js

설정

ws 라이브러리를 설치하려면 다음 명령을 실행해야 합니다.

npm install ws

다음으로 server.js라는 새 파일을 만들고 즐겨 사용하는 텍스트 편집기에서 엽니다.

WebSocket 서버 생성

server.js 파일에서 다음 코드를 생성합니다.

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8081 })

wss.on('connection', function connection(ws) {
    console.log('Client connected')
    const interval = setInterval(() => {
        ws.send('hello world')
    }, 1000)
    ws.on("close", () => {
        console.log("Client disconnected");
    });
    ws.onerror = function () {
        console.log("Some Error occurred");
    }
});

코드 요약:

const WebSocket = require('ws') : ws 모듈을 가져옵니다.

const wss = new WebSocket.Server({ port: 8081 }) : 포트 8081에서 새 WebSocket 서버를 만듭니다.

wss.on('connection', function connection(ws) { : 새 클라이언트가 서버에 연결하면 connection 이벤트가 발생합니다.

const interval = setInterval(() => { : 1초마다 클라이언트에 메시지를 보내는 새 간격을 만듭니다.

ws.send('hello world') : 클라이언트에 메시지를 보냅니다.

ws.on("close", () => { : 클라이언트 연결이 끊어지면 close 이벤트가 발생합니다.

ws.onerror = function () { : 오류가 발생하면 onerror 이벤트가 발생합니다.

그런 식으로 우리는 서버가 매 초마다 클라이언트에 메시지를 보내는 스트리밍 애플리케이션을 시뮬레이트합니다.

그런 다음 서버를 시작하려면 다음 명령을 실행합니다.

node server.js

다음으로 서버를 실행 상태로 두고 클라이언트를 준비할 새 터미널 창을 엽니다.

WebSocket 클라이언트 생성

client.js 파일이라는 새 파일에 다음 코드를 추가합니다.

const WebSocket = require('ws')
const ws = new WebSocket('ws://localhost:8081')
ws.on('open', function open() {
    ws.on('message', function message(data) {
      console.log(`${data}`);
    });
});

위의 코드는 새 WebSocket 클라이언트를 만들고 포트 8081에서 서버에 연결합니다.

서버에서 메시지를 받으면 message 이벤트가 발생합니다.

클라이언트를 테스트하려면 다음 명령을 실행합니다.

node client.js

다음 출력이 표시되어야 합니다.

hello world
hello world
hello world
...

예시:

결론

이것은 Node.js와 함께 WebSocket을 사용하는 방법에 대한 간단한 예입니다.

WebSocket에 대해 자세히 알아보려면 official documentation 을 확인하십시오.

WebSocket이 Laravel과 어떻게 작동하는지 보려면 다음 튜토리얼을 확인하십시오.

Laravel WebSockets

더 자세히 알아보려면 SSE와 WebSockets의 차이점에 대한 다음 자습서를 살펴보는 것이 좋습니다.

SSE vs WebSockets