[Node.js] ws란? / 사용법

ws란?

클라이언트와 서버사이의 Websocket 통신을 하게 해주는 Node.js 패키지

 

ws 설치

npm i ws

 

 express와 합치기 ( http + websocket )

import http from 'http'
import {WebSocket} from 'ws'

/*
  <express 추가 방법>
  import express from 'express'
  const app = express()
  const server = http.createServer(app);
*/

const server = http.createServer();
// http 서버 만들기

const wss = new WebSocket.Server({ server });
// 웹소켓 서버 만들기

function handleConnection(socket) {
  console.log(socket);
}
// 요청한 클라이언트 정보 다루기위한 함수

wss.on("connection", handleConnection);
// 웹소켓 connection을 감지(이벤트 리스너), 콜백함수에 소켓(요청한 클라이언트 정보) 전달, 콜백함수 실행

server.listen(3000)
// http + ws 3000포트 서버 실행

 

 

connection 만들기

웹소켓은, 클라이언트의 요청과 서버의 응답을통해 connection을 만들고,

이를통해 실시간 통신이 가능하도록 한다.

 

프론트엔드(클라이언트)에서 웹소켓 connection 요청하기

// 프론트엔드 서버
// WebSocket은 프로토콜이고, 여러 브라우저에서 기본적으로 지원한다.

const socket = new WebSocket(`ws://${웹소켓서버주소}`);
// 새로운 웹소켓 연결(connection) 만들기



백엔드(서버)에서 브라우저 요청받아, connection 생성

// 백엔드 서버
// 서버에서 프론트엔드 요청이 들어오면 wss.on 이 실행됨
wss.on("connection", (socket) => {
  console.log("Connected to Browser")
}