그저 내가 되었고

항해99) 5주차:: 주특기 심화; 📚Socket.io 본문

개발/항해99 9기

항해99) 5주차:: 주특기 심화; 📚Socket.io

hyuunii 2022. 10. 15. 13:43

TEST용 코드 전체

app.js

더보기 
const express = require("express");  //express 앱을 생성
const { createServer } = require("http");   //http 모듈로 서버 생성

const app = express();  //express 앱을 생성. app객체는 express로 기존처럼 API를 개발하거나 프엔 파일을 서빙하는 용도로 사용할 수 있음.
const http = createServer(app);  //http 모듈로 서버 생성


const io = require("socket.io")(http, {  //3000자리에 http 서버 객체 삽입해서 express와 socket.io를 동시에 사용할 수 있게 해줌. 그리고 맨 밑에 http.listen(3000~으로 포트 열어줌)
    cors: {
        origin: "*",
        methods: ["GET", "POST"],
    },
});

io.on("connection", (socket) => {  //io객체도 기존처럼 클라와 데이터를 주고 받는 용도로 사용할 수 있음.
    console.log("새로운 소켓이 연결됐어요!");  //특정 사용에게 소켓이 전달되면,  "새로운~"이걸 로그에 하나 찍고!

    socket.on("message", (data) => {  //①의 메세지(fro.client) 받아서
        console.log(data);  //그 ①의 메세지를 출력함
    });

    socket.emit("customEventName", "this is custom event data");  //②서버에서 커스텀 이벤트로 데이터 발행하기(사용자가 서버에 접속했을 때, customEventName에 해당하는 커스텀 이벤트가 전달됨): socket.emit("이벤트 이름", "데이터") 이렇게 함수를 호출. customEventName이라는 이름의 특정 이벤트로, this is custom event data라는 특정 데이터를 브라우저에 보낼 수 있음.
});

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

 

index.html

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
    <title>Hello Socket.io!</title>
</head>
<body>
<script>
    const socket = io("ws://localhost:3000");
    socket.on("connect", () => {
        socket.send("헹헹 혀니 화이똉");  //①이건 서버에서 데이터 보내는 코드. 첫번째로 클라이언트가 브라우저에서 웹 서버에 접속이 성공하면 "~" 이렇게 보내는 것.
    });

    socket.on("customEventName", (data) => {  //②의 데이터 받아서
        console.log(data); //② 출력함
    });

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

</script>
</body>
</html>

 

'개발 > 항해99 9기' 카테고리의 다른 글

항해99) 5주차:: 주특기 심화; 📚객체 지향 & 추상화 & 클래스와 인스턴스  (0) 2022.10.19
항해99) 5주차:: 주특기 심화; 팀과제 전체코드(JS)  (0) 2022.10.17
항해99) 4주차:: 주특기 숙련; 개인과제 전체코드(JS)(ver.Sequelize)  (0) 2022.10.13
항해99) 4주차:: 주특기 숙련; 📚미들웨어  (0) 2022.10.12
항해99) 4주차:: 주특기 숙련; 📚MySQL → Sequelize  (0) 2022.10.12
'개발/항해99 9기' Related Articles more