포스코 X 코딩온 7기 8주차 ch2. 웹소켓

수업을 듣기 전에는

채팅앱을 만드는 것이 되게 어려운 작업이라고 생각했는데!

 

socket.io라는 라이브러리를 사용하니

생각보다 어려운 작업이 아니라서

신기했다!

 

그래서 재미나게 수업을 들었다 

ㅋㅋ 😚

 

그러타면 배운 내용 복습을 해보자 !

 

 

---

소켓 이란?

학교 전공수업중에 배운 용어가 나와

조금은 반가웠다

 

그래도 나 전공자구나~ ㅋㅋ

(근데 사실 기억은 잘 안남,,)

 

소켓 ! (Socket)

 

- 프로세스가 네트워크로 데이터를 내보내거나

데이터를 받기 위한 실제적인 창구역할을 하는 것

 

- 서버와 클라이언트를 연결해주는 도구로써

인터페이스 역할을 하는 것

 

- 소켓은 프로토콜, ip주소, 포트 넘버로 정의된다

 

 

 

---

Socket.io

 

WebSocket이란?

 

- 양방향 소통을 위한 프로토콜 (약속)

 

- html5 웹 표준 기술

 

- 빠르게 작동하며 통신할 땐 아주 적은 데이터를 이용한다.

 

- 이벤트를 단순히 듣고, 보내는 것만 가능하다.

 

Socket vs WebSocket ?

 

소켓은 다양한 프로토콜에서 범용 통신 채널을 제공한다.

 

WebSocket은 실시간 웹 응용 프로그램용으로 특별히 설계되어

간소화된 프로토콜을 통해 작동하고 수명이 긴 단일 연결을 사용한다.

 

 

Socket.io란?

 

- 양방향 통신을 하기 위해 웹 소켓 기술을 활용하는 라이브러리

 

- 표준이 아닌 라이브러리!

 

- 방 개념을 이용해 일부 클라이언트에게만

데이터를 전송하는 브로드 캐스팅이 가능하다

 

- 웹 소켓을 기반으로 실시간 웹 애플리케이션을 위한

js라이브러리

 

- 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 해주는 패키지

 

- 여러가지 메소드 들을 제공해준다 

emit(보내다), on(받다), join(들어가다), leae(나가다), 

room(방을 만들어 room에 들어있는 소켓끼리 통신할 수 있게 해준다) 등등

 

 

Socket IO이벤트 통신

소켓 io의 메소드의 특징은 클라이언트에서 발생하는 이벤트는 개발자가 임의로 설정 할 수 있다

 

// 해당 이벤트를 받고 콜백함수를 실행
socket.on('받을 이벤트 명', (msg) => {
})

// 이벤트 명을 지정하고 메세지를 보낸다.
socket.emit('전송할 이벤트 명', msg)

 

이런 식으로 메세지 마다 고유한 이벤트를 등록해 구별해서 송수신하면,

 

채팅방에서 '귓속말' 기능처럼 

특정 어느 사람한테만 메세지를 송신한다는 등의 

다양한 통신 기능을 구현할 수 있다.

 

---

socket.io 사용법

설치하기!

npm install socket.io

 

 

위와 같은

cannot find module 'socket.io' 에러가 뜬다면?

 

해결방법>

npm link socket.io

실행 js파일과 동일선 상에 

node_modules를 포함한 링크를 만들어주어야 한다.

 

 

index.js>

const SocketIO = require("socket.io");
const io = SocketIO(server);

