websocket 초보자 가이드

Q. 웹소켓이란?
A. websocket은 지속적인 연결을 통해 브라우저와 서버 간에 데이터를 교환하는 방법을 제공합니다. 데이터는 연결을 끊지 않고 추가 HTTP 요청 없이 "패킷"으로 양방향으로 전달할 수 있습니다.

Q. websocket은 어디에서 사용할 수 있나요?
A. 우리는 온라인 거래 플랫폼, 게임 및 소셜 미디어 플랫폼과 같이 실시간 데이터 공유가 필요한 웹소켓을 사용합니다.

프런트엔드 예 -
websocket 연결을 열려면 새 프로토콜을 만들어야 합니다.

let socket = new WebSocket("ws://localhost:3000");

소켓이 생성되면 이벤트를 수신해야 합니다. 총 4개의 이벤트가 있습니다.

열기 – 연결 설정,
메시지 – 수신된 데이터,
오류 – 웹소켓 오류,
닫기 - 연결이 닫힙니다.

let socket = new WebSocket("ws://localhost.com");

socket.onopen = function(e) {
  alert("[open] Connection established");
  alert("Sending to server");
  socket.send("My name is tejendra");
};

socket.onmessage = function(event) {
  alert(`[message] Data received from server: ${event.data}`);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
  } else {
    alert('[close] Connection died');
  }
};

socket.onerror = function(error) {
  alert(`[error] ${error.message}`);
};

위의 데모도 서버 데이터베이스가 있어야 서버에 연결할 수 있습니다.
따라서 이벤트 열기 → 메시지 → 닫기가 표시됩니다. 오류가 있으면 onerror가 종료됩니다.

새로운 WebSocket(url)이 생성되면 즉시 연결을 시작합니다.

연결하는 동안 브라우저(헤더 사용)는 서버에 "Websocket을 지원합니까?"라고 묻습니다. 그리고 서버가 "예"라고 응답하면 WebSocket 프로토콜에서 대화가 계속됩니다.

프런트 엔드에서 사용하려는 경우 가장 좋은 방법은 클라이언트와 서버 측 모두에서 작동하는 socket.io입니다.

socket.io에서 사용할 수 있는 몇 가지 방법이 있습니다.

//connect to server
const socket = io("http://localhost.com");

//on() - listen to custom event or default event. (receive)
socket.on('connect', console.log('connect to server'))

//emit() - sent custom or default event to server. (send)
socket.emit('costum-event', 10, 'Hi', 'send')

중요 - 서버와 클라이언트 모두 동일한 이벤트 이름을 가지고 있습니다.

그러나 서버에서 데이터를 보내는 방법은 무엇입니까?
이를 위해 서버 측에서도 동일한 방법을 사용해야 합니다.

//broadcast.emit() - send custom or default event to everyone except the sender.
socket.broadcast.emit('costum-event', 10, 'Hi', 'send')

//to(room) - send message to a specific room or group
socket.to("some room").emit("some event");