21.05.31 WebSocket 사용하기

우선 소켓은 기본적으로 두가지 함수를 가지고 있다. 클라이언트, 서버 둘 다 포함된다.

• socket.on(); : 데이터를 받는 함수
• socket.emit(); : 데이터를 보내는 함수

 

여기서 저 두개의 함수 안에 쓰이는 'send' , 'call' 은 아무 이름으로나 정해주면 된다.

보내는 부분, 받는 부분이 서로 send / call 로 일치하기만 하면 된다.

 

---

 

server.js

기본 설정 부분

part 1

const express = require('express');
const nunjucks = require('nunjucks');
const app = express();

const socket = require('socket.io');
const http = require('http')
const server = http.createServer(app);     
const io = socket(server);

설명

1.

 const socket = require('socket.io'); 

websocket 사용을 위한 library package 설치
npm install socket.io

 

 

2.

const http = require('http');

http 문서를 읽기 위해서 사용
http 와 express 는 기능적인면에서는 같음

기본적으로 node js 가 갖고 있음

 

 

3.

const server = http.createServer(app);
const io = socket(server);

socket과 http를 연결하는 부분
server 측에서 socket 을 사용하기 위한 부분이라고 보면 된다.
http 객체 안에 express 내용이 들어간다. 

 

---

part 2

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')
})

websocket library

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

 

최초의 연결
요청 : client
먼저 서버측에 웹소켓 사용하겠다는 내용을 보내야함
서버는 소켓을 사용할 수 있는 환경을 만들어줘야함

 

 

+ index.html 에도 설정해줘야할 부분이 있다.

 

index.html

client 에서 웹 소캣 요청을 위한 library

index.html

<script type="text/javascript" src="./socket.io.js"></script>

client 에서 웹 소캣 요청을 위한 library

 

---

part 3

io.sockets.on('connection',(socket)=>{
    socket.on('send',(data)=>{
        console.log(`client 에서 받은 msg ${data.msg}`);
        socket.broadcast.emit('call',data.msg)
    })
})

server.listen(3001,()=>{
    console.log('server 3001');
})

1.

io.sockets.on('connection',(socket)=>{
    socket.on('send',()=>{
       	console.log(`client 에서 받은 msg ${data.msg}`);
        socket.broadcast.emit('call',data.msg)
    })
})

연결을 받아주는 부분
on 은 addEventListner 같은거임
socket 이 연결이 되었을때 콜백이 실행되는거임

 

send 라는 event 발생하면 콜백 실행

 

broadcast

보낸사람을 제외한 나머지에게(broadcast) 보내주겠다(emit)

뭐할때?('call' 할 때) 뭐를? (data.msg를)
server -> clients (서버가 클라에게 요청하는것)

 

 

2.

server.listen(3001,()=>{
    console.log('server 3001');
})

socket 과 express는 server를 통해 연결 되어있기 때문에 이렇게 바꿔줘야함

 

---

 

index.html

<h2>hello socket</h2>
    <input type="text" id="msg">
    <input type="button" id="btn" value="버튼">
    <div id="content">

    </div>

    <!--client 에서 websocket 요청을 위한 library-->
    <script type="text/javascript" src="./socket.io.js"></script>
    <script type="text/javascript">
    
        let socket = io('http://localhost:3001');

        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>

1. client 에서 websocket 요청을 위한 library

<script type="text/javascript" src="./socket.io.js"></script>

 

 

2. io 라는 매서드 사용

let socket = io();

or
안되면

let socket = io('http://localhost:3001');

위에서 libarary 가져왔기때문에 io 라는 매서드 사용가능함
맨처음에는 http 통신을 할거임

 

Socket.io는 JavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다.

 

 

 

3. clinet 에서 connect 할때

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

 

 

4. client - (send 요청) -> server

 	const btn = document.querySelector('#btn');
        
        btn.addEventListener('click',()=>{
            const msg = document.querySelector('#msg');
            socket.emit('send',{msg:msg.value})
            // 클라가 서버에게 send라는 메시지로 요청한다

            const content = document.querySelector('#content');
            content.innerHTML += `내가 쓴글 ${msg.value} <br>`
        })

• socket.emit(); : 데이터를 보내는 함수

버튼을 클릭했을때

1) 클라->서버 요청

emit 이라는 매서드를 써서 send일때,

msg라는 변수에 msg.value(input에 있는 value값)를 담아서 보내라

 

2) div에 내용추가

 

 

 

5. call 이라는 걸 받으면 다른 클라에게 이렇게 해줘라

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

• socket.on(); : 데이터를 받는 함수

call 이라는걸 받으면 다른 클라이언트에게 이렇게 작성해줘라.

 

 

---

 

 

결과