[ TIL ] 01.13(금) 45일차

https://socket.io/

 

Socket.io 이벤트 통신

특징은 클라이언트에서 발생하는 이벤트는 개발자가 임의로 설정할 수 있다는 점이다.

이벤트는 문자열로 지정하며 직접 이벤트를 발생시킬 수 있다. 전반적으로 노드 이벤트 핸들러 방식 따르고 있다고 보면 된다.

// 해당 이벤트를 받고 콜백함수를 실행
socket.on('받을 이벤트 명', (msg) => {
})
 
// 이벤트 명을 지정하고 메세지를 보낸다.
socket.emit('전송할 이벤트 명', msg)

이런식으로 메세지 마다 고유한 이벤트를 등록해 구별해서 송수신하면, 채팅방에서 '귓속말' 기능처럼 특정 어느 사람한테만 메세지를 송신한다던지 ..등 다양한 통신 기능을 구현할 수 있다.

Socket IO 송수신 메소드

송수신 메소드는 다음과 같다

// 접속된 모든 클라이언트에게 메시지를 전송한다
io.emit('event_name', msg);
 
// 메시지를 전송한 클라이언트에게만 메시지를 전송한다
socket.emit('event_name', msg);
 
// 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송한다
socket.broadcast.emit('event_name', msg);
 
// 특정 클라이언트에게만 메시지를 전송한다
io.to(id).emit('event_name', data);

 

npm i express socket.io ejs

 

 

간단한 메세지 전달 소스

 

 

 

서버 코드

 

app.js

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

app.set('view engine', 'ejs'); // 렌더링 엔진 모드를 ejs로 설정
app.set('views',  __dirname + '/views');    // ejs이 있는 폴더를 지정

app.get('/', (req, res) => {
    res.render('index');    // index.ejs을 사용자에게 전달
})

io.on('connection', (socket) => {   //연결이 들어오면 실행되는 이벤트
    // socket 변수에는 실행 시점에 연결한 상대와 연결된 소켓의 객체가 들어있다.

    //socket.emit으로 현재 연결한 상대에게 신호를 보낼 수 있다.
    socket.emit('usercount', io.engine.clientsCount);

    // on 함수로 이벤트를 정의해 신호를 수신할 수 있다.
    socket.on('message', (msg) => {
        //msg에는 클라이언트에서 전송한 매개변수가 들어온다. 이러한 매개변수의 수에는 제한이 없다.
        console.log('Message received: ' + msg);

        // io.emit으로 연결된 모든 소켓들에 신호를 보낼 수 있다.
        io.emit('message', msg);
    });
});

server.listen(3000, function() {
  console.log('Listening on <http://localhost:3000/>');
});

 

 

 

클라이언트

 

index.ejs

<!-- 메시지 폼 -->
<form name="publish">
    <input type="text" name="message">
    <input type="submit" value="send">
  </form>
  
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();

     // socket.on 함수로 서버에서 전달하는 신호를 수신
    socket.on('usercount', (count) => {
        console.log("현재 " + count + "명이 서버에 접속해있습니다.");
    });

    // 폼에 있는 메세지 보내기
    document.forms.publish.onsubmit = function() {

        let outgoingMessage = this.message.value;      
        const obj = { "type": "message" , "params": { "value": outgoingMessage }} 
        socket.emit('message' ,JSON.stringify(obj));
        return false;
    };

    // 들어오는 메세지 핸들링
    socket.on('message', (msg) => {

        let incomingMessage = msg;
        showMessage(incomingMessage);
    });

    socket.on('close', (event) => {console.log(`Closed ${event.code}`)});

    // dev에 메세지 더하기
    function showMessage(message) {
        let messageElem = document.createElement('div');
        const obj = JSON.parse(message);
        messageElem.textContent = obj.params.value;
        document.getElementById('messages').prepend(messageElem);
    }
  </script>
  
  <!-- 수신받을 메시지가 노출될 div -->
  <div id="messages"></div>