socket io사용하기

socket.io사용하기

 

http통신을 할 떄도 socket이 열리기는 하지만 한번 주고 받고 바로 연결이 끊기게 된다. 그래서 자기가 지속적인 통신이 필요하게 된다면 socket.io를 사용하면된다. 

 

이번 네트워크 과제를 하면서 socket io를 사용할 필요가 생겼다. 그래서 예전부터 가끔 사용해왔지만 이번에 완전히 정리하려고 한다. 

설치 
나는 보통 npm보다는 yarn을 사용한다. 왜냐면 속도가 어느 상황이든 더 빨라서 그렇다. 

yarn add socket.io
npm i socket.io

그럼 설치가 완료되었으면 클라이언트와 간단한 노드 서버를 만들어 보겠다.

client

import io from "socket.io-client";

const socketClient = io("http://당신의 IP:연결될 서버의 포트번호");

socketClient.on("connect", () => {
  console.log("connection server");
});

Server

미리 만들어 둔 http서버를 사용할 수 있으며 자기가 다른 포트에서 서버를 열고싶으면 io(port번호)안에 포트번호만 적으면 된다. 

import http from "http";
import express from "express";
import io from "socket.io";

const app = express();

const httpServer = http.createServer(app).listen(3000, () => {
  console.log("포트 3000에 연결되었습니다.");
});

const socketServer = io(httpServer);
socketServer.on("connection", socket => {
  console.log("connect client by Socket.io");
});

 

io를 통해 socket객체를 만들어 준 후 on함수를 통해서 각 이벤트를 매칭할 수 있다. connection은 연결이 되었을 때 발생하는 이벤트로 둘다 실행을 하게 된다면 로그에 아래 사진과 같이 찍히게 된다. 이와 같은 로그가 나오면 socket이 잘연결된 것이다. 

 

client에서 나오는 로그

서버에서 나오는 로그

그럼 이제 핵심인 요청과 응답을 주고 받는 예제를 실행해보겠다.

 

서버에서 응답방법

아래와 같은 세가지 방법이 있다. 

    //현재 연결되어있는 클라이언트 소켓에 전달
    socket.emit("이벤트이름", {data:"현재 연결되어 있는 클라이언트"});

    // 나를 제외한 다른 클라이언트에게 전달
    socket.broadcast.emit("이벤트이름", {data:"나를 제외한 다른 클라이언트"});

    // 특정 소켓 클라이언트에게 전달 
    socketServer.sockets().emit("이벤트 이름", {data:"특정 소켓 클라이언트에게 전달"});

 

클라이언트에서의 요청방법

요청방법

emit을 통해 요청을 보낼 수 있다. 연결되어있는 서버는 한개 뿐이라서 하나의 emit만 있는 것 같다.

import io from "socket.io-client";

const socketClient = io("http://192.168.43.183:3000");

socketClient.on("connect", () => {
  console.log("connection server");
});

socketClient.emit("first Request", { data: "first Reuqest" });

 

요청을 주고받는 예제를 실행해보겠습니다. 

 

클라이언트
아래와 같이 emit을 통해서 요청을 보내고 on을 통해서 event에 맞추어 응답합니다.

import io from "socket.io-client";

const socketClient = io("http://192.168.43.183:3000");

socketClient.on("connect", () => {
  console.log("connection server");
});

socketClient.emit("first Request", { data: "first Reuqest" });

socketClient.on("first Respond", req => {
  console.log(req);
});

result 

 

server
클라이언트로 부터 first Request라는 이벤트로 응답을 받습니다. 그리고 emit의 이벤트는 first Respond를 사용합니다. 그리고 전달 event와 data는 firstRespond입니다. 

import http from "http";
import express from "express";
import io from "socket.io";

const app = express();

const httpServer = http.createServer(app).listen(3000, () => {
  console.log("포트 3000에 연결되었습니다.");
});

const socketServer = io(httpServer);
socketServer.on("connection", socket => {
  console.log("connect client by Socket.io");
  socket.on("first Request", req => {
    console.log(req);
    socket.emit("first Respond", { data: "firstRespond" });
  });
});

result 

 

Summary 

과제를 사용하면서 기본적으로 사용한 기능들을 정리해보았다. socket io에서는 이것 뿐만 아니라 room이나 set, get같은 데이터 바인딩 같은 기능도 있다. 이 것에 대한 것은 다음 기회에 정리해보겠다....... 그래도 socket.io를 알게 된 후로 지속적인 연결의 편의성을 알게 됐고 예전에는 잘모르고 썼던 것을 네트워크 수업에 같이 들으니 훨씬 더 재밌는 것 같다.