들어가기
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')
})
코딩하는초딩쌤
It is very easy to schedule your meeting with Horny Vishnu Garden Esscort you just need to call on the number that we mentioned on our page. Also, if you want a complete Escort in Vishnu Garden then you can take reference from our Vishnu Garden sex guide that will help you to know more deeply about it.