WebRTC - 실시간 채팅 APP 만들기 (4)

🔖 WebSocekt( )
링크 : https://developer.mozilla.org/ko/docs/Web/API/WebSocket
웹소켓 객체 생성하기
Ex) const socket =newWebSocket('ws://localhost:8080');
이벤트리스너를 사용할 수 있다.
종류 : connection, close, error, headers, listening

그 중 connection을 사용할 건데, 연결 되었으면, 어떤 이벤트를 실행해~ 와 같은 의미이다.

이 메서드는 콜백으로 socket을 받는데, 쉽게 설명하자면 브라우저에 연결된 건너편의 누군가이다.

socket을 이용하면 메세지를 주고 받고 할 수 있게 된다.

 

프론트 단 (app.js)에서도 socket을 정의, 백 단(server.js)에서도 socket을 정의함으로서 백엔드로부터 메세지를 받을 수 있고, 프론트에서 메세지를 보낼 수 있다.

• server.js 의 socket : 연결된 브라우저
• app.js의 socket : 서버로의 연결

 

server.js - 백엔드에서의 socket

const server = http.createServer(app); //http server
const wss = new WebSocketServer({ server }); //websocket server + http server

wss.on("connection", (socket) => {
  socket.send("hello");
});

 

connection이 생겼을 때, socket으로 즉시 메세지를 보낸다. (socket.send)

 

app.js - 프론트엔드에서의 socket

const clientSocket = new WebSocket(`ws://${window.location.host}`);
//(1)
clientSocket.addEventListener("open", () => {
  console.log("Connected to Server");
});
//(2)
clientSocket.addEventListener("message", (message) => {
  console.log("Just Got This : ", message, "from the Server");
});
//(3)
clientSocket.addEventListener("close", () => {
  console.log("Disconnected from Server");
});

 

(1) connection이 "open"되면 볼 수 있는 메세지를 담고 있는 이벤트

(2) "message"를 받을 때마다 내용을 출력하는 이벤트

(3) 서버가 오프라인이 될 때("close"될 때) 실행되는 이벤트