NodeJS 에서 웹소켓 WebSocket 서버를 열고 실시간 통신 하는 방법 - Whitmem
NodeJS 에서 웹소켓 WebSocket 서버를 열고 실시간 통신 하는 방법
Web Development
2025-05-01 14:14 게시 f709a058ed524e5d2593

0
0
7
이 페이지는 외부 공간에 무단 복제할 수 없으며 오직 있는 그대로 게시되며 부정확한 내용을 포함할 수 있습니다. 법률이 허용하는 한 가이드 라인에 맞춰 게시 내용을 인용하거나 출처로 표기할 수 있습니다.
This page is not to be distributed to external services; it is provided as is and may contain inaccuracies.
NodeJS 에서 WebSocket 서버를 열고 실시간 통신하는 방법은 별로 어렵지 않다. npm 관리자를 통해 먼저 ws 모듈을 설치한다.
이 모듈은 현재 nodeJS 프로젝트에 설치되고, 우리는 require 로 가져다 쓰면 된다.
ws 모듈은 단독적으로 실행되지는 않는다. nodejs 의 기본 라이브러리인 http 내에 종속적으로 실행되는 라이브러리이다.
let http = require("http"); let server = http.createServer(); server.listen(8000, ()=>{ console.log("서버가 실행중"); });
위 코드는 기본적으로 단순히 http 서버를 여는 NodeJS 코드이다. 여기에 우리는 WS 웹 소켓 라이브러리를 가져다 붙이면 된다.
let ws = require("ws") let socketServer = new ws.Server({server});
가져다 붙이는 방법은 어렵지 않다. require을 통해 ws 라이브러리를 가져오고, 이 내 Server 을 생성하는데 사용한다. 다만 단순히 WS를 붙이는 것으로 끝나는 것은 아니고, 이벤트를 등록 해 줘야한다. NodeJS 는 기본적으로 모두 이벤트/비동기 기반이기 때문에, 사용자가 접속, 메시지를 수신하고 접속하는 행위를 모두 이벤트로 처리해주면 된다.
socketServer.on("connection", (connection)=>{ console.log("새 웹 소켓 클라이언트 : " + connection); }
기본적으로 WebSocketServer 에는 on 메서드를 통해 이벤트를 등록할 수 있다. 인자로는 연결된 컨넥션이 콜백으로 반환된다. 즉 새 사용자 클라이언트가 접속할 때 마다 이 콜백함수로 요청이 들어온다. 인자로 전달되는 connection이 이제 접속자 하나를 의미하는데, 이 접속자 마다 별개 이벤트를 등록해야한다. 즉 클라이언트가 접속하면 클라이언트의 메시지 수신 이벤트, 연결 끊김 이벤트를 별개 등록하여 각종 이벤트에 대응해야 한다.
즉 클라이언트가 새로 접속하면, 해당 클라이언트에 이벤트를 등록한다. 메시지를 수신하는 이벤트, 연결이 종료되는 이벤트를 각각 등록하는 것이다. 메시지 이벤트에는 버퍼 데이터가 같이 들어온다. 따라서 수신하고자 하는 데이터가 String 인 경우 단순히 toString() 해주면 된다.
socketServer.on("connection", (connection)=>{ console.log("새 웹 소켓 클라이언트 : " + connection); connection.on("message",(msg)=>{ console.log(msg.toString()); }); connection.on("close",(msg)=>{ console.log("Disconnected"); }); }
즉 위 코드는 메시지가 수신되는 경우 서버 로그에 String 으로 수신한다.
위와 같이 코드를 구성 후, 서버를 실행해본다.
이 상태에서 웹 브라우저 코드를 하나 만들어 웹 소켓 localhost 에 접속해본다.
<div id='box'></div> <script> const ws = new WebSocket('ws://localhost:8000'); ws.addEventListener("open",()=>{ console.log("연결됨"); ws.send("Hello!"); }); ws.addEventListener("message",(e)=>{ document.getElementById('box').innerHTML += e.data +"<br>"; console.log(e.data); }); ws.addEventListener("close",(e)=>{ console.log("서버와의 연결이 종료됨"); }); </script>
위 코드는 DIV 영역을 하나 만들고 웹 소켓 내용을 출력함과 동시에 연결되면 서버에 Hello! 메시지를 전송하는 내용을 포함하고 있다. 위 코드로 html을 하나 만든 뒤 html 브라우저를 실행해본다.
서버에 Hello! 가 수신된 것을 볼 수 있다.
Node 서버 측에서 이제 클라이언트에 데이터를 보내기 위해서 단순히 send 를 사용하면 된다.
String 데이터를 보내는 것이기 때문에 인자로 String 을 바로 대입한다.
브라우저에서 정상적으로 수신되는 것을 확인할 수 있다. 이 방법을 사용해서 온라인 채팅 서비스를 구현할 수 있다.
댓글 0개
댓글은 일회용 패스워드가 발급되며 사이트 이용 약관에 동의로 간주됩니다.
확인
Whitmemit 개인 일지 블로그는 개인이 운영하는 정보 공유 공간으로 사용자의 민감한 개인 정보를 직접 요구하거나 요청하지 않습니다. 기본적인 사이트 방문시 처리되는 처리 정보에 대해서는 '사이트 처리 방침'을 참고하십시오. 추가적인 기능의 제공을 위하여 쿠키 정보를 사용하고 있습니다. Whitmemit 에서 처리하는 정보는 식별 용도로 사용되며 기타 글꼴 및 폰트 라이브러리에서 쿠키 정보를 사용할 수 있습니다.
이 자료는 모두 필수 자료로 간주되며, 사이트 이용을 하거나, 탐색하는 경우 동의로 간주합니다.