Web Socket 채팅방 만들기_4

Web Socket 채팅방 만들기_4

---

2023.01.09 - [JavaScript] - Web Socket 채팅방 만들기_1

2023.01.10 - [JavaScript] - Web Socket 채팅방 만들기_2

2023.01.10 - [JavaScript] - Web Socket 채팅방 만들기_3

---

📌 package.json

npm i axios

 

📄 views/chat.html

socket.on('chat', function (data) {
  const div = document.createElement('div');
  if (data.user === '{{user}}') {
    div.classList.add('mine');
  } else {
    div.classList.add('other');
  }
  const name = document.createElement('div');
  name.textContent = data.user;
  div.appendChild(name);
  if (data.chat) {
    const chat = document.createElement('div');
    chat.textContent = data.chat;
    div.appendChild(chat);
  } else {
    const gif = document.createElement('img');
    gif.src = '/gif/' + data.gif;
    div.appendChild(gif);
  }
  div.style.color = data.user;
  document.querySelector('#chat-list').appendChild(div);
});

document.querySelector('#gif').addEventListener('change', function (e) {
  console.log(e.target.files);
  const formData = new FormData();
  formData.append('gif', e.target.files[0]);
  axios.post('/room/{{room._id}}/gif', formData)
    .then(() => {
      e.target.file = null;
    })
    .catch((err) => {
      console.error(err);
    });
});

채팅창을 생성하는 구문.

gif 파일을 주고 받을 수 있다.

header에 gif타입으로 저장됨.

 

📄 controllers/index.js

 exports.sendChat = async(req, res, next) => {
    try{
       const chat = await Chat.create({
        room: req.params.id,
        user: req.session.color,
        chat: req.body.chat
       })
       req.app.get('io').of('/chat').to(req.params.id).emit('chat', chat)
       res.send('message')
    } catch(error) {
        console.error(error)
        next(error)
    }
 }

소켓으로 문자열 주고 받을 수 있고 파일도 주고 받을 수 있다.

채팅방 만들었으면, 소켓으로 실시간 전송

 

 

📄 routes/index.js

const Chat = require('../schemas/chat')

const multer = require('multer');
const path = require('path');
const fs = require('fs');

const router = express.Router()

try {
    fs.readdirSync('uploads');
} catch (err) {
    console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.');
    fs.mkdirSync('uploads');
}

const upload = multer({
    storage: multer.diskStorage({
        destination(req, file, done) {
            done(null, 'uploads/');
        },
        filename(req, file, done) {
            const ext = path.extname(file.originalname);
            done(null, path.basename(file.originalname, ext) + Date.now() + ext); // 파일명에 타임스탬프(Date.now())를 붙힘
        },
    }),
    limits: { fileSize: 5 * 1024 * 1024}, // 용량을 5MB로 제한
});

uploads 폴더 없으면 생성해서 만들기!

원래 파일명 + 생성시간 + ext(.git, .png) 으로 저장

 

router.post('/room/:id/gif', upload.single('gif'), async (req, res, next) => {
    try {
        const chat = await Chat.create({
            room: req.params.id,
            user: req.session.color,
            gif: req.file.filename,
        });
        req.app.get('io').of('/chat').to(req.params.id).emit('chat', chat);
        res.send('ok');
    } catch (error) {
        console.error(error);
        next(error);
    }
});

module.exports = router

controller폴더에 있던 내용 자꾸 header에 못가져오고 db에도 저장 안되서 routes로 옮기니 잘 실행됨!

 

client header gif생성

chat, git db 생성

 

 

gif 채팅방

 

 

📌 git repo

 

https://github.com/godee95/gitchat.git

GitHub - godee95/gitchat: ZeroCho gitchat socket prac