io.on("connection", (socket) => {
  console.log("socketId: ", socket.id);
  socket.on("chat", (value, room, call) => {
    console.log(value);
    socket.to(room).emit("new_chat", value.msg);
    call();
  });
  socket.on("room", (value, call) => {
    socket.join(value.msg);
    call();
    socket.to(value.msg).emit("Welcome", nickArray[nickArray.length - 1]);
  });
  socket.on("nick", (value) => {
    nickArray.push(value);
    console.log(nickArray);
  });

- io.on("commection", (socket)=>{ ... }

이 부분은 클라이언트가 서버에 연결 될 때 마다 실행되는 이벤트 핸들러

 

- socket.on("chat", (value, room, call) => {...} 클라이언트가

chat이벤트를 전송할 때 실행되는 이벤트 핸들러

value 는 클라이언트에서 전송된 데이터

room은 채팅이 전송될 방,

call은 클라이언트로 부터 전달된 콜백함수

 

- socket.on("room", (value, call) => { ...} : 

클라이언트가 'room'이벤트를 전송할 떄 실행되는 이벤트 핸들러

value는 클라이언트에서 전송된 데이터를 나타낸다

 

- socket.join(value.msg): 클라이언트를 value.msg로 지정된 방에 참여

 

- socket.to(value.msg).emit("Welcome", nickArray[nickArray.length - 1]); 

: 해당 방에 속한 다른 클라이언트에게 

welcome이벤트를 전송하여 

방에 새로 참여한 클라이언트를 환영, 

nickArray 는 닉네임을 저장하는 배열로, 

nickArray[nickArray.length-1]은 최근에 추가된 닉네임을 나타낸다

 

- socket.on("nick", (value) => { .. }

: 클라이언트가 nick이벤트를 전송할 때 실행되는 이벤트 핸들어

value는 클라이언트에서 전송된 닉네임을 나타낸다.

 

- nickArray.push(value): nickArray 

: 배열에 클라이언트의 닉네임을 추가

 

 

views/index.ejs>

일부만!

socket.on("new_chat", (message) => {
            const li = document.createElement("li");
            const nick = document.querySelector("#nick");
            li.textContent = `${message}`;
            ul.append(li);
        });

 

- 해당 코드는 new_chat이벤트가 발생했을 때 실행되는 콜백 함수이다!

 

- 새로운 채팅 메시지가 도착하면 해당 메시지를 가진

li 요소를 생성하고, 이를 채팅 목록 ul에 추가하는 역할을 한다.

 

---

예제 2. 

 

index.js>

//data를 보내주는 역할
io.on("connection", (socket) => {
  socket.on("chatting", (data) => {
    const { name, msg } = data;
    io.emit("chatting", {
      name,
      msg,
      time: moment(new Date()).format("h:ss A"),
    });
  });
});

- 채팅 이벤트를 처리하고 연결된 클라이언트에

데이터를 보내기 위한 서버 측 코드이다.

 

- connenction이벤트에 대한 socket.io이벤트 핸들러 설정

 

- socket.on("chatting", (data) =>{ ... } :

connection이벤트 핸들러 내에서 이 코드는 

chatting 이벤트에 대한 다른 이벤트 핸들러를 설정한다.

 

- io.emit("chatting", { ... }) :

수신된 데이터에서 name과 msg를 추출한 후 서버는io를 사용하여

연결된 모든 클라이언트에게 chatting이벤트를 보낸다.

 

- time: moment(new Date()).format("h:ss A"):

시 : 초 AM/PM형식으로 현재 시간을 제공한다.

예를 들어, 10시 30분 45초 이면 결과는

오전 10시 30분이다.

 

 

index.ejs>

socket.on("chatting", (data) => {
  const { name, msg, time } = data;
  const item = new LiModel(name, msg, time);
  item.makeLi();
  displayContainer.scrollTo(0, displayContainer.scrollHeight);
});

data를 받는역할 !

 

 

 

 

 

수업을 들을 땐 대충 알겠다 싶었는데

또 혼자 복습하다 보니

제대로 모르겠는 느낌..

 

뭐지.. 

이 느낌..

 

 

 

한번에 이해하면 개발자 누가 못해~ 싶지만

지금 당장은.. 

무지한 내가 싫다 !!

 

 

하다보면 익숙해지는 거 ..

맞겠지?

 

...

그렇다고 하자