들어가기
socket.io의 두번째 파트로
client->server->client로
data가 전송되는 과정을 잘 확인한다.
1. index.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>Simple Live Chat App</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
///chat Layout을 간단히 하기 위해서 bootstrap를 import 함.
</head>
<body>
<h1>Hello Love Chat</h1>
<h2 id="msg"></h2>
///document.getElementById로 받은 message를 뿌려줄 예정.
<br />
<br />
<div class="container">
<div class="row d-flex justify-content-center">
<div class="'col-md-6 col-12 col-lg-6">
<div class="input-group">
<ul id="msgHis"></ul>
///채팅 메세지를 뿌려줄 html부분.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row d-flex justify-content-center">
<div class="'col-md-6 col-12 col-lg-6">
<div class="input-group">
<input id="msg" class="form-control" type="text" />
///채팅 메세지 입력칸
<button onclick="sendMsg()" class="btn btn-info">Send Data</button>
///메세지 보내는 버튼. sendMsg()함수는 아래에
///script로 만들어 줄 예정.
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
///socket을 client에서 사용하기 위해 가장 먼저 import
///해야 할 부분.
<script>
let socket = io()
///sokcet instance를 맨 먼저 만들어줌.
//Make Room
socket.on('cooking', (data) => {
document.getElementById('msg').innerHTML = data
})
///cooking으로 emit되는 data를 html의 msg칸에
///뿌려줌.
//Chat
function sendMsg() {
let msg = document.getElementById('msg').value
socket.emit('chat', msg)
// alert(msg)
}
///client에서 chat이라는 key로 html의 input창에서
///입력한 값을 msg로 받아서
///server쪽으로 날려줌.(emit)
socket.on('chat_send', (msg) => {
let listItem = document.createElement('li')
///li 태그를 listItem으로 만듬
listItem.textContent = msg
///listItem에 server에서 받은 메세지를 넣어줌.
let msgHis = document.getElementById('msgHis')
///위의 ul태그의 id인 msgHis를 get함.
msgHis.appendChild(listItem)
///msgHis(ul태그)에 server에서 받은 메세지를 뿌려줌
})
///sendMsg() 함수로 server쪽으로 날린 메세지를
/// server쪽에서 다시 client에게로 다시 날린
/// 메세지를 client에서 받아서 화면에 뿌려줌
</script>
</body>
</html>index.js
const express = require('express')
const app = express()
const http = require('http')
const expressServer = http.createServer(app)
const { Server } = require('socket.io')
const io = new Server(expressServer)
///중복부분은 설명 생략함.
//Make Room
io.on('connection', (socket) => {
socket.join('kitchen-room')
///'kitchem-room'이라는 room을 만들어 이 방
///접속자에게만 msg를 날린다는 뜻
let sizeOfKitchen = io.sockets.adapter.rooms.get('kitchen-room').size
///'kitchen-room'접속자 수를 conunt함.
io.sockets.in('kitchen-room').emit('cooking', 'fried Cooking' + sizeOfKitchen)
///kitchen-room에 접속한 사람들 중에
///'cooking'이라는 key로 메세지 및 방 접속자 수를 날려줌.
io.sockets.in('kitchen-room').emit('boiling', 'bliling water')
///kitchen-room에 접속한 사람들에게 'boiling'이라는 key로
///메세지를 날려줌.
socket.join('bed-room')
io.sockets.in('bed-room').emit('sleep', 'I am sleeping')
io.sockets.in('bed-room').emit('rest', 'I am resting')
///'bed-room'을 만듬
///'bed-room'에 들어온 사람들 중에
/// 'sleep' , 'rest'등의 key로 msg를 날려줌.
})
//Chat
io.on('connection', (socket) => {
console.log('New User Connected')
socket.on('chat', (msg) => {
console.log(msg)
io.emit('chat_send', msg)
})
///socket.on으로 client에서 보낸 메세지를 받아서
///io.emit로 다시 client에 메세지를 보내줌.
///받을때 key는 chat, 보낼떄 key는 chat_send
})
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
///'/'path로 req가 오면, index.html을 뿌려주겠다는 뜻.
expressServer.listen(3000, () => {
console.log('Server is running at Port 3000')
})
코딩하는초딩쌤