✅ WebSocket이란?

브라우저와 서버간에 연결을 유지한 상태에서 양방향 소통이 가능하게끔 하는 기술이다.
이를 활용하여 상호 간의 실시간 데이터 교환이 가능한 환경을 구축할 수 있다.
이전까지 HTTP메서드와 같은 브라우저가 서버에 요청을 보내면 서버가 응답을하여
데이터 통신이 이루어지는 방식이었다면, WebSocket은 서버가 먼저 브라우저에 데이터를 보내고 그에 따른 응답을 브라우저로부터 받아오는 것도 가능하다는 의미다. 이러한 특징을 활용하여 온라인 게임, 채팅, 주식 거래등 실시간으로 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 사용된다.

✅ JS에서 사용하는 방법

WebSocket 객체를 활용하여 서버에 연결한다. http는 ws를 https는 wss를 사용해야된다.

const io = new WebSocket("ws://주소");

🎉이벤트를 활용하는 방법

addEventListner() 혹은 on이벤트이름을 활용하여 서버로부터 들어오는 이벤트에 따라 특정한 작동을 하도록 하는 것을 의미한다.

open

웹소켓 연결이 발생했음(open)을 의미한다.

io.addEventListener("open", () =>{
    console.log("WebSocket is open");
})
io.onopen = () => {
  console.log("WebSocket is open");
};

message

웹소켓으로 연결된 서버로부터 데이터(message)가 수신되었음을 의미한다.
성공적으로 웹소켓이 연결되어 데이터를 받으면 내가 원하는 데이터로 가공하면된다.

io.addEventListener("message", (event) =>{
    console.log("Data received from server ", event);
})
io.onmessage = (event) => {
  console.log("Data received from server ", event);
};

error

웹소켓의 연결이 잘못 되거나, 데이터 전송의 실패 등의 오류가 발생했음을 의미한다.

io.addEventListener("error", (event) =>{
    console.log("An error has occurred. ", event);
})
io.onerror = (event) => {
  console.log("An error has occurred. ", event);
};

close

웹소켓의 연결이 닫혔음(close)을 의미한다.

io.addEventListener("close", () =>{
    console.log("WebSocket is close");
})
io.onclose = () => {
  console.log("WebSocket is close");
};

⚙️메서드를 활용하는 방법

send()

브라우저가 서버로 보낼 데이터를 의미한다.

io.addEventListener("open", () =>{
    console.log("WebSocket is open");
  	io.send("Hello Server")
})

close()

웹코켓 연결을 닫기 위해 사용되는 메소드이다.

io.addEventListener("error", () =>{
  	io.close()
  	console.log("error 발생으로 웹소켓을 닫습니다.'");
})

✅ 문가네 개발 블로그를 참고하여 만들었습니다. 감사합니다!!

https://moon-ga.github.io/javascript/websocket/#send