AC 03/27 nodejs

Bae Seong Jun·2024년 3월 27일

Acorn academy

목록 보기
61/70

자바스크립트 보충

생성 및 추가/삭제 사용할 예정

구조

태그와 속성 생성 및 삭제 방식

vue 자식에서 부모로 데이터 전달 복습

$emit() 사용

nodejs를 이용한 채팅기능 만들기

node_chat_stu, node_chat_prof 폴더 생성
각각 npm init

소켓통신

라이브러리 설치

npm install express --save
npm install socket.io --save

기본 서버 세팅

const express = require("express");
const socket = require("socket.io");
const http = require("http"); //node.js 기본 내장 모듈 불러오기

const app = express(); // express 객체 생성
const server = http.createServer(app); //express http 서버생성

const io = socket(server); //생성된 서버를 socker.io로 바인딩

////////////////
app.get("/", function(req, res){
    console.log("유저가 /로 접속함");
    res.send("Hello, Express Server!!");
});
////////////////
// 서버 8081 포트로 listen
server.listen(8081, function(){
    console.log("서버실행중...");
})

nodejs 내장 파일시스템

const fs = require("fs");

정적 파일 생성

css, js 정적파일 사용 경로 설정
주소부여

app.use("/css", express.static("./static/css"));
app.use("/js", express.static("./static/js"));

fs.readFile을 통한 html파일 응답처리

app.get("/", function(req, res){
    console.log("사용자 접근");
    fs.readFile("./static/index_1.html", function(error, data){
        if(error){
            res.send("에러 발생함");
        } else {
            res.writeHead(200, { "Content-Type": "text/html"});
            res.write(data);
            res.end();
        }
    })
});

socket.io 주요 이벤트

connection :Client와 연결되었을 때 발생
disconnection : 해제되었을 때 발생

소켓을 이용한 연결, 이벤트 송수신

  1. 클라이언트 자바스크립트는 io() 함수를 호출하면 현재 페이지를 제공하는 서버와의 실시간 양방향 통신을 위한 Socket 인스턴스가 반환된다.

  2. 해당 자바스크립트가 html에서 로딩될시 서버로 연결이벤트를 송신하는 코드를 작성한다.

  3. 버튼이 클릭되었을 때 send 이벤트를 송신하는 코드를 작성한다.
    이벤트 발생에는 emit("발생이벤트명", 전달데이터) 메서드를 이용한다.

  4. 서버단에서는 이벤트를 on으로 대기하고있으며, 받으면 콜백함수를 통해 이벤트를 처리한다.

  5. connection 이벤트의 콜백함수 내에서 추가적인 이벤트 수신을 대기한다.
    connection 이벤트 콜백함수의 인자로는 socket을 받는다.

socket라이브러리의 io메서드& socket 객체에 관하여

io() 함수는 Socket.IO 라이브러리를 사용할 때 클라이언트 측에서 연결을 시작하기 위해 사용하는 메서드입니다. 이 메서드는 Socket.IO 클라이언트 스크립트가 웹 페이지에 포함되었을 때 사용할 수 있게 됩니다. 클라이언트 스크립트는 보통 HTML 문서의 <head> 태그 안이나 <body> 태그 끝에 <script> 태그를 통해 포함됩니다.

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io(); // 이제 이 메서드를 사용할 수 있습니다.
</script>

여기서 src="/socket.io/socket.io.js"는 Socket.IO 서버에 의해 자동으로 제공되는 클라이언트 사이드 라이브러리를 가리킵니다. io() 함수를 호출하면 현재 페이지를 제공하는 서버에 대한 Socket.IO 연결이 초기화됩니다. 이 메서드는 기본적으로 웹소켓 연결을 시도하고, 그것이 불가능할 경우 롱 폴링 등의 다른 전송 방법으로 대체합니다.

io() 함수를 호출하면 서버와의 실시간 양방향 통신을 위한 Socket 인스턴스가 반환됩니다. 이 인스턴스를 통해 서버로 이벤트를 보내거나 서버로부터 이벤트를 수신할 수 있습니다.

Socket.IO를 사용하기 위해서는 서버 측에서도 Socket.IO 라이브러리를 설치하고 설정해야 합니다. Node.js 기반 서버에서는 socket.io 패키지를 npm을 통해 설치하여 사용할 수 있습니다.

모든 접속 유저에게 이벤트 발신 (방송)

send는 cli-server 1ㄷ1 통신임
서버에서 연결된 소켓들에 한번에 메세지를 보내기 위해서는 broadcasat 를 이용하여 update event를 발생시킨다.

io.emit은 연결된 모든 클라이언트를 대상으로 전달
io.broadcast.emit은 sender인 socket의 클라이언트를 제외하고 전달

