나의 개발일지 20221226 TIL(Today I learned) - socket.io

Today I learned

• WebSoket - socket.io
• 객체지향 (추상화, 다형성, 상속)

오늘은 WebSoket과 객체지향의 대해서 학습을 진행했다 웹소켓을 쉽게 사용할 수 있게 도와주는 Socket.io를 사용해보자

웹소켓을 빠른 데이터 통신이 필요할 때 사용한다 채팅에서도 사용하고, 가상화폐 거래소 같은 곳에서도 사용한다

 

웹소켓을 구현해보자

socket.io를 설치하자

npm i socket.io

설치한 socket.io를 공식 문서를 보고 사용을 해보자

const io = require("socket.io")(3000, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  console.log("새로운 소켓이 연결됐어요!");

  socket.on("message", (data) => {
    console.log(data);
  });
});

소켓이 연결되는 걸 확인했다 하지만 나는 그냥 소켓을 연결하는게 문제가 아니라 내가 작업하는 express서버에다가 사용하고 싶다 socket.io를 이용해서 express에서 사용해보자

const express = require("express");
const { Server } = require("http");
const socketIo = require("socket.io");

...

const app = express();
const http = Server(app);
const io = socketIo(http);

io.on("connection", (sock) => {
  console.log("새로운 소켓이 연결됐어요!");

});

...

app.listen(3000, () => {
  console.log("서버가 요청을 받을 준비가 됐어요");
});

express와 socket.io를 같이 사용하려면 express서버를 실행하기 위해서 express를 담은 app을 http서버로 감싼 뒤에

socket.io에게 넘겨주면 사용할 수 있다 실행을 했는데 문제가 발생했다 저 코드로 실행했을 때 express 서버만 실행이 되는 문제였다 이 문제는 app로 서버를 실행해서 그랬다 위에서 socket.io와 같이 사용할려고 http서버에 감싸서 socket.io에 보냈는데 http를 사용해서 서버를 실행해보자

const express = require("express");
const { Server } = require("http");
const socketIo = require("socket.io");

...

const app = express();
const http = Server(app);
const io = socketIo(http);

io.on("connection", (sock) => {
  console.log("새로운 소켓이 연결됐어요!");

});

...

http.listen(3000, () => {
  console.log("서버가 요청을 받을 준비가 됐어요");
});

http로 서버를 실행하니까 정상적으로 express로 서버가 열리고 새로운 소켓이 연결됐다

 

오늘은 객체지향의 다형성 추상화 상속에 대해서 학습을 했다 아직 어떤식으로 사용해야하고 어떤식으로 구성해야할지

떠오르는건 없다 오늘 배운걸 사용하면서 몸으로 학습을 해야겠다 그리고 express에서 socket.io를 사용해서 웹소켓을

사용할 수 있게 되었다