티스토리 뷰

카테고리 없음

0531 웹소켓

LHOIKTN 2021. 5. 31. 14:05

app.js

const express = require('express');
const app = express(); 
const nunjuncks = require('nunjucks'); 
//npm install socket.io
const socket = require('socket.io'); 
//npm install http 
const http = require('http');//소켓과 연결하기 위해서. http문서를 읽어오기 위해
const server = http.createServer(app);
const io = socket(server);  

app.use(express.static('./node_modules/socket.io/client-dist'))

app.set('view engine', 'html'); 
nunjuncks.configure('views',{ 
    express:app, 
})



app.get('/',(req,res)=>{
    res.render('index.html'); 
}); 

io.sockets.on('connection',(socket)=>{
    socket.on('send',(data)=>{
        console.log(`클라이언트에서 받은 메세지는 ${data.msg}`)
        socket.broadcast.emit('call',data); 
    })
})

server.listen(3000,()=>{ 
    console.log('hello port 3000')
})

 

views > 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>웹소켓</title>
</head>
<body>
    Hello WebSocket
    <input type="text" id='msg'>
    <input type="button" id ="btn" value="버튼">
    <div id="content"></div>
    
    <!-- 클라이언트에서 웹소켓 요청을 위해 필요한 라이브러리 -->
    <script type="text/javascript" src="./socket.io.js"></script>
    <script type="text/javascript">
       let socket =  io('http://localhost:3000'); 

       socket.on('connect',()=>{
           const msg = document.querySelector('#msg'); 
           msg.value = '접속이 완료되었습니다.'
       })

       const btn  = document.querySelector('#btn'); 
       btn.addEventListener('click',()=>{ 
           const msg = document.querySelector('#msg'); 
           socket.emit('send',{msg:msg.value});
           const content = document.querySelector('#content'); 
            content.innerHTML += `내가 쓴 메시지 ${msg.value}<br> `
       })
       //on은 받을 때, emit은 보낼 때, 
       
       socket.on('call',(data)=>{
            const content = document.querySelector('#content'); 
            content.innerHTML += `다른 사람이 보낸 메시지 ${data.msg}<br> `
       })
    </script>
</body>
</html>
728x90
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함