socket.io 간단한 채팅방 만들기

1. 세팅

서버와 유저가 실시간으로 양뱡향 통신을 해보자!

npm i socket.io 설치!!

const app = express()

// socket.io
const http = require('http').createServer(app);
const { Server } = require("socket.io");
const io = new Server(http);

• const app = express() 밑에다가 3줄 코드 추가

// 1.
app.listen(port, () => {
  console.log(port, '포트로 서버가 열렸어요!')
})

// 2.
http.listen(port, () => {
  console.log(port, '포트로 서버가 열렸어요!')
})

• app.listen -> http.listen으로 변경

클라이언트

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js" integrity="sha512-YeeA/Qxn5hYdkukScTCNNOhTrv1C2RubAGButJ1rmgQwZf/HdRaCGl+JAVkqsqaNRaYNHdheiuKKuPf9mDcqKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

• 구글에 socket.io cdn 검색

• 설치한 socket.io 버전에 맞는 링크 복사 후 html에 적용
  (라이브러리 설치)

2. 웹소켓 연결

서버와 실시간 소통 채널 개설

// html
let socket = io()

// app.js
io.on('connection', () => {
	console.log('연결 됐습니다.')
})

클라이언트

<div>채팅방</div>
<input id="input1">
<div id="content"></div>
<button onclick="send()">서버에 메세지 보내기</button>
<button onclick="room1()">채팅방1 입장</button>
<button onclick="room1Send()">채팅방1에서 메세지 보내기</button>

let socket = io()

function send() {
  let input1 = $('#input1').val()
  socket.emit('user-send', input1)  // (작명, 메세지), 서버한테 메세지 보내기
}

socket.on('broadcast', (data) => {  // 서버에서 온 응답
  $('#content').append(`<div id="content">${data}</div>`)
})

function room1Send() {
  socket.emit('roomSend', '반가워 채팅방1 사람들아')
}
function room1() {
  socket.emit('joinroom', '채팅방 입장시켜줘')
}

서버

io.on('connection', (socket) => {
  console.log('유저 접속 됨')

  socket.on('roomSend', (data) => {
    io.to('room1').emit('broadcast', data)
  })
  socket.on('joinroom', (data) => {
    socket.join('room1')
  })

  socket.on('user-send', (data) => {  // 클라이언트 -> 서버, eventlistener
    io.emit('broadcast', data)  // 서버 -> 클라이언트, 모든 유저에게
  })
})

• 클라이언트 -> 서버,
  서버 -> 클라이언트
  로 서로 데이터 통신을 할 때는 eventListener가 있어야한다.

• 항상 모든 웹소켓 메세지들은 이벤트리스너로 수신할 수 있다.

socket으로 메세지 보낼 땐 id와 header 정보도 전달

io.on('connection', function(socket){
  console.log(socket);
}); 

• 서버에서 socket 파라미터를 출력하면,
  유저의 header 정보, 유니크한 socket용 id 이런 것들이 출력

• socket.id 하면 유저의 유니크한 id를 출력

• socket.id를 활용하여 원하는 특정 유저에게만 데이터를 보낼 수 있다.

io.on('connection', function(socket){
  io.to(socket.id).emit("broadcast", '서버응답임');
}); 

• io.to(소켓아이디).emit()
  원하는 사용자에게만 데이터 송신