node.js socket.io 사용해서 채팅서버 만들기(1): 모든 사람들과 채팅하기

Node.js 프로그래밍 책을 사용해서 공부해봤다!

• 제가 공부한 것을 메모하느라 코드는 일부분만 가져와 작성했습니다.
  전체 코드는 아래 제 깃허브나 책 Node.js프로그래밍(이지스퍼블리싱)에서 확인하실 수 있습니다.

https://github.com/yuna-Song-yuna/chatting

1. 기본 세팅하기

npm install socket.io --save
npm install ejs --save
npm install express --save
👉책에서는 html을 사용했지만 프로젝트하면서 ejs 경험 후 html사용 안함..ㅎ

뷰 템블릿 엔진 설정, static 경로 설정, 라우터 설정 등 항상 하던거 해주고 시작하기!

2. 시작하기

1. socket.io 서버 시작

//main.js
var socketio = require('socket.io')(app);
var io = socketio.listen(server);	//서버 실행 코드 밑에 작성

👉책에서는 http모듈을 사용을 사용했지만 나는 express를 사용하여 var app = express();로 사용 중이기 때문에 소켓 require시 (app)붙여줘야 했다.
💢왜 에러가 나는지 몰라서 한참 헤매다 눈치로 해결ㅠㅠ

2. connection 이벤트 추가

• connection 이벤트: 클라이언트가 웹 소켓으로 서버에 연결했을 때 발생하는 이벤트

//main.js
// 클라이언트가 연결했을 때 이벤트 처리
io.sockets.on('connection', function(socket){
  console.log('connection info:', socket.request.connection._peername);
  
  // 소켓 객체에 클라이언트 Host, Port 정보 속성으로 추가
  socket.remoteAddress = socket.request.connection._peername.address;
  socket.remotePort = socket.request.connection._peername.port;
})

//chat.ejs
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>

<input type = 'text' id = 'hostInput' value = 'localhost'>
<input type = 'text' id = 'portInput' value = '2000'>
<input type = 'button' id = 'connectButton' value = '연결하기'>
 
<p>결과: </p>
<div id = 'result'></div>
-------------------------------------------------------------------
<script>
//문서 로딩 후 실행
$(function(){
  //연결하기
  $("#connectButton").bind('click', function(event){
    println('버튼 클릭');

    host = $("#hostInput").val();
    port = $("#portInput").val();

    function println(data){     //책에서는 여기에 printl함수 안써줬음. 왜 안되나 한참 찾음.
      console.log(data);
      $('#result').append('<p>'+data+'</p>')
    }

    connectToServer();
  })
  </script>

👉라이브러리 파일 가져오기(cdn 선호ㅎ)
👉<input>: 서버에 연결할 때 필요한 url을 가져오기 위한 파트(가져와서 각자 변수에 저장)
(책에선 port가 3000이지만 난 항상 2000을 사용하던 습관으로 그냥 2000사용)
👉println이 javascript에서도 쓰이는 건가 생각했는데 알고보니 함수였음
💢왜 자꾸 개발자 콘솔에 println이 undefined라고 뜨나 열받았는데 책과 달리 println이 쓰이는 함수 안쪽에 해당 함수를 정의해줘야 했다.(한참찾음)
👉println(): console.log처럼 웹페이지에 텍스트 뿌려주는 함수 만든 것

//chat.ejs
// 서버에 연결하는 함수 정의
function connectToServer(){
  var url = 'http://' + host + ':' + port;
  socket = io.connect(url, options);
  
  socket.io('connect', function(){
    println('웹 소켓 서버에 연결되었습니다.')
  }

👉클라이언트에서 text로 전달받은 값(ipaddress(localhost), port번호)으로 url 완성
👉connectToServer()안에도 println()함수 넣어주기

3. 데이터 보내기!(클라이언트 -> 서버)

• 데이터를 보낼 때는 emit()메소드 사용: 클라이언트에서 서버로 메시지를 보내거나 서버에서 클라이언트로 메시지 보내기 가능
• echo기능 사용: 보낸 메시지가 나에게 다시 돌아와서 보이는 것

//chat.ejs
<input type = 'text' id = 'senderInput' value = 'user1'>	// 보내는 사람 아이디
<input type = 'text' id = 'recepientInput' value = 'ALL'>	// 받는 사람 아이디
<input type = 'text' id = 'dataInput' value = '안녕'>		// 메시지
<input type = 'button' id = 'sendButton' value = '전송'>
------------------------------------------------------------------------------
socket.on('message', function(message){	//connect이벤트를 처리하는 콜백 함수 안에 작성
  println('<p>수신 메시지:' + message.sender + ',' + message.recepient + ',' + message.command + ',' + message.type + ',' message.data + '</P>');
});

$('#sendButton').bind('click', function(event){
  var output = {sender:sender, recepient:recepient, command:'chat', type:'text', data:data};

socket.emit('message', output);

👉emit처리가 완료되면 println()함수 사용해서 클라이언트 화면에 저 데이터들이 나타날 것임
👉socket.emit: message라는 이벤트 이름과 함께 emit()메소드를 사용해 서버로 전송(output에 담긴 데이터와 같이 전송됨)
👉message라는 이벤트 이름 내 마음대로 바꾸기 가능, 담긴 데이터도 바꾸기 가능
💢아니 이번에는 또 message가 undefined라고 떠서 뭐가 문제여 했는데 줄바꿈을 잘못한 내탓 ㅎㅎ 별 거 아닌데 왜 안보이는지 한참 고생했네

4. 데이터 보내기!(서버 -> 클라이언트)

//main.js
// connection 이벤트 처리 함수 안에 작성
socket.on('message', function(message){
  if(message.recepient == 'ALL'){
    io.sockets.emit('message', message);
  };
});

👉클라이언트가 보낸 message를 받아서 recepient의 속성 값이 'ALL'이면 나를 포함한 모두에게 message 이벤트 보냄

3. 후기

어렵다. 너무너무!! 어렵다. 그래도 몇번 씩 읽어보고 조금씩 하다보니 조금씩 이해가 되어가는게 넘 신기하다.
책이나 구글에 검색 후 흐름 잡힐때까지 읽기 + 코드치면서 읽기 + 에러나면 읽기 + 블로그에 정리하면서 읽기 = 이정도는 해야 '조금' 알겠다 ㅎ,,
그래도 처음 시작해서 어려울 땐 다 때려치고 싶은데 점점 내 머리에 들어오기 시작하면 재밌다. 또 힘들게 해서 잘 돌아가면 넘 행복ㅎ
이래서 프로그래밍을 하나보다.

4. 개선할 부분

• 아직 코드의 흐름?을 100% 이해한 것이 아니기 때문에 계속 봐야함
• 직관적으로 사용할 수 있도록 코드 수정하고 css 다듬기~
• 아직 1:1 채팅이랑 그룹채팅 남았다.......