(준비중) socket.io

 

 

 

'이인용' 프로젝트에서 사용한 socket.io를 정리해봅니다.

 

 

양방향 통신 채널

대부분 소켓은 실시간 채팅 시스템을 구현하는데 사용합니다.

채팅 메시지를 작성할 때마다 서버가 메시지를 받아서 다른 연결된 클라이언트에 메시지를 푸시해줍니다.

 

socket.io는

서버 소켓과 클라이언트 소켓으로 구성됩니다.

 

 

connect

// 서버
const app = require('express') ();
const http = require('http') .createServer(app);
const io = require('socket.io') (http);

io.on('connection', (socket) => { console.log('connected'); });

const PORT = 3000;
http.listen(PORT, () => { console.log(`Server running on port ${PORT}`); });

// 클라이언트
import React from 'react';
import io from 'socket.io-client';
const socket = io.connect('http://localhost:3000');

...

 

 

on / emit

// 서버
io.on('connection', (socket) => {
  // 유저의 방 입장 데이터를 수신
  socket.on('joinRoom', ({user, room}) => {
    // 방 안의 유저에게 메시지 전송 
    socket.broadcast.to(room).emit('systemMessage', {
      username: 'System', 
      text: '입장하셨습니다',
    });
  });

  // 유저의 메시지를 수신
  socket.on('sendMessage', (message, username) => {
    // 유저의 방에 메시지 전송
    socket.broadcast.to(room).emit('receiveMessage', {
      username: username, 
      text: message,
    });
  });
}

// 클라이언트
const socket = io.connect('http://localhost:3000');

socket.emit('joinRoom', {user, room});
socket.on('systemMessage', ({username, text}) => { ... });

socket.emit('sendMessage', message, username);
socket.on('receiveMessage', ({username, text}) => { ... });

 

 

disconnect

// 서버
...
  socket.on('leave', (user, room) => {
    socket.broadcast.to(room).emit('systemMessage', {
      username: 'System',
      text: `${user}님이 나가셨습니다.`,
    });
  });
  
  socket.on('disconnect', () => { ... });
});

// 클라이언트
socket.emit('leave', {user, room});
socket.disconnect();