socket.io 기본 채팅 서비스 만들기 (2)

이벤트 발생

Socket.IO의 기본 아이디어는 원하는 데이터와 함께 원하는 이벤트를 보내고 받을 수 있다는 것이다. JSON으로 인코딩할 수 있는 모든 개체가 수행되며 이진 데이터도 지원된다.

 

index.html - script섹션

<script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();

        var form = document.getElementById('form');
        var input = document.getElementById('input');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });
    </script>

index.js - chat message 출력

io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
        console.log('message: ' + msg);
    });
    // console.log('a user connected');
});

 

Broadcasting

서버에서 나머지 사용자에게 이벤트를 내보내는 것이다.

모든 사람에게 이벤트를 내보내기 위해 Socket.IO는 io.emit() 메서드를 제공한다.

 

index.js 

...

io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });
    // console.log('a user connected');
});

...

 

 

index.html - script

<script>
        var socket = io();

        var messages = document.getElementById('messages');
        var form = document.getElementById('form');
        var input = document.getElementById('input');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });

        socket.on('chat message', function(msg) {
            var item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });
    </script>