express, socket.io의
첫번째excrise.
socket.io는 realTime, 즉, 실시간 통신이죠
여기서는
client->server,
server->client로 주고 받는 통신을 다룬다.
1. index.js
<!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>Easy Socket.io</title>
</head>
<body>
<h1 id="myTime">Time</h1>
///밑에서 getElementById로 myTime을 받아서
///<h1></h1>사이에 data를 찍어줄 예정임.
<input type="text" id="name" />
///id는 name
<input type="text" id="custom" />
///id는 custom
<button id="'send" onclick="send()">send</button>
///onclick함수는 send()임. html에서는 onclick이 소문자임
<h1 id="mess"></h1>
///밑에서 getElementById로 mess를 받아서
///<h1></h1>사이에 data를 찍어줄 예정임.
<script src="/socket.io/socket.io.js"></script>
///client쪽에서 socket.io를 사용하기 위해서는
///반드시 불러주어야 될 script임.
///client쪽에서 가장먼저 해야 할 일임.
<script>
-->여기서부터는 여러 socket함수가 사용되어 있음..
let socket = io('/sell')
/// let으로 sokcet라는 instance를 만든다.
/// server에서 '/sell'이라는 name으로 만들어준
/// data만 받겠다는 의미
socket.on('MyEve', (data) => {
document.getElementById('mess').innerHTML = data
})
/// '/sell'이라는 name에서 MyEve로 emit한 data만
/// 받겠다는 의미.
/// 위의 html의 id가 mess인 곳에 server에서 받은 data를
/// 찍어주겠다는 뜻, (innerHTML로써)
---------------------------------------------------
let socket = io()
/// let으로 socket instance를 만든다.
socket.on('MyBroadcast', (data) => {
document.getElementById('mess').innerHTML = data
console.log(data)
})
///서버에서 MyBroadcast로 emit한 data만 받겠다는 뜻.
/// 받은 data를 mess라는 id의 html에 찍어주겠다는 뜻.
---------------------------------------------
/// Client에서 Server로 data를 보내는 socket.!!!
/// 매우 중요함.
/// 위의 html에서 send라는 버튼을 click했을때,
/// 작동하는 event.
function send() {
let name = document.getElementById('name').value
let custom = document.getElementById('custom').value
///html의 input에서 id와 value로 입력 값을 받아냄.
socket.send(name)
///socket.send로 name을 보냄, server에서 무조건 받음.
alert(name)
socket.emit('MyEvent', custom)
}
///send는 그냥 보내는 것이고, emit는 'MyEvent'라는
///Key를 포함해서 보낸다고 생각하면 됨.
///맨위에 let socket=io()가 빠져있음.
/// socket을 사용하기 위해서는
/// 무조건 맨 처음에 만들어 주어야 함.
--------------------------------------------------
socket.on('message', (msg) => {
document.write(msg)
})
///client에서 message를 받는 코딩.
/// key없이 오는 data를 'message' 라는 listener로
/// 받음. 여기서 data는 msg로 받음.
socket.on('message', (msg) => {
document.getElementById('myTime').innerHTML = ''
document.getElementById('myTime').innerHTML = msg
})
/// server에서 받은 data(msg)를 myTime이라는
/// html에 넣어줌.
socket.on('MyEvent', (msg) => {
document.write(msg)
})
///server에서 'MyEvent'라는 key로 emit한 data
///를 받는 코딩
</script>
</body>
</html>2. index.js
서버쪽 socket.io구성.
const express = require('express')
const app = express()
const http = require('http')
///http server를 만들어줌.
const expressServer = http.createServer(app)
///http서버와 express를 connection함.
const { Server } = require('socket.io')
///socket.io에서 Server를 불러줌.
const io = new Server(expressServer)
///express와 socket서버를 연결한 io라는 instance를 만들어줌.
let buyNsp = io.of('/buy')
///'/buy'라는 name의 io를 instance로 만듬
/// Client에서 '/buy'로 data를 받음
buyNsp.on('connection', (socket) => {
buyNsp.emit('MyEve', 'Hello Buy')
})
///'MyEve'라는 key로 'Hello Buy'를 emit함(client로 보냄)
let sellNsp = io.of('/sell')
sellNsp.on('connection', (socket) => {
sellNsp.emit('MyEve', 'Hello Sell')
})
///위와 동일
//BroadCastion
io.on('connection', (socket) => {
io.sockets.emit('MyBroadcast', 'Hello Kim')
})
///'MyBroadcast'라는 key로 emit하는데
/// socket.emit가 아니고 io.sockeets.emit인
/// 이유는 전체적으로 다보낸다는 의미라는데??
/// 추후 공부 필요!!
io.on('connection', (socket) => {
console.log('New user Connected')
///io.on에 모든 socket을 다 넣어줌.
socket.on('message', (msg) => {
console.log(msg)
})
///'message'는 client에서 send method로 보낸것을 받음.
socket.on('MyEvent', (msg) => {
console.log('custom', msg)
})
/// on method는 client에서 보낸 data를 받음.
/// 'MyEvent'라는 key로 client에서 emit한 data를 받음.
setInterval(() => {
let date = new Date()
let time = date.getTime()
socket.emit('MyEvent', time)
}, 3000)
///3초 간격으로 'MyEvent'라는 key로 data날림
/// key가 있으면, emit, 없으면, send
/// 받을때, send는 'message'로 받음
setInterval(() => {
let date = new Date()
let time = date.getTime()
socket.send(time)
}, 2000)
///2초 간격으로 time을 날림. Client쪽으로
setTimeout(() => {
socket.send('Hello Easy Learning socket.id')
}, 1000)
///1초후에 message날림, Client에서 'message'로 받음
socket.on('disconnect', () => {
console.log('User disconnected')
})
///socket서버가 끊어지면 console에 찍어주게 설정
})
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
///현재 folder의 index.html 파일을 client로 사용하겠다는 뜻.
/// '/'path로 req가 왔을떄,
expressServer.listen(3000, () => {
console.log('Server is running at Port 3000')
})
///expressServer로 서버 listen함.
코딩하는초딩쌤
Getting a cheap escort in Bhopal was never that easy before Nargis introduced its cheapest line of prostitutes. You will be astonished to know that you can have one time sex with an Indian escort in Bhopal through us at as low as 50$ and with a Russian Escort in Bhopal at 75$. Said that, you will be never be left alone masturbating seeing porn like other Indian lads. Once you are in contact with us you have the power to cum at lowest prices in beautiful Indian and Russian pussies in Bhopal.