front
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 6rem; box-sizing: border-box; backdrop-filter: blur(10px); align-items: center;}
#input { border: none; padding: .5rem 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; resize: none; height: 74%;}
#nick {height: 30px;}
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; height: 88%; width: 10%;}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > pre { padding: 0.5rem 1rem; }
#messages > pre:nth-child(odd) { background: #efefef; }
#messages > li{padding: 0.5rem 1rem; background-color: #ccc;}
#usersCount{font-weight: bold; color: red; font-size: 2rem;}
p{margin: 0;}
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<div class="">
<p>현재 접속자 수 : <span id="usersCount">0</span></p>
</div>
<textarea id="input"/></textarea><button type="submit" id='submitBtn'>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
var userCnt = document.getElementById('userCnt');
var userCount = 0;
var name = '';
/* 접속 되었을 때 실행 */
socket.on('connect', function() {
/* 이름을 입력받고 */
name = prompt('닉네임을 입력해주세요 !', '')
/* 이름이 빈칸인 경우 */
if(!name) {
name = '익명'
}
/* 서버에 새로운 유저가 왔다고 알림 */
socket.emit('newUser', name)
socket.emit('chat message', name+'님이 접속을 하였습니다.');
})
socket.on('users.count', function(number) {
document.getElementById('usersCount').innerHTML=number;
});
socket.on('disconnectUser', function(data){
socket.emit('chat message', data);
})
input.addEventListener('keydown', function(e){
if(e.keyCode == 13){
if(!e.shiftKey){
e.preventDefault();
var submitBtn = document.getElementById('submitBtn');
submitBtn.click();
}
}
})
form.addEventListener('submit', function(e) {
e.preventDefault(); // submit 방지
if (input.value) { // 인풋에 값이 있다면
socket.emit('chat message', name+': '+input.value); // 소켓.emit
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('pre');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>bak
// require() = 외부 모듈.exports를 리턴하는 함수
var fs = require('fs'); // 파일 처리와 관련된 전반적인 작업을 하는 모듈
//익스프레스,바디파스,포스트 받기,JSON 까찌 다 되는 형태
// express = 노드로 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체
// 미들웨어 = 서로 다른 애플리케이션이 서로 통신하는 데 사용되는 소프트웨어
var express=require('express');
var socketio=require('socket.io'); // websocket = 서버와 클라이언트간의 양방향 통신을 가능하게함
var request=require('request');
var app=express();
var server=require('http').createServer(app); // h
var io=require('socket.io')(server);
var port=process.env.PORT || 50000; // 50000번 포트로 접속하면
// 미들웨어없이 req.body 에 접근하는 경우 기본으로 undefined가 설정, body값을 파싱하는게 body-parser
// body-parser는 raw, text 형식의 본문을 추가로 해석할수있게 해준다.
// var bodyParser=require('body-parser')
// app.use(bodyParser.json());
app.use(express.json()); //익스프레스 4.16.0 버전부터 바디파서의 일부기능을 사용가능함.
server.listen(port, function () { // 서버가 정상적으로 열리면
console.log('jesang0_node_server'); // 콘솔 로그 출력
});
app.get('/chat', (req, res) => {
//res.send('<h1>Hello world</h1>'); // 루트로 요청을 받으면 h1태그 출력
res.sendFile(__dirname + '/chat.html'); // 루트로 요청을 받으면 test로 보냄 // __dirname 현재 실행중인 폴더경로
});
var userCount = 0;
io.on('connect', function (socket) { // 클라이언트 연결 이벤트
userCount++;
io.emit('users.count',userCount);
/* 새로운 유저가 접속했을 경우 다른 소켓에게도 알려줌 */
socket.on('newUser', function(name) {
console.log(name + ' 님이 접속하였습니다.')
/* 소켓에 이름 저장해두기 */
socket.name = name
})
//socket.on('p_con', socket.join); //접속한 사람 있으면 유지시키기
//socket.on('p_discon', socket.leave); //접속한 사람 없으면 소켓에서 튕기기
socket.on('disconnect', () => {
userCount--; console.log('유저 연결해제',userCount);
io.emit('users.count',userCount);
io.sockets.emit('disconnectUser', ' 유저가 접속을 해제하였습니다.');
}); // 접속 나가면 콘솔
socket.on('chat message', msg => {
console.log('유저: ' + msg); // 유저들의 채팅 콘콜찍기
io.emit('chat message', msg); // 유저 채팅 뿌리기
});
});
intp