socket.io) jwt verify를 통한 소켓 연결 인증

frontend - socket을 query로 넣어준다

import io, { Socket } from 'socket.io-client'

let socket:Socket | null = null;

const connectWithSocketServer = () => {
  // localstorage에 있는 token을 꺼내온다.
  const userData = JSON.parse(localStorage.getItem('user') || '');
  const {userData:{token}} = userData;
  
  // socket을 실행하며, 토큰을 객체에 담아 query로 전송
  socket = io('http://localhost:5002',{
    query: {token}
  });
  socket.on('connect', () => {
    console.log('성공적으로 소켓서버와 연결되었습니다.')
    console.log(socket?.id);
   
  })
}

export default connectWithSocketServer

backend : jwt verify를 통해 현재 유저 validation 진행

const jwt = require('jsonwebtoken');
const io = require('socket.io');
const config = process.env;

const authSocket = (socket,next) => {
  // front에서 query에 토큰을 객체에 담아 보내준다.
  const token = socket.handshake.query.token;
  
  // query가 존재하고, query.token이 존재한다면 verify 실행
  if(socket.handshake.query && socket.handshake.query.token){
    // 앞단에서 query를 통해 가져온 token과 env 파일의 token에 verify 진행
    const decoded = jwt.verify(token, config.TOKEN_KEY);
    
    socket.decoded = decoded;
  }else {
    const socketError = new Error('증명되지 않은 소켓')
    return next(socketError)
  }
  next()
}

module.exports = authSocket;

Decoded

{
  userId: '630c9a1ceafadad46303baf2',
  email: 'test@gmail.com',
  iat: 1661772751,
  exp: 1661859151
}

backend - socket 서버

const authSocket = require('./middleware/authSocket');
const newConnectionHandler = require('./sockethandlers/newConnectionHandler')

const registerSocketServer = (server) => {
  const io = require('socket.io')(server, {
    cors: {
      origin: '*',
      methods: ['GET','POST']
    },
  });
  
  io.use((socket,next) => {    
    authSocket(socket,next);
  })

  io.on('connection', (socket) => {

    // 유저 정보를 Map 자료구조로 저장하는 함수
      newConnectionHandler(socket,io)
  })
}

module.exports = {
  registerSocketServer,
};

backend - newConnectionHandler.js

const serverStore = require('../serverStore');


const newConnectionHandler = async (socket, io) => {
  const userData = socket.decoded;
  // decoded에서 userId extract 후 addNewConnectedUser를 통해 맵 형태로 저장한다.
  serverStore.addNewConnectedUser({
    socketId: socket.id,
    userId: userData.userId
  })
}


module.exports = newConnectionHandler

backend - socketStore.js

const connectedUser = new Map();

const addNewConnectedUser = ({socketId,userId}) => {
  connectedUser.set(socketId, {userId});
}

module.exports = {
  addNewConnectedUser
}