[Node.js] Node.js 채팅방 제작

참고 : 모던 웹을 위한 Node.js 프로그래밍

해당 채팅은 의 코드를 필자의 사용목적에 맞게 변경한 것이다.

 

 -. 채팅방 기능 추가

 -. 채팅방 입장기능 추가

 -. 전역변수에 접속한 사용자 값을 담고 퇴장시 socket.io의 값을 대조하여 퇴장 이벤트 실행

    (퇴장이벤트를 위해 사용하는데 실 운영시에는 DB 및 저장소 기능을 사용하는것을 권장한다.)

socket.chatting.app.js

// 모듈을 추출한다. - http://localhost:52273 var http = require("http"); var fs = require("fs"); var socketio = require("socket.io"); // 웹 서버를 생성한다. var server = http.createServer(function(request, response) {     // HTMLPage.html 파일을 읽는다.     fs.readFile("node_chatting.html", function(error, data) {         response.writeHead(200, {"Content-Type" : "text/html"});         response.end(data);     }); }).listen(52273, function() {     console.log("Server Running at http://127.0.0.1:52273"); }); // 소켓 서버를 만든다. var io = socketio.listen(server); // 접속한 사용자의 방이름, 사용자명, socket.id값을 저장할 전역변수 const loginIds = new Array(); io.sockets.on("connection", function(socket) {     // 채팅방 입시 실행     socket.on("access", function(data) {         // console.log(io.sockets.adapter.rooms);         socket.leave(socket.id);         socket.join(data.room);         loginIds.push({               socket : socket.id  // 생성된 socket.id             , room : data.room  // 접속한 채팅방의 이름             , user : data.name   // 접속자의 유저의 이름         });         // 사용자가 페이지 새로고침시 loginIds 변수에 값이 누적되지 않게 동일한 사용자의 socket.id 값을 삭제한다.         for(var num in loginIds) {             // 사용자 이름이 같으면서, 기존소켓아이디와 현재 소켓아이디가 다른 값이 있는지 찾아낸다.             if(loginIds[num]['user'] == data.name && loginIds[num]['socket'] != socket.id) {                                 // loginIds의 해당 순서의 값을 삭제한다.                 loginIds.splice(num, 1);             }         }         // 클라이언트의 Contact 이벤트를 실행하여 입장한 사용자의 정보를 출력한다.         io.sockets.in(data.room).emit("contact", {               count : io.sockets.adapter.rooms[data.room].length             , name : data.name             , message : data.name + "님이 채팅방에 들어왔습니다."         });     });     // 채팅방 퇴장시 실행(Node.js에서 사용자의 Disconnect 이벤트는 사용자가 방을 나감과 동시에 이루어진다.)     socket.on("disconnect", function() {         var room = "";         var name = "";         var socket = "";         var count = 0;                 // disconnect 이벤트중 socket.io의 정보를 꺼내는데는 에러가 발생하고,         // 실행중인 node.js Application이 종료된다.         // 이에따라 try ~ catch ~ finally 로 예외처리해준다.         try {                         // 생성된 방의 수만큼 반복문을 돌린다.             for(var key in io.sockets.adapter.rooms) {                 // loginIds 배열의 값만큼 반복문을 돌린다.                 var members = loginIds.filter(function(chat) {                     return chat.room === key;                 });                     // 현재 소켓 방의 length와 members 배열의 갯수가 일치하지 않는경우                 if(io.sockets.adapter.rooms[key].length != members.length) {                                     // 반복문으로 loginIds에 해당 socket.id값의 존재 여부를 확인한다.                     for(var num in loginIds) {                         // 일치하는 socket.id의 정보가 없을경우 그 사용자가 방에서 퇴장한것을 알 수 있다.                         if(io.sockets.adapter.rooms[key].sockets.hasOwnProperty(loginIds[num]['socket']) == false) {                             // 퇴장한 사용자의 정보를 변수에 담는다.                             room = key;                             name = loginIds[num]['user'];                             // loginIds 배열에서 퇴장한 사용자의 정보를 삭제한다.                             loginIds.splice(num, 1);                         }                     }                                         // 해당 방의 인원수를 다시 구한다.                     count = io.sockets.adapter.rooms[key].length;                 }             }         } catch(exception) {             console.log(exception);         } finally {             // 클라이언트의 Contact 이벤트를 실행하여 이탈한 사용자가 누군지 알린다.             io.sockets.in(room).emit("contact", {                   count : count                 , name : name                 , message : name + "님이 채팅방에서 나갔습니다."             });                     }       });     // 메세지 전송 이벤트     socket.on("message", function(data) {         // 클라이언트의 Message 이벤트를 발생시킨다.         io.sockets.in(data.room).emit("message", data);     }); });

