자바스크립트 (프론트) websocket event 정리

HTTP 프로토콜 이란?

-> 기본 프로토콜인 HTTP는 우리가 알고 있듯이 🤷‍♂️ ,

    클라이언트에서 서버로의 요청만 가능하며 서버에서 클라이언트로 먼저 요청을 할 수 없다.

-> 서버는 클라이언트를 기억하지 않음

 

Websocket 프로토콜 이란?

-> 서로 양방향의 연결로, 서버단에서 먼저 클라이언트로 요청을 할 수 있다. (채팅에 필수) 👀

-> 서버가 클라이언트를 기억하고 있음

 

 

프론트단에서의 Websocket 연결

기본적으로 모든 브라우저에는 Websocket이 내장되어 있다.
따라서, 프론트엔드에서는 별 다른 import 없이 Websocket연결이 가능하다 😀

예시
const socket = new WebSocket("ws://localhost:8080") 또는
const socket = new WebSocket(`ws://${window.location.host}`) 또는
const socket = new WebSocket("ws://연결하고자 하는 url")

위와 같이 작성하면 url 해당 서버와의 Websocket 연결을 시도하게 된다.
(node.js, spring 등 서버 단에서의 Websocket 연결을 받는 방법은 추가로 글 작성 예정) 🤦‍♂️

 

 

위에 정의한 socket으로 여러 event를 사용할 수 있다. (event가 많지는 않음)  👍

 

-> on은 connect이 완료되었을 때 동작

-> message는 서버로부터 messager가 왔을 때 동작

-> close는 서버와의 연결이 끊겼을 때 동작

-> send 는 서버로 message 보낼 때 사용

open 예시
socket.addEventListener("open", () => {
	console.log("hi Server");
}

message 예시
socket.addEventListener("message", (message) => {
	console.log("from the server message ", message);
}

close 예시
socket.addEventListener("close", () => {
	console.log("Disconnected the Websocket");
}

send 예시
socket.send("client to server send message");