sever.js
const http = require('http');
const express = require('express');
const app = express();
const cors = require('cors');
const socketio = require('socket.io');
// public 폴더 static 설정
app.use(express.static(__dirname + '/public'));
app.get("/", (req, res)=> {
res.end("<h1>Hello Nodejs World</h1>")
});
const server = http.createServer(app);
server.listen(3000, ()=>{
console.log("run on Server : http://localhost:3000")
});
const 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;
}
});
});
ex09 socket.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>
<style>
#messageBox{
border: 1px solid black;
width: 540px;
height: 100px;
background-color: beige;
}
canvas#myCanvas{
border: 1px solid blue;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="540" height="300"></canvas>
<hr/>
<div id="messageBox">-- 메세지를 입력하세요 --</div>
<input type="text" value="hello world" id="messageInput">
<input type="button" value="전송" id="sendBtn">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.5.0/socket.io.js"></script> -->
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
// 선 그리기
var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");
var drawing = false;
ctx.lineStyle = "black";
ctx.lineWidth = 2;
ctx.beginPath();
canvas.addEventListener('mousedown', (e) => {
//drawing = true;
//ctx.moveTo(e.pageX, e.pageY);
socket.emit('message', {status:'start', x: e.pageX, y: e.pageY});
})
canvas.addEventListener('mouseup', (e) => {
//drawing = false;
socket.emit('message', {status:'end', x: e.offsetX, y: e.offsetY});
})
canvas.addEventListener('mousemove', (e) => {
//if(drawing){
// ctx.lineTo(e.offsetX, e.offsetY);
// ctx.stroke();
//};
drawing = false;
socket.emit('message', {status:'draw', x: e.offsetX, y: e.offsetY});
})
// 소켓
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 = (e) =>{
var message = messageInput.value;
socket.emit('client-message', {sender: 'user01', message: message});
}
socket.on('news', function(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){
ctx.lineTo(data.X, data.Y);
ctx.stroke();
};
});
socket.on('end', (data)=>{
drawing = false;
});
});
</script>
</body>
</html>
'소프트웨어 이론교육 > 웹 프로그래밍 기본' 카테고리의 다른 글
| jQuery (2) - callback (0) | 2022.08.01 |
|---|---|
| jQuery (1) - 기초 (0) | 2022.08.01 |
| socket.io를 이용한 데이터 전송 (0) | 2022.07.29 |
| canvas (2) - 선 그리기 (0) | 2022.07.29 |
| canvas (1) - 기초 (0) | 2022.07.29 |