[node.js / ws] Websocket 사용하기, 내용 정리 및 예제 / How to use Websocket

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요, 상훈입니다.

 

■ Websocket (웹소켓)

- Websocket이란?
- Websocket과 socket.io
- Websocket, JavaScript
- Websocket, Socket.io

 

■ Websocket이란? / Websocket의 특징

1. 서버(server)와 클라이언트(client)간의 특정 포트를 이용해 지속적인 실시간 양방향 통신 
2. 실시간 통신이 필요한 경우에 사용
   ex) 실시간 스트리밍 방송, 채팅, 게임 등
3. 일반 TCP Socket과 다른 점
   → 최초 접속 = 일반 Http Request를 통해 handshaking과정 거친다.
4. 기존의 port : 80, 443으로 접속→ CORS적용, 인증 등을 유지 가능
5. → 추가 방화벽을 열지 않고 통신이 가능함

■ 추가. 비동기(Http)통신을 웹소켓처럼 사용하면 지속적인 연결을 요청하기 때문에 과부하가 걸린다.

 

■ Websocket과 socket.io

  - WebSocket과 socket.io 는 다르다.

→ WebSocket
  : 양방향 소통 프로토콜, socket.io : 양방향 통신을 위해 웹소켓 기술을 활용하는 라이브러리.
    ⇒ JavaScript & jQuery 의 관계

참고

 

■ 사용 방법 - JavaScript

웹소켓을 사용하려면 Web Socket 객체 생성을 해야한다.

→ 이 객체는 자동으로 서버와 연결을 열려고 할 것이다.

1. 필수 파라미터 1개 : url
2. 선택 파라미터 1개 : protocols
3. ERROR : SECURITY_ERR ⇒ 포트 차단일 경우 발생
   

• 한개의 프로토콜

 var exampleSocket 
   = new WebSocket("ws://www.example.com/socketserver", "protocolOne");

 

• 여러개의 프로토콜

var exampleSocket
 = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);

 

• 서버에 데이터 전송
  • 전송 가능한 데이터 유형 : String, Blob, ArrayBuffer
  • 바로 데이터를 전송하면 실패할 수 있기 때문에 onopen() 으로

exampleSocket.onopen = function (event) {
  exampleSocket.send("Here's some text that the server is urgently awaiting!");
};

 

• 서버로부터 데이터 수신
  • 메세지가 수신되면 message 이벤트 ⇒ onmessage 함수로 전달된다.

• exampleSocket.onmessage = function (event) {
    console.log(event.data);
  }

• 연결 종료
  • 웹 소켓 사용 종료 시 close() 메소드를 호출하여 연결을 종료한다.

  exampleSocket.close();
  

  • 네트워크에 전달이 되지 않은 정보가 아직 남았을 수도 있으니, bufferedAmount Attribute를 조사하여 데이터를 검사하는 것도 좋다.
    
• 고려사항 - 보안
  • 웹소켓은 혼합 연결 환경에 이용할 수 없다.
  • ex) HTTPS로 로드 된 페이지 → non-secure 웹소켓 연결 수립, non-secure 웹소켓 연결 → HTTPS로 로드 된 페이지

참고페이지 : MDN

 

 

■ 사용방법 - Node.js

Node.js에서 웹소켓을 구성하려면 ws 패키지를 사용해야 한다.

$ npm install ws

 

1. 서버측
   • port: 3000 으로 웹소켓 서버를 연다.

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 3000 })

wss.on('connection', ws => {
  ws.on('message', message => {
    console.log('received: %s', message)
  })
  ws.send('something')
})

 

1. 클라이언트측
   • 마찬가지로 port:3000 으로 연결하고 데이터를 전송

const ws = new WebSocket('ws://localhost:3000')

ws.on('open', () => {
  ws.send('something')
})
ws.on('message', data => {
  console.log(data)
})

참고페이지 : 웹소켓

 

 

출처: 메시지 아이콘 제작자: Freepik - Flaticon