Web Front-end/node.js

Socket.IO

develop_study 2023. 3. 29. 16:52
반응형

 

Socket.IO란

  • Socket.IO는 Node.js 기반의 실시간 웹 어플리케이션을 구현하기 위한 Framework.
  • 실시간, 양방향, event기반 통신 제공

 

 

how to Start & Use

$npm i socket.io

 

 

Server(node express)

const express = require('express')
const app = express();

const http = require('http')
const SocketIO = require("socket.io");

const httpServer = http.createServer(app);
const io = SocketIO(httpServer)

...

io.on("connection", socket =>{
    socket.on("room", (msg, done)=>{
        console.log(msg)
        setTimeout(()=>{
            done("이게 되네?")
        },2000)
    })
})

 

client(browser)

생략...
<script src="/socket.io/socket.io.js"></script>
<script>
	const socket = io();	

	const form = document.querySelector("form")

	const handleSubmit = (e) =>{
	    e.preventDefault();
	    const input = form.querySelector("input")
			//socket.emit은 (event, data, callback()) 넣어주면 된다. data는 넣고싶은대로 맘껏 넣어 보낼수 있음
			socket.emit("room", {payload:input.value}, (done)=>{
        console.log(`서버에 펑션을 보낼수있다고 ?! ${done}`)    
	    })
	    input.value ="" 
	}

	form.addEventListener("submit", handleRoomSubmit)

</script>
<div id="welcome">
	<form>
		<input type="text">
	</form>
</div>

 

 

결과

서버 콘솔

 

브라우저 콘솔&nbsp; //서버쪽 setTimeout에 의해 2초뒤 실행됨

 

 

Socket.IO의 주요 메서드

  1. socket.emit(event, [data], [callback]): 클라이언트에서 서버로 이벤트를 전송.
    이벤트는 이름과 데이터를 가질 수 있으며, 필요한 경우 콜백 함수를 등록할 수도 있다.
  2. socket.on(event, callback): 서버나 클라이언트에서 이벤트를 수신할 때 사용.
    이벤트 이름과 처리 함수를 등록한다.
  3. socket.join(room, [callback]): 클라이언트가 특정 방(room)에 참가할 수 있도록 함.
    방 이름을 지정하고, 필요한 경우 콜백 함수를 등록할 수 있다.
  4. socket.to(room).emit(event, data): 지정된 방에 연결된 모든 클라이언트에게 이벤트를 전송.
  5. socket.leave(room, [callback]): 클라이언트가 방에서 나가도록 함.
    방 이름을 지정하고, 필요한 경우 콜백 함수를 등록할 수 있음.

 

 

 

비고

 

websocket과의 비교

1.websocket을 쓸 경우엔, 브라우저에서 서버로 데이터를 보낼때, JSON을 String으로, 서버에는 String을 JSON으로 일일히 변환하는 과정이 필요한데, socket.io에선 알아서 전달된다.

 

2.websocket은 프론트쪽의 function을 서버쪽에서 이벤트 실행을 관리하는건 상상도 못할일인데 socket.io로는 그런것이 가능하다.

 

//websocket쓸때의 대략적인 코드

//client
const makeMessage = (type, payload) =>{
    const msg = {type, payload}
    return JSON.stringify(msg)
}

socket.send(makeMessage("new_message", input.value))


//server
wss.on("connection", (socket)=>{
  socket.on("message", (msg)=>{
    const message = JSON.parse(msg)
    switch(message.type){
        case "new_message" :
            sockets.forEach((v)=> v.send(`${socket.nickname} : ${message.payload}`))
            break;
    })
})

 

 

참고

https://nomadcoders.co/noom/lectures/3099

https://socket.io/docs/v4/

반응형