socket io Client API

https://www.youtube.com/watch?v=djMy4QsPWiI

기본 사용 methods

io

url, options를 입력받아, Socket class를 반환.

import io from 'socket.id-client'
const socket = io.connect('http://localhost:3001)

 

emit()

메시지를 내보냄(서버로 전달) → 특정 이벤트를 실행시킴.

// client
const sendMessage = () => {
	socket.emit('send_message', () => {message:'hello'})
}

// server
io.on('connection', (socket) => {
	socket.on('send_message', (data) => {
    	console.log(data)
    })
})

 

on()

지정된 이벤트 발생시, 해당 이벤트를 수신.

import {useEffect} from 'react'

const socket = io.connect('http://localhost:3001')

useEffect(() => {
	socket.on('receive_message', (data)=>{
    	console.log(data)
    })
}, [socket])

위 예제에서는 Client측에서 useEffect를 통해 socket의 변화를 감지하는 식으로 수신하는데...

이게 최선의 방법은 아닐 것 같다...

 

broadcast.emit()

연결된 모든 수신자에게 발송.

// server
io.on('connection', (socket) => {
	socket.on('send_message', (data) => {
    		socket.broadcast.emit('receive_message', data)
    	})
})

 

join()

특정 채팅방에 참여

// server
io.on('connection', (socket) => {
	socket.on('join_room', (data) => {
    		socket.join(data)
    	})
})

 

to()

특정 채팅방에 해당되는 수신자에게만 발송.

// client
const sendMessage = () => {
	socket.emit('send_message', () => {message:'hello', room})	// 해당 room을 매번 명시
}

// server
io.on('connection', (socket) => {
	socket.on('send_message', (data) => {
    		socket.to(data.room).emit('receive_message, data')
    	})
})