본문 바로가기
웹 개발자 준비 과정🐳

day09: 학교 홈페이지(전자칠판,채팅) 만들기😄

by @ENFJ 2022. 7. 31.

 

홈

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style>
.footer { 
  background-color: whitesmoke;

}

</style>
    <title> 온라인 학교 </title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">메뉴</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link active" href="ex11home.html">홈 <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="ex10socket.html">학교 칠판</a>
            <a class="nav-link" href="ex08socket.html">학교 채팅</a>
            
          </div>
        </div>
      </nav>


      <div class="jumbotron">
        <h1 class="display-5"> 온라인 학교 수업에 오신걸 환영합니다!</h1>
        <p class="lead">Welcome to online school classes!</p>
        <hr class="my-4">
        <p>Naver Papago is a machine translation service provided by Naver for free. Also, the origin of the name of Naver Papago is taken from the word for parrot in Esperanto. However, Esperanto translation is not supported.</p>
        <img src="school.gif"/><br/><br/>
        <a class="btn btn-primary btn-lg" href="#" role="button"> 참가하기 </a>
      </div>

      <footer class="footer mt-auto py-3">
        <div class="container">
          <span class="text-muted"> 방문해주셔서 감사합니다.</span>
        </div>
      </footer>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    
  </body>
</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">
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <title>Document</title>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> -->
    <style>
        body {
          background-image: url('background.jpg');
        }
        #messageBox {
            border: 1px solid black;
        
            height: 100px;
            margin-left: 100px;
            width: 902px;
            background-color: rgb(229, 229, 229);
        }

        #myCanvas {
            border: 1px solid rgb(0, 0, 0);
            background-color: #3e4156;
            margin-left: 100px;
            margin-top: 50px
            
        }
        #messageInput{
          margin-left: 100px;
          width: 690px;
          height: 36px;
        }
        .titles{
          text-align: center;
          color: rgb(0, 0, 0);
          border: 1px solid white;
          background-color: rgb(200, 200, 200);

        }
    </style>
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">메뉴</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" href="ex11home.html">홈 <span class="sr-only">(current)</span></a>
        <a class="nav-link" href="ex10socket.html">학교 칠판</a>
        <a class="nav-link" href="ex08socket.html">학교 채팅</a>
        
      </div>
    </div>
  </nav>
    
  <h1 class="titles">학교 칠판</h1>
    <canvas id="myCanvas" width="740" height="300">

    </canvas>
    <hr>
    <div id="messageBox" style="width:742px;">-- 메세지를 입력 하세요 --</div>
    <input type="text" value="hello world" id="messageInput">
    <input type="button" value="전송" id="sendBtn">

    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script>
        var messageInput = document.querySelector("#messageInput");
        var sendBtn = document.querySelector("#sendBtn");
        var messageBox = document.querySelector("#messageBox");

        const socket = io.connect('http://localhost:3000');
        socket.on('connect', function(data) {
            console.log("서버 소켓과 연결 됨!");
            messageBox.innerHTML += "<br>서버 소켓과 연결되었습니다.";
            
            sendBtn.onclick = function(e) {
                var message = messageInput.value;
                //console.log(message);
                socket.emit('client-message', {sender:'user01', message:message});
            }

            socket.on('news', function(data) {
                //console.log(data);
                console.log(data);
                messageBox.innerHTML += "<br>"+data['sender'] +" : "+ data['message'];
            });
var isTrue = false;
            socket.on('start', (data)=> {
                
                ctx.moveTo(data.x, data.y);
                isTrue = true;
            });
            socket.on('draw', (data)=> {
                if(isTrue) {
                    console.log(data);
                    ctx.lineTo(data.x, data.y);
                    ctx.stroke();
                }
            });
            socket.on("end", (data)=>{
                isTrue = false;
            });
        });
    </script>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        var drawing = false;

        ctx.strokeStyle = "white";
        ctx.lineWidth = 2;
        ctx.beginPath();        

        canvas.addEventListener('mousedown', (e)=> {
            drawing = true;
            //ctx.moveTo(e.pageX-8, e.pageY-8);
            ctx.moveTo(e.offsetX, e.offsetY);
            socket.emit('message', {status:'start', x:e.offsetX, y:e.offsetY});
        });

        canvas.addEventListener('mousemove', (e)=> {
            if(drawing) {
            //    //ctx.lineTo(e.pageX-8, e.pageY-8);
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
                socket.emit('message', {status:'draw', x:e.offsetX, y:e.offsetY});
            }
        });

        canvas.addEventListener('mouseup', (e)=> {
            drawing = false;
            socket.emit('message', {status:'end', x:e.offsetX, y:e.offsetY});
        });
    </script>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

