포스트

socket.io

소켓io는 웹소켓과는 다르게 많은 기능이 있다. 웹소켓과는 다르게 백엔드에서 자체적으로 다음과 같이 설치해줘야 한다.

npm i socket.io

socket.io의 소스코드를 보고 싶으면 다음을 url을 확인해보면 된다.

src=“/socket.io/socket.io.js” https://cdn.socket.io/4.5.4/socket.io.js

위 소스는 프론트엔드에도 건네주어서 프론트엔드에서 해당 소스를 참조한다. 소켓io에는 기능이 많이 있고, npm 채팅 프로그램의 room을 만들어주는 기능, 그리고 다음 캡쳐와 같이, 백엔드와의 연결이 끊어지면 지속적으로 재연결을 시도하는 기능도 탑재되어 있다.

소켓io는 웹소켓과는 다르게 txt message만 전송할 수 있지 않고 javascript object 그 자체를 전송할 수 있다. 이 전송함수는 emit() 이며, 여기에는 여러 인자를 계속 전달할 수 있다. 그 데이터의 타입은 boolean, txt, int, object, function등 모두 가능하다.

const socket = io();

function myfunction(msg){ console.log(`The backend says: `, msg); } socket.emit(“event”, true, -1, input.value, myfunction);

socket.on(“event”, (isTrue, number, value, myfunc) =>{ setTimeout(()=>{ myfunc(“This is message from backend”); } }

위와 같이 프론트엔드에서 정의하고, 백엔드로 전달한 함수 myfunction을 백엔드에서는 적절한 argument를 넣어서 프론트엔드에게 실행하라고 도로 돌려줄 수 있다. 보안 이슈때문에 백엔드에서 프론트엔드함수에서 정의하는 함수를 실행하는건 위험한데, 여기 socket.io 는 그러러한 보안이슈를 해결한 것이다. 백엔드에서는 실행하지 않고 인자만 줄 뿐이다.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.