728x90

1. node 초기 설정

터미널에서 package.json만들기

npm init -y

 

express, nodemon, socket.io 설치

npm i *

package.json 에서 script부분 빼고 날린다음 스크립트에 "start" : "nodemon 경로"추가

 

package.json에서 start말고 다른걸 실행시킬때에는

npm run dev

 

2. socket.io

웹소켓과 클라이언트가 양방향 통신할수 있게 도와주는 소켓io

 

socket.io란?

실시간 웹을 위한 자바스크립트 라이브러리

웹 클라이언트와 서버간의 실시간 양방향 통신을 가능하게 해주는 node.js 모듈

 

가상화폐 거래소 같은 데이터 전송이 많은 경우 빠르고 비용이 싸게 표준 웹소켓을 사용하는게 좋다.

실제 업비트나 바이낸스 소켓 API를 사용하면 데이터가 정말 많이 들어온다.

 

socket.io는 웹소켓 프로토콜을 지원해주는 네트워킹 라이브러리

비동기 이벤트 방식으로 실시간으로 간단하게 데이터를 요청하고 받을수 있다.

예를 들어 웹에 고객센터 채팅 같은것도 socket.io라이브러리를 사용해 새로고침하지 않아도 실시간으로 응답한다.

 

socket.io 많이 쓰는 메서드

on : 이벤트에 매칭해서 소켓 이벤트 연결

emit : 소켓 이벤트 발생

 

3. 유저 접속, 메시지 보내기 구현

(1) 로컬 서버 만들기

1-1 page.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <div>첫 페이지</div>
    <input type="text" id="text" />
    <input type="text" id="user" />
    <button id="button">버튼</button>
  </body>
  <script>
   
  </script>
</html>

 

1-2 app.js

const express = require("express");
const app = express();
const fs = require("fs");
const socketio = require("socket.io");
const PORT = 3000;

app.get("/", (req, res) => {
  fs.readFile("page.html", (err, data) => {
    res.end(data);
  });
});

const server = app.listen(PORT, () => {
  console.log("server start");
});

fs.readFile로 page.html 의 데이터를 불러왔다.

socketio 를 쓰기 위해 sever에 app.listen~을 담아줌

 

(2)

2-1 app.js

socket.io 사용해서 연결

connection : 클라이언트가 웹소켓 서버에 접속할때 발생

socketio(매개변수) 매개변수에는 express server가 들어가면 된다.

소켓 서버 생성 및 실행

const io = socketio(server);
let userid = [];
//on 함수로 connection 이벤트에 매칭해서 소켓 이벤트 연결
io.sockets.on("connection", (socket) => {
  console.log("유저가 접속함");
  userid.push(socket.id);
  console.log(userid);
  socket.on("hi", (data) => {
    // console.log(data, "에서 보낸 웹소켓 hi 이벤트가 실행");
    // 자기자신에게 다시 보내기
    // socket.emit("hi", "웹소켓에서 클라이언트로 보냄");

    // 모두에게 보내기
    // io.sockets.emit("hi", "모두에게");

    // 자신을 제외한 모든 대상 발생(방송)
    // socket.broadcast.emit("hi", "나 빼고 모두에게");

    // 비밀대화
    io.sockets.to(data.id).emit("hi", data.msg);
  });
});

2-2 page.html

socket.io 모듈은 내부적으로 "루트/socket.io" 경로에 socket.io.js파일을 자동으로 등록해준다

그 파일을 불러오기 위해 html에서 script src/socket.io/socket.io.js를 작성한다.

결과적으로 위에 불러온 스크립트는 http://localhost:3000/socket.io/socket.io.js에 접근해서 js스크립트를 불러오게 된다.

window.onload로 html script에 소켓 객체를 뽑아서 클라이언트에 연결해준다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <div>첫 페이지</div>
    <input type="text" id="text" />
    <input type="text" id="user" />
    <button id="button">버튼</button>
  </body>
  <script>
    //윈도우 html이 로드가 됬을때
    window.onload = () => {
      // 소켓 객체를 뽑아서 클라이언트에 연결
      const socket = io.connect();
      socket.on("hi", (data) => {
        alert(data);
      });
      button.onclick = () => {
        const msg = text.value;
        const id = user.value;

        socket.emit("hi", { msg, id });
      };
    };
  </script>
</html>

4. 메시지 서로 보여주기

(1) page2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <div>버디버디</div>
    <div>모두의 채팅</div>
    <input type="text" id="userName" />
    <input type="text" id="message" />
    <button id="button">메시지 보내기</button>
    <ul id="content"></ul>
  </body>
  <script>
    window.onload = () => {
      const socket = io.connect();
      socket.on("message", (data) => {
        let el = `
        <li>
            <h3>${data.name}</h3>
            <p>${data.message}</p>
            <p>${data.date}</p>
        </li>
        `;
        content.innerHTML += el;
      });
      button.onclick = () => {
        socket.emit("message", {
          name: userName.value,
          message: message.value,
          date: new Date().toString(),
        });
      };
    };
  </script>
</html>

(2) app2.js

io.sockets.on("connection") : 클라이언트가 접속했을때

io.sockets.on("disconnect") : 클라이언트가 종료했을때

클라이언트에서 socket.emit("message", data)

웹소켓에서 연결되어 있는 message 이벤트를 실행시켜준다.

 

const express = require("express");
const app = express();
const fs = require("fs");
const socketio = require("socket.io");

const PORT = 4000;
const server = app.listen(PORT, () => {
  console.log(PORT, "번 서버 시작");
});

const io = socketio(server);

app.get("/", (req, res) => {
  fs.readFile("page2.html", "utf-8", (err, data) => {
    res.end(data);
  });
});

io.sockets.on("connection", (socket) => {
  socket.on("message", (data) => {
    //html 에서 button onclick안에 있는게 되면 여기가 실행됨
    io.sockets.emit("message", data);
  });
});

 

728x90

'개발 > node.js' 카테고리의 다른 글

[Node.js] 채팅, 귓속말 기능 만들기  (0) 2022.07.29
[Node.js, jquery] 비행기 예약 시스템 만들기  (0) 2022.07.29
[Node.js] 삭제, 수정버튼 만들기  (0) 2022.07.26
[node.js] express, MySQL  (0) 2022.07.25
Node.js 핵심개념  (0) 2022.07.20

티스토리툴바