socket.io 질문있습니다

안녕하세요 제가 만든 카카오톡에다가(수강중) socket를 적용하려고 하는데 서버 연결이 되지 않아 이것저것 찾아보다가 노마드코더에 왔습니다..

클라이언트로 emit 하고 서버 on도하고 코드는 문제 없어보이는데 연결조차 되지 않습니다.. 연결이 되지 않는 이유가 무엇일까요??

아래는 server와 client 코드 입니다.

// server

require('dotenv').config();
​
const { createApp } = require('./app');
const { appDataSource } = require('./models/index');
​
const startServer = async () => {
  const app = createApp();
  const PORT = process.env.PORT;
​
  await appDataSource
    .initialize()
    .then(() => {
      const server = app.listen(PORT, () => {
        console.log(`🟢server is listening on ${PORT}🟢`);
      });
​
      const io = require('socket.io')(server, {
        cors: {
          origin: true,
          credentials: true,
        },
      });
      const { socketMessage } = require('./middlewares/socket.io');
​
      socketMessage(io);
    })
    .catch((err) => {
      console.log(`❌Failed server connect❌`);
      appDataSource.destroy();
    });
};
​
startServer();

const jwt = require('jsonwebtoken');
​
const chatDao = require('../models/chatDao');
const { catchAsync } = require('../utils/error');
​
const socketMessage = (io) => {
  io.use((socket, next) => {
    const token = socket.handshake.headers.authorization;
    if (!token) {
      return next(new Error('Authentication error'));
    }
​
    jwt.verify(token, process.env.SECRET_KEY, async (err, decoded) => {
      if (err) {
        return next(new Error('Authentication error'));
      }
​
      userId = decoded.userId;
      next();
    });
  });
​
  io.on('connection', (socket) => {
    console.log('A User Connected.');
​
    socket.on(
      'create_room',
      catchAsync(async (postId, callback) => {
        const room = await chatDao.createRoom(userId, postId);
        socket.join(room.raw.insertId);
        callback(room.raw.insertId);
      })
    );
​
    socket.on(
      'enter_room',
      catchAsync(async (roomId, callback) => {
        socket.join(roomId);
        callback(roomId);
      })
    );
​
    socket.on('new_text', async (content, roomId, callback) => {
      await chatDao.createChat(userId, content, roomId);
      socket.to(roomId).emit('new_text', content);
      callback(content);
    });
​
    socket.on('disconnect', () => {
      console.log('접속이 해제되었습니다', socket.id);
      clearInterval(socket.interval);
    });
​
    socket.on('error', (error) => {
      console.error(error);
    });
​
    socket.on('send', (data) => {
      console.log(data);
      socket.emit('reply', {
        data,
      });
    });
​
    socket.interval = setInterval(() => {
      socket.emit('news', 'Hello Socket.IO');
    }, process.env.SOCKET_INTERVAL || 1000);
  });
};
​
module.exports = { socketMessage };

// client

import React, { useState, useContext } from 'react';
import io from 'socket.io-client';
import './chat.css';

const Token = localStorage.getItem('accessToken');
const socket = io.connect('http://192.168.0.194:4000', {
  withCredentials: true,
  extraHeaders: {
    Authorization: `Bearer ${Token}`,
  },
});

const Chat = () => {
  const [roomId, setRoomId] = useState([]);
  const [searchData, setSearchData] = useContext(MenuContext);

  const handleCreateRoom = event => {
    event.preventDefault();
    socket.emit('create_room', searchData, ({ searchData, roomId }) => {
      console.log(`Joined room ${roomId}`);
      setRoomId(roomId);
    });
  };
 
  const handleJoinRoom = roomId => {
    socket.emit('enter_room', roomId, roomId => {
      console.log(`Joined room ${roomId}`);
      setRoomId(roomId);
    });
  };

   const handleNewText = content => {
     socket.emit('new_text', content, roomId, content => {
      console.log(`Sent message: ${content}`);
    });
   };

 
  return (
    <div className="h-screen pt-36">
      <button onClick={handleCreateRoom}>테스트</button>
       <button onClick={() => handleJoinRoom(roomId)}>테스트2</button>
      <input id="input-text" type="text" onKeyDown={onCheckEnter}></input> 
       <button onClick={handleCreateRoom}>next</button> 
    </div>
  );
};

export default Chat;
```

부탁드립니다