2022-04-13(수) TIL

오늘 해야하는일

socket.io 구현하기

socket.io 사용법

Socket.io 공식 홈페이지 설명 내용상

브라우저와 서버 간의 실시간,양방향,그리고 이벤트 기반 통신을 가능하게 해주는 라이브러리 입니다.

socket 통신을 위한 모듈이라고 생각하면 된다.

npm install socket.io를 통해 모듈을 설치한다.

Server-Side Code(Node.js)

const express = require('express')
const app = require('express')
const http = require('http').createServer(app)
const socketIo = require('socket.io')

http.listen(3000, ()=> {
console.log("서버가 잘 연결되었습니다.")
})

io.on("connection", (socket)=> {
	console.log("연결이되었습니다.")
	socket.on("이벤트명",(payload)=> {
		console.log(payload)
	})
	socket.on("이벤트명", (item) => {
		console.log(item.name + ":" + item.message)
		io.emit("이벤트명", {name:item.name, message:item.message})
		//클라이언트에 이벤트를 보냄
	 })
})

module.export = app

socket.io 사용에서 가장 중요한 함수 두가지이다.

• socket.on(”이벤트명”,Callback Function): 해당 이벤트를 받고 콜백함수를 실행합니다.
• socket.emit(”이벤트명”,Data):이벤트 명을 지정하고 데이터를 보냅니다.

[socket.io](http://socket.io) 사용에서 가장 중요한 함수 두가지이다.

- socket.on(”이벤트명”,Callback Function): 해당 이벤트를 받고 콜백함수를 실행합니다.
- socket.emit(”이벤트명”,Data):이벤트 명을 지정하고 데이터를 보냅니다.

그리고, Custom Event 명이 아닌 기본으로 존재하는 Event 명의 의미를 알려드리겠습니다.

• connection : Client 와 연결되었을때 발생
• disconnection : Client 와 연결해제되었을 때 발생

위 사항을 보면 port 3000으로 서버를 실행하면 “listening on 3000” 라는 문자열을 출력하여 3000 포트에서 socket 연결을 기다립니다.

그리고, socket 객체인 io 변수에 Client와의 연결 이벤트인 ‘connection’을 이벤트를 받는 on함수로 받고, 연결이되면 socket 객체를 받아 “{Socket ID} Connected” 라는 문자열을 출력하고,

Client 에게 emit 함수로 ‘msg’라는 이벤트 이름으로 데이터를 잘 받았다는 메세지를 Client에게 전달합니다.

반드시 사용해야하는 부분

html, ejs에 반드시 넣어줘야 socket을 사용할 수 있음
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>

소켓기능(리액트 + 노드 참고)

• https://velog.io/@jhoon12/나만의-채팅-서비스-만들기react-express-Socketio

썬더 클라이언트 사용법

또 까먹어지고....

로그인 기능구현을 하게되면 로그인 인증 미들웨어를 거치게되고 거치면서 토큰안에다가

user 의 아이디를 담아서 보낼수있다 그렇때에 썬더클라이언트로 확인할수있는 방법

router.get('/me', authMiddleware, async (req, res) => {
    try {
        const {user} = res.locals;
        console.log(user)
        //미들웨어 통과시 사용자정보를 클라에게 전달한다.
        res.send({user});
    } catch (error) {
        console.log(`${req.method} ${req.originalUrl} : ${error.message}`);
        res.status(400).send(
            {errorMessage: "사용자 정보를 가져오지 못하였습니다."}
        );
        return;
    }
});

썬더 클라이언트에서는 이 토큰에 user정보 어떤게 담겨있는지 어떻게 알수있을까???

먼저는 console.log(user)를통해서 어떤 정보가 담겨있는지 콘솔로 볼수있게 입력하고

썬더 클라이언트에서 이렇게 URL입력해주고 토큰안에 담겨있는 정보를 확인하기 위함이니

꼭! Bearer {토큰} 이렇게 입력해줘야지

해당 내용을 가져올수있고 성공적으로 가져오면 터미널에

console.log(user)로 찍은 값을 확인할 수 있다.