채팅기능 구현 (socket io) -1

채팅기능 구현 (socket io)

실전프로젝트에 구현할 마지막 기능이다. socket io를 사용해 채팅기능을 구현 하였다. 채팅 기능은 실시간 채팅 기능, 녹음파일 업로드 기능, 녹음 기능, 이미지 업로드 기능이 있고, 그외에 채팅 리스트 불러오기와 나에게 채팅이 오게되면 알림을 주는 기능을 추가했다.

socket io 설치

npm install --save socket.io

app.js에서 적용

/* socket\app.js */
const app = require(‘express’)();
const http = require(‘http’).createServer(app);
const io = require(‘socket.io’)(http);

app.get(‘/’, (req, res) => {
  res.sendFile(__dirname + ‘/index.html’);
});

// io.on으로 socket.io 연결
io.on(‘connection’, (socket) => {
  console.log(‘a user connected’);
  socket.on(‘chat message’, (msg) => {
    io.emit(‘chat message’, msg);
  });
  
  socket.on(‘disconnect’, () => {
  console.log(‘user disconnected’);
  });
});

http.listen(3000, () => {
  console.log(‘Connected at 3000’);
});

클라이언트 적용 (예시)

const socket = io.connect("http://localhost:3000", {
        path: "/socket.io",
      });

document.getElementById("login").addEventListener("click", function () {
        socket.emit("login", { Id });
      });
socket.on("chat", (data) => {console.log(data)}

간단한 사용법

먼저 클라이언트에서 서버로 소켓 이벤트를 만들 때 socket.emit으로 이벤트 발생

socket.emit("leaveRoom", { userId });

그리고 서버에서 "leaveRoom"라는 이벤트로 받음. 그리고 socket.leave()매서드를 통해 방에서 나옴

socket.on("leaveRoom", ({ userId }) => {
    socket.leave(userId);
  });

채팅방 입장, 퇴장 socket 메서드 정리

socket.leave() // 채팅방 나가기
socket.join() // 채팅방 입장

서버에서 클라이언트로 데이터 보낼 때는 소켓 연결된 사람 모두에게 전달하거나 특정 룸에 조인한 사람들에게만 전달할 수 있음

io.to(Num).emit("room", "hi"); // Num에 join 한 사람에게만 전달
io.emit("all", "hi"); // 소켓 연결된 모두에게 전달