인프런 커뮤니티 질문&답변

안녕하세요

채팅을 구현하기위해 socket.io를 썼는데 통신이 안되는 것같습니다 io에 주소를 제대로 넣었고 서버 on 마다 클라이언트에서 emit으로 작성했는데 작동하지 않습니다 이유가 무엇일까요?

// 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();

// server의 socket 파일의 코드입니다

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'; import { MenuContext } from '../../components/Nav/MenuProvider'; 

const Token = localStorage.getItem('accessToken');

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

socket.on('connection', () => { console.log('Connected to server'); 
});

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}`);

});

};

const handleNewText = content => {

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

});

};

const onCheckEnter = e => {if (e.key === 'Enter') {

handleNewText();

}

};

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} />

<button onClick={handleCreateRoom}>제출</button>

</div>

);

};

export default Chat;