데이터 디자인

채팅 구현


기본적인 로직은

  1. 클라이언트에서 이벤트 및 데이터 발신
  2. 서버에서 이벤트 및 데이터 수신
  3. 서버에서 콜백함수를 통해 이벤트에 맞는 처리 진행
    3-1. io.sockets.emit("방송할 이벤트명", 데이터) 형식으로 연결된 모든 클라이언트를 대상으로 전달할 수 있음> (socket.broadast.emit은 sender 제외)

socket 이벤트 송수신 문법 정리

클라이언트 이벤트 발신 / 수신

socket = io();
socket.emit("발신 이벤트명", 전달할 데이터);
socket.on("수신 이벤트명", 처리할 콜백함수);

서버 이벤트 발신

const io = socket(server); //생성된 서버를 socker.io로 바인딩
io.sockets.emit("발신 이벤트명", 전달할 데이터);
io.sockets.on("수신 이벤트명", 처리할 콜백함수);

채팅기능 완성 샘플

index_3.html - 클라이언트 순수 html , socket import, 자바스크립트 import

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    
    <script src="/socket.io/socket.io.js"></script> <!-- 소켓 라이브러리 사용 -->
    <script src="/js/index_3.js"></script> 
</head>
<body>
    <!-- <div id="main">
        반갑습니다!
    </div> -->
    index_3.html
    <div id="main">
        <input type="text" id="test">
        <button onclick="send()">전송</button>
    </div>
</body>
</html>

index_3.js - 클라이언트 자바스크립트, 서버와 통신

var socket = io();

socket.on("connect", function(){
    var name = prompt("반값습니다. 이름을 입력하세요", "");
    if(!name)
        name = "익명";
    // console.log(name);
    socket.emit("newUser", name);
})

socket.on("update", function(data){
    const {type, name, message} = data;
    console.log(`${name}: ${message}`);
})

// socket.on("disconnect", function(data){
//     const {type, name, message} = data;
//     console.log(`${name}: ${message}`);
// })

function send(){
    var message = document.getElementById("test").value;
    document.getElementById("test").value = "";
    socket.emit("message", {type: "message", message: message});
}

app_3.js - 서버, 소켓을 이용한 통신, update이벤트를 통한 응답 정형화함

const express = require("express");
const socket = require("socket.io");
const http = require("http"); //node.js 기본 내장 모듈 불러오기
const fs = require("fs");

const app = express(); // express 객체 생성
const server = http.createServer(app); //express http 서버생성

const io = socket(server); //생성된 서버를 socker.io로 바인딩

//주소부여
app.use("/css", express.static("./static/css"));
app.use("/js", express.static("./static/js"));

////////////////
app.get("/", function(req, res){
    console.log("사용자 접근");
    fs.readFile("./static/index_3.html", function(error, data){
        if(error){
            res.send("에러 발생함");
        } else {
            res.writeHead(200, { "Content-Type": "text/html"});
            res.write(data);
            res.end();
        }
    })
});
////////////////
// connection 이벤트 발생시 
io.sockets.on("connection", function(socket){ //사용자와 통신하는 소켓을 받음
    console.log("유저접속 됨");

    socket.on("newUser", function(name){
        //console.log(name + "님이 접속하였습니다.");
        socket.name = name;
        io.sockets.emit("update", {type: "connect", name: "SERVER", message: name + "님이 접속하였습니다."});
    });

    socket.on("send", function(data){ //메세지 이벤트 발생시
        console.log("전달된 메세지: ", data.msg);
    });

    socket.on("disconnect", function(){
        console.log("접속 종료");
        console.log(socket.name);
        socket.broadcast.emit("update", {type: "disconnect", name: "SERVER", message: socket.name + "님이 나가셨습니다."});
    })

    socket.on("message", function(data){
        data.name = socket.name;
        console.log("message이벤트 : ", data);
        socket.broadcast.emit("update", data);
    })
})
////////////////
// 서버 8081 포트로 listen
server.listen(8081, function(){
    console.log("서버실행중...");
})

추가로 채팅방처럼 구현하기 위해서 appendChild 등을 이용할 것임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload =function(){
            var main =document.createElement("div");
            main.setAttribute("id", "main");
            var label = document.createTextNode("Cut");
            main.appendChild(label);
            document.getElementById("test").appendChild(main);
        }
    
    </script>
</head>
<body>
    <div id="test"></div>

</body>

</html>
profile
Bae Seong Jun
코딩 프로?
이전 포스트

AC 03/25 node js

다음 포스트

AC 03/28 배포 servlet, spring

0개의 댓글