개발일지 28일차

socket.io

- socket.io를 사용하여 Real-Time-communication 구현하기

Websocket

- WebSocket은 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성하는 프로토콜이다 WebSocket API를 통해 서버로 메시지를 보내고 요청없이 응답을 받는것이 가능하다. 

- 서버의 데이터를 클라이언트에 즉시 전달할 수 있는 실시간 애플리케이션 (채팅앱 등)에 효과적인 프로토콜이다

- socket.io: socket.io는 실시간 채팅기능이 구현 가능한 frame work이다 WebSocket의 부가기능이 아니다, 

HTTP long Polling 방식을 사용하여 지연없이 메시지를 전달한다.

app.js

- 클라이언트에서는 form을 submit 했을때 실행하는 함수를 선언하고 form에 입력된 value 값을 서버로 보내는 기능을 구현하였다.

//백엔드와 프론트엔드 연결하기
const socket = io()

//방 개념
const welcome = document.querySelector("#welcome")
const form = welcome.querySelector("form")

function handleRoomSubmit(e) {
    e.preventDefault();
    const input = form.querySelector("input")
    //room 이벤트 emit 파싱 필요없음. 
    //emit(이벤트 , 보내는 내용, 서버에서 호출하는 함수)
    //백엔드로 보낼때 자동으로 obj => json으로 변환
    //백엔드로 보낼떄 첫번째 인자는 이벤트이름 백엔드와 같아야함. string 타입
    //callback함수는 꼭 마지막 인자로 넘겨준다!
    //backend에서 함수를 실행하는 것이 아니라
    //frontend에게 이 함수를 실행해! 라고 알려주고 frontend에서 실행한다!
    socket.emit("enter_room", { text: input.value }, () => {
        console.log("server is done")
    })
    input.value = ""
}

form.addEventListener("submit", handleRoomSubmit)

버튼 클릭시 서버로 form의 value 전송

  const input = form.querySelector("input")
    //room 이벤트 emit 파싱 필요없음. 
    //emit(이벤트 , 보내는 내용, 서버에서 호출하는 함수)
    //백엔드로 보낼때 자동으로 obj => json으로 변환
    //백엔드로 보낼떄 첫번째 인자는 이벤트이름 백엔드와 같아야함. string 타입
    //callback함수는 꼭 마지막 인자로 넘겨준다!
    //backend에서 함수를 실행하는 것이 아니라
    //frontend에게 이 함수를 실행해! 라고 알려주고 frontend에서 실행한다!
    socket.emit("enter_room", { text: input.value }, () => {
        console.log("server is done")
    })
    input.value = ""

- socket.emit메서드를 사용해 emit의 첫번째인자로 "이벤트의 이름" 두번째 인자로 전송할 데이터, 세번째 인자로 실행할 함 수를 넣을 수 있다 데이터의 타입은 모든 데이터의 타입을 넣을 수 있다. socket.io의 기능에서 객체를 자동으로  JSON으로 파싱하여 서버로 넘겨주는 기능이 있다.

 - callback함수는 꼭 마지막 인자로 넘겨준다!
 - backend에서 함수를 실행하는 것이 아니라
 - frontend에게 이 함수를 실행해! 라고 알려주고 frontend에서 실행한다!

 socket.emit("이벤트이름", 전송할 데이터, 실행할 함수)

input에 데이터입력

- input에 안뇽이라는 값을 입력하고 Enter Room버튼을 눌러 서버로 전송하면 서버로  { text: "안뇽" } 이라는 객체 데이터가 서버로 넘어간걸 확인할 수 있다.

- 터미널창에 입력된 value값 확인

server.js

- 클라이언트에서 전송한 데이터 wsServer변수로 받기

import http from "http"
//서버에서 웹소캣 실행
import SocketIO from "socket.io"
import express from "express"


const app = express();

app.set("view engine", "pug")
app.set("views", __dirname + "/views")
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => res.render("home"));

const httpServer = http.createServer(app)
//io 변수에 server 보내기
const wsServer = SocketIO(httpServer)

//프론트에서 connection 받기
wsServer.on("connection", socket => {
    //room 이벤트로 프론트에서 받음 첫번째 인자로 이벤트를 넣음
    //프론트에서 받은 이벤트이름과 같은이름 , string 타입
    socket.on("enter_room", (msg, done) => {
        console.log(msg)
        setTimeout(() => {
            done()
        }, 5000)
    })
})

const handleListen = () => console.log(`Listening on local3000`)
httpServer.listen(3000, handleListen)

클라이언트에서 보낸 value 서버에서 받기

- 클라이언트에서 socket.emit("enter_room") 이벤트에 태워서 보낸 데이터를 socket.on("enter_room")에서 받아 

console.log(msg)로 받은 데이터를 출력한다. 

wsServer.on("connection", socket => {
    //room 이벤트로 프론트에서 받음 첫번째 인자로 이벤트를 넣음
    //프론트에서 받은 이벤트이름과 같은이름 , string 타입
    socket.on("enter_room", (msg, done) => {
        console.log(msg)
        console.log(msg.text)
        setTimeout(() => {
            done()
        }, 5000)
    })
})

인자 msg에 input에서 받은 데이터가 들어 있어 key값으로 value에 접근할 수 있다.

- 이때 setTimeout함수로 done()이라는 함수를 실행시켜 서버가 아닌 클라이언트에서 console.log("server is done")를

실행하게 한다

노마드 코더의 WebSocket강의를 들으면서 서버와 클라이언트가 통신하는 방식에 대해 좀 더 이해하려고한다. http와 ws프로토콜의 차이점을 이해하고, socket.io를 어떤방식으로 활용하면 좋을지에 대해서도 생각해보면 좋을것 같다. 

soecket.io를 사용하지 않았을때 데이터의 타입을 어떻게 파싱해야 하는지에 대해서도 깊게 생각해봐야겠다(JSON.Stringify()), (JSON.parse)