한길(One Way)

■ Front-End ■/Node.js

[Node.js] socket.io 모듈을 사용하여 소켓통신을 구현해 보자.

한길(One Way) 2023. 2. 26.
Node.js는 빠르고 쉬우며 확장 가능한 JavaScript 런타임이다.

 

1. 개요

Node.js에서 socket.io 모듈을 사용하여 2개 이상의 브라우저가 서로 소켓통신하는 예제이다.

 

 

2. 서버 코드

socket.io 모듈을 선언하고 listen() 함수로 80 포트로 io 객체를 생성한다.

80포트는 http 기본포트이여서 url에 포트번호를 생략할 수 있다.

var io = require('socket.io').listen(80);

io.sockets.on('connection', function(socket) {

 

​

그리고 server 객체에 두 개의 이벤트를 생성한다. 이벤트 이름은 구분하기 쉽게 msg_from_server1과 msg_from_server2로 정의했다. msg_from_server1 은 카운터를 1증가시키고 메시지를 전송하고 msg_from_server2 은 카운터를 2증가시키고 메시지를 전송한다.

 
socket.on('msg_from_client1', function(data) {
    count++;
    ... (생략) ...   
}

socket.on('msg_from_client2', function(data) {
    count++;
    count++;
    ... (생략) ...   
}

서버 전체 코드이다.

var count = 0;
 
var io = require('socket.io').listen(80);
io.sockets.on('connection', function(socket) {
 
    socket.on('msg_from_client1', function(data) {
         count++;
         console.log(data);
         setTimeout(function() {
             io.sockets.emit('msg_from_server1', '[from Server] Message [' + count + '] : ' + data);
         }, 1500);
    });
 
    socket.on('msg_from_client2', function(data) {
         count++;
         count++;
         console.log(data);
         setTimeout(function() {
             io.sockets.emit('msg_from_server2', '[from Server] Message [' + count + '] : ' + data);
         }, 1500);
    });
});

실행 결과

클라이언트에서 접속이 생성될 때마다 handshake 인증과 클라이언트의 구분 값이 로그로 출력된다.

info: socket.io started
debug: served static content /socket.io.js
debug: served static content /socket.io.js
debug: client authorized
info: handshake authorized QJ6epwocKAsUFB-JMaMU
debug: setting request GET /socket.io/1/websocket/QJ6epwocKAsUFB-JMaMU
debug: set heartbeat interval for client QJ6epwocKAsUFB-JMaMU
debug: client authorized for 
debug: websocket writing 1:: 


debug: served static content /socket.io.js
debug: client authorized
info: handshake authorized z-WSf2By3O3ibk20MaMV
debug: setting request GET /socket.io/1/websocket/z-WSf2By3O3ibk20MaMV
debug: set heartbeat interval for client z-WSf2By3O3ibk20MaMV
debug: client authorized for 
debug: websocket writing 1::
debug: emitting heartbeat for client QJ6epwocKAsUFB-JMaMU
debug: websocket writing 2::
debug: set heartbeat timeout for client QJ6epwocKAsUFB-JMaMU
debug: got heartbeat packet
debug: cleared heartbeat timeout for client QJ6epwocKAsUFB-JMaMU
debug: set heartbeat interval for client QJ6epwocKAsUFB-JMaMU
 

​

3. 클라이언트 코드

브라우저에서 읽힐 클라이언트 HTML 파일에서 아래와 같이 socket.io.js 파일을 포함한다.

<script src="http://localhost/socket.io/socket.io.js"></script>​

페이지가 로드되면 msg_from_server1과 msg_from_server2 이름으로 소켓 이벤트를 연결해 둔다.

​

msg_from_server1 은 경고 창으로 서버로부터 받음 메시지를 표시하고

msg_from_server2 은 서버로부터 받은 메시지를 div 태그에 표시한다.

 
socket.on('msg_from_server1', function(data) {
    alert(data);
});

socket.on('msg_from_server2', function(data) {
    var div = document.getElementById("display");
    div.innerHTML = data;
});

화면에는 이름과 메시지 입력항목이 있고 서버를 통해 메시지를 전달하는 버튼 2개가 있다.

2개의 버튼을 각각 클릭하면 화면에서 입력한 이름과 메시지를 서버로 전송하고 서버에서 다시 브라우저에 전송한다.

socket.emit('msg_from_client1', name + "," + msg);

socket.emit('msg_from_client2', name + "," + msg);

 

 

클라이언트 전체 코드이다.

<html>
<head>
<script src="http://localhost/socket.io/socket.io.js"></script>
<script>
    var socket;
 
    window.onload = function() {
         socket = io.connect('http://localhost');
 
         socket.on('msg_from_server1', function(data) {
             alert(data);
         });
 
         socket.on('msg_from_server2', function(data) {
             var div = document.getElementById("display");
             div.innerHTML = data;
         });
    }
 
    var sendMessage1 = function() {
         var name = document.getElementById("name").value;
         var msg = document.getElementById("msg").value;
         socket.emit('msg_from_client1', name + "," + msg);
    }
 
    var sendMessage2 = function() {
         var div = document.getElementById("display");
         div.innerHTML = "";
 
         var name = document.getElementById("name").value;
         var msg = document.getElementById("msg").value;
         socket.emit('msg_from_client2', name + "," + msg);
    }
</script>
</head>
 
<body>
    <table>
         <tr>
             <td>name: <input type="text" name="name" id="name" value="name">
             </td>
         </tr>
         <tr>
             <td>msg: <input type="text" name="msg" id="msg" value="msg">
             </td>
         </tr>
         <tr>
             <td>
                 <button onclick="sendMessage1();">sendMessage1</button>
                 <button onclick="sendMessage2();">sendMessage2</button>
             </td>
         </tr>
    </table>
    <div id="display"></div>
    <hr>
</body>
</html>
 

4. 실행 결과

크롬과 익스플로러 두 개의 브라우저를 띄우고 크롬에는 name1 익스플로러에는 name2라고 입력한다.

 

 

크롬에서 sendMessage1 버튼을 클릭하고 나면 열린 각각의 브라우저에 서버로부터 받은 내용을 경고창에 표시한다.

메시지는 카운트에 1 증가시켜 1이 되었고 name1이 msg1 내용으로 보냈다.

 

 

익스플로러에서 sendMessage2 버튼을 클릭하고 나면 열린 브라우저 화면 아래 서버로부터 받은 내용이 표시된다.

메시지는 카운트가 2 증가하여 3이 되었고 name2가 msg2 내용으로 보냈다.

​

크롬에서 sendMessage2 버튼을 클릭하고 나면 열린 브라우저 화면 아래 서버로부터 받은 내용이 표시된다.

메시지는 카운트가 2 증가하여 5가 되었고 name1가 msg1 내용으로 보냈다.

728x90
저작자표시 비영리

'■ Front-End ■ > Node.js' 카테고리의 다른 글

[Node.js] http 모듈로 웹으로 GET/POST를 서비스해보자.  (0) 2023.02.26
[Node.js] http 모듈로 text와 html을 브라우저에 표시해보자.  (0) 2023.02.26
[Node.js] net 모듈을 사용하여 네트워킹을 해보자.  (0) 2023.02.26
[Node.js] fs 모듈을 사용하여 파일을 읽고 쓰기  (0) 2023.02.26
[Node.js] process에 이벤트를 생성하고 호출해 보자.  (0) 2023.02.26

댓글

티스토리툴바