Node.Js/Web socket

[Node.Js] Web socket 사용방법

져니져니95 2021. 5. 31. 17:00

2020.05.31(월)

블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 56번째날

 

 

1. 웹소캣이란?


요청을 보낸 사람 이외의 사람에게도 응답을 보낼 수 있음 -> 요청없이도 응답을 줄 수 있다는 뜻
서버가 요청을 보낼 수도 있게 됨 -> 쌍방향 통신이 가능하게 됨

 

2. 기본셋팅

1) npm install express

2) npm install socket.io

 

3. socket.io명령어 (?)

 

socket.on('이벤트명', 받을정보 변수명 설정 ) -> 정보 받기

socket.emit('이벤트명',내보낼 정보) -> 정보 내보내기

socket.broadcast.emit('이벤트명',내보낼 정보) -> 나 빼고 다른 로컬에만 정보 내보내기

 

connection - connect는 한쌍!!!

최초 통신을 connection connect를 통해서 한 뒤에는

각 socket.on 안의 첫번째 인자값은 임의로 설정 가능!

ex) send로 설정되어있는 인자값을 server.js와 index.html에서 동시에 aaa로 변경해줘도 작동에 문제가 없음!

 

 

 

 

views -> index.html

const express = require('express');
const app = express();
//websocket 사용하기 위한 패키지
//npm install socket.io
const socket = require('socket.io');
//http == express
const http = require('http') //socket과 연결하기 위해서 http 문서를 읽기 위해서
const server = http.createServer(app);
const io = socket(server);
const nunjucks = require('nunjucks');

app.use(express.static('./node_modules/socket.io/client-dist'));
app.set('view engine','html');
nunjucks.configure('views',{
    express:app,
})

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

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

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

server.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>Web Socket</title>
</head>
<body>
    <h1>Hello Socket</h1>
    <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/>`
        })

        socket.on('call',(data)=>{
            const content = document.querySelector('#content');
            content.innerHTML += `남이쓴글 ${data} <br/>`
        })
    </script>
</body>
</html>