</body>
</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>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> -->
    <style>
        *{
            background-color: whitesmoke;
        }
        #messageBox {
            border: 1px solid black;
            width: 400px;
            height: 400px;
            background-color: whitesmoke;
        }
    </style>
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">메뉴</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link active" href="ex11home.html">홈 <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="ex10socket.html">학교 칠판</a>
            <a class="nav-link" href="ex08socket.html">학교 채팅</a>
            
          </div>
        </div>
      </nav>

    <div id="messageBox">-- 메세지를 입력 하세요 --</div>
    <input type="text" value="hello world" id="messageInput" style="
    width: 348px;">
    <input type="button" value="전송" id="sendBtn">

    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script>
        var messageInput = document.querySelector("#messageInput");
        var sendBtn = document.querySelector("#sendBtn");
        var messageBox = document.querySelector("#messageBox");

        const socket = io.connect('http://localhost:3000');
        socket.on('connect', function(data) {
            console.log("서버 소켓과 연결 됨!");
            messageBox.innerHTML += "<br>서버 소켓과 연결되었습니다.";
            
            sendBtn.onclick = function(e) {
                var message = messageInput.value;
                //console.log(message);
                socket.emit('client-message', {sender:'user01', message:message});
            }

            socket.on('news', function(data) {
                //console.log(data);
                console.log(data);
                messageBox.innerHTML += "<br>"+data['sender'] +" : "+ data['message'];
            });
        });
    </script>



 <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

 

서버.js

const http = require('http');
const express = require('express');
const app = express();
const cors = require('cors');
const socketio = require('socket.io');

// public 폴더 ststic 설정.
app.use(express.static(__dirname + '/public'));

app.get("/", (req, res)=> {
    res.end("<h1>Hello Nodejs world1</h1>");
});

const server = http.createServer(app);
server.listen(3000, ()=>{
    console.log("run on Server : http://localhost:3000");
});

console.log(socketio);
var io = socketio.listen(server);

// 클라이언트 접속이 되면 실행.
io.sockets.on('connection', function(socket) {
    // socket 매개 변수 - 클라이언트 소켓.
    console.log(">>>>> 클라인트 소켓 접속!!!");

    //socket.emit('news', 'hello');
    socket.on('client-message', function(data) {
        console.log("client message : ", data);
        io.sockets.emit('news', data);
    });

    socket.on('message', function(data) {
        console.log("client message : ", data);
        switch(data['status']){
        case 'start': 
            io.sockets.emit('start',data); break; 
        case 'draw': 
            io.sockets.emit('draw',data); break; 
        case 'end': io.sockets.emit('end',data); break; 
        }
    });
});

 

'웹 개발자 준비 과정🐳' 카테고리의 다른 글

day11 : Firebase 활용한 SPA CRUD 구현🤔  (1) 2022.08.02
day10 : jquery 를 이용하여 장바구니 기능 구현하기  (2) 2022.08.01
day08: 자바스크립트를 이용하여 snakegame 만들기😬  (1) 2022.07.31
day07: 자바스크립트를 이용하여 퍼즐,햄버거 하우스 게임만들기😬  (1) 2022.07.27
day06: 드래그 앤 드롭(drag and drop)😮‍💨  (0) 2022.07.26

관련글

티스토리툴바