node_chatting.html

<html> <head> <title>:: socket.io.chat ::</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="/socket.io/socket.io.js"></script> <script type="text/javascript">     // HTML 문서가 모두 준비되면     jQuery(document).ready(function() {         var socket = io.connect();         // 채팅 창으로 접속 및 전환         jQuery("#startChatting").click(function() {             socket.emit("access", {                   room : jQuery("#inputRoom").val()                 , name : jQuery("#inputName").val()             });             location.href = "#chatpage";             jQuery("#roomName").html(jQuery("#inputRoom").val());         });         // 이벤트를 연결합니다.         socket.on("message", function(data) {             pushMessage(data.name, data.message, data.date);         });         // 채팅방 접속 or 퇴장시 실행되는 알림 메세지         socket.on("contact", function(data) {                      jQuery("#userCount").html(data.count);             pushMessage(data.name, data.message, new Date().toUTCString());         });         // 채팅 메시지를 전송한다.         jQuery("#submit").click(function() {             socket.emit("message", {                   room : jQuery("#inputRoom").val()                 , name : jQuery("#inputName").val()                 , message : jQuery("#inputMessage").val()                 , date : new Date().toUTCString()             });             jQuery("#inputMessage").val("");         });         });     function pushMessage(pushName, pushMsg, pushDate) {         // 입력할 문자 메시지         var output = "";         output += "<li>";         output += "<h3>" + pushName + "</h3>";         output += "<p>" + pushMsg + "</p>";         output += "<p>" + pushDate + "</p>";         output += "</li>";         // 문서 객체를 추가합니다.         jQuery(output).prependTo("#content");         jQuery("#content").listview('refresh');     }; </script> </head> <body> <div data-role="page">     <div data-role="header">         <h1>Socket.io Chat</h1>     </div>     <div data-role="content">         <h3>입장할 방의 이름과 닉네임을 지정해 주세요</h3>         <div data-role="fieldcontain">             <label for="textinput">방 이름</label>             <input id="inputRoom" value=""/>         </div>         <div data-role="fieldcontain">             <label for="textinput">닉 네임</label>             <input id="inputName" value=""/>         </div>         <input type ="button" id="startChatting" value="채팅 시작"/>         </div> </div> <div data-role="page" id="chatpage">     <div data-role="header">         <h1>             <span id="roomName"></span>             &nbsp;:&nbsp;             <span id="userCount">0</span>         </h1>     </div>     <div data-role="content">               <input id="inputMessage" value=""/>               <input type="button" id="submit" value="입력"/>               <ul id="content" data-role="listview" data-inset="true"></ul>         </div> </div> </body> </html>

※ 위 설명에서 말한대로 모던 웹을 위한 Node.js 프로그래밍 코드의 내용을 바탕으로 만들었습니다.

   실 서비스에서는 접속한 사용자의 값을 DB 및 따로 저장소를 만들어 운영하는것을 권장합니다.

※ 혹 개선의 여지가 있음을 아시는 분은 댓글로 남겨주시면 참고하겠습니다.