개발 블로그

#1.8 Nicknames part Two

왜 Object 형식을 String 으로 바꿔서 전송해야할까?

바로 websocket이 브라우저에 있는 API 이기 때문이다. backend 에서는 다양한 프로그래밍 언어를 사용할 수 있기 때문에 API가 어떤 결정을 할 수는 없는 것이다. 

예로 우리는 javascript 로 서버를 작성했지만, javascript가 아닌 GO를 이용해 서버에 접속한다면 문제가 되기 때문이다. 

front에서 javascript Object를 GO server 로 보내면 안된다. 그래서 string 으로 바꿔서 서버로 전송하는 것이다. 

string 을 받은 서버는 각자 환경에 맞게 string 을 다른 type 으로 변경하면 되는 것이다. 

이제 back -> front  을 볼 차례이다.

backend 가 받은 string 은 아래와 같고, 이제 이 string 을 Object 형식으로 바꿔서 front 로 보내보자. 

backend 쪽에서 line 36~39 와 같이 수정해준다.

그럼 메세지를 입력했을 때, 입력한 메새지만 나오게 된다. 닉네임에 입력해도 아무것도 스크린에 뜨지 않는 걸로 보아 message type 이 구분되는 것임을 알 수 있다. 

message type 이 nickname 인 경우도 추가해주고, switch 구문으로 변경해서 가독성을 높였다.

(parsed -> message 로 변수명 변경)

이제 누가 메세지를 보낸건지 식별하기 위해 type이 nickname 인 메세지의 payload 를 socket 에 넣어보자. 

line 45와 같이 socket 에 새로운 아이템을 추가하자. socket 은 기본적으로 Object 이기 때문에 원하는 어떤 타입이든 넣을 수 있다.

그 후 line 31 과 같이 처음 접속한 사람을 위해 익명을 뜻하는 "Anon" 으로 nickname 을 설정해주고

line 42와 같이 채팅 메세지를 누가 보냈는지, 뭘 보냈는지에 대한 아이템을 객체 형태로 담아 front 로 전송한다. 

이제 서버를 재시작해보자. 

잘 나온다. 여기서 주목할 점은 socket 이 데이터를 저장할 수 있다는 것이다. (socket["nickname"] = ....)

#1.6 Chat Completed

html 로 메세지를 전송하는 버튼과, 메세지 리스트를 보여줄 수 있는 화면을 작성해보자.

line 13 ~ 16 을 추가해준다.

html에서 작성한 ul, form 을 브라우저 쪽에서 변수로 선언해주고,

from 에 대한 변수인 messageForm에 eventListener 를 add 해준다. 

즉 submit 이벤트가 발생했을 때  line 17~21 메소드를 실행한다.

* preventDefault() : submit 되었을 때 defulat 동작은 초기 화면으로 돌아오는 것인데, 해당 함수를 통해 그 default 동작을 막는다. 즉 submit 이 되어도 그 화면을 그대로 유지할 수 있도록 해준다. 

 다음 서버를 실행하고 브라우저에 hello 를 입력하면 정상 실행됨을 확인할 수 있다. 

이제 input.value를 console.log 로 출력하는 대신, socket.send 를 사용해서 

front->back 으로 입력 값을 전송해보자. 

또한 input.value 값을 초기화해줌으로써 submit 후에 입력 창에 문자가 남아있지 않도록 해준다. 

서버 재실행 후 브라우저에서 숫자를 입력해보면 backend 에서 그 값을 확인할 수 있다. 

backend 가 받은 메세지를 그대로 다시 front 로 전송해보자.

line 32를 line 33으로 수정해주면 

아래와 같이 브라우저에서 hi 라고 입력 후 send 버튼을 누르는 즉시 back->front 로 그 메세지를 다시 전송하여 콘솔 창에서 그 메세지를 확인할 수 있다. 

그러나 이 기능은 메세지를 입력한 그 브라우저와 서버 간에 통신을 하는 것이다. 즉 크롬 브라우저와 사파리 브라우저간의 통신이 되지 않느다. 이를 확인하기 위해 사파리에 동일한 주소로 접속을 한 뒤 메세지를 입력하면 이는 사파리에서만 확인 가능하지 크롬에서는 확인이 불가하다.

이제 chrome <-> server <-> safari 구조로 chrome ~ safari 사이에 통신할 수 있도록 해보자. 

현재 socket 에 누가 연결이 되었는지 모르므로 fake database를 생성해주자. 

앞으로 누군가 서버와 connection이 되면, 그 연결 정보인 socket 을 sockets 배열에 넣어줄 것이다. 

line 27, 30을 통해서 하나의 socket(브라우저)을 통해 받은 메세지를 다른 socket(브라우저들)들에 전송할 수 있다. 

현재 코드로는 자신의 브라우저에도 메세지를 보내는 방식이지만 추후 이 방식은 개선하도록 한다. 

line 38과 같이 연결된 모든 브라우저에 socket 을 통해 메세지를 보내주는 기능을 추가한 뒤 

크롬에서 메세지를 send 하면 safari 에서도 그 메세지가 출력됨을 볼 수 있다. 

반대로 safari 에서 입력해도 동일하게 chrome 에 출력된다.

#1.4 WebSockets Messages

앞서 server.js 에서 handleConnection 이라는 함수를 따로 정의했었는데,

on 함수의 두번째 인자 내에 바로 함수를 생성해보자. (line 26~28)

이 방식으로 하면 line 23~25 방식에 비해, socket이 현재 어떤 상태인지 알기 쉽다. 즉, 연결이 되면 socket이 인자에 들어온다는 것을 직관적으로 이해할 수 있다. 

이제 console.log 대신 "welcome to chat" 이라는 메세지를 보내보자. 

send 메소드는 server의 메소드가 아닌 socket 의 메소드이며, 이는 socket 과의 직접적인 연결을 제공해준다.

backend 에서 메세지를 보냈으니, 이를 Frontend에서 받아보자. 가능한 옵션은 네가지가 있고 이 중 open을 입력하자. open은 connection 이 opne 되었을 때를 의미한다.

backend 쪽도 로그를 추가해주자. 

다음으로 socket에 이벤트 두개를 추가해보자. message와 close 이벤트를 추가한 코드이다. 

message이벤트는 메세지를 받을때마다 아래 내용을 출력한다. 

서버에도 브라우저와 잘 연결되었다는 메세지가 출력된 모습이다. 

브라우저 쪽도 잘 작동한다.

이 중에 직접 받은 data 만 받고 싶다면 위 사진의 line 8 중 message 파라미터를 message.data 로 바꿔보자. 

data 만 출력한 모습이다. 

이 상태에서 서버 터미널에 ^C를 입력하여 서버를 kill 하면, 브라우저에서는 서버 연결이 끊겼다는 메세지가 발생한다. 

동일하게 서버에서도 close event에 대한 Listener 를 등록해보자. (socket.on () )

브라우저에서 연결을 끊기 위해 크롬 창을 닫으면,  아래와 같이 터미널창에 브라우저로부터 연결이 끊겼다는 메세지가 출력된다. 

서버와 브라우저 간 양방향 통신에 대해 알아봤고,

이제 frontend -> backend 로 메세지를 보내보자. (위에서는 backend -> frontend 만 했음)

보내기 전에 10초를 기다리기 위해 timeout 을 설정하자. 

timeout을 설정함으로써 메세지를 순차적으로 보낼 수 있다. 

브라우저가 보낸 메세지를 backend 에서 받기 위해 eventListener를 작성해보자. (line 31~33)

이제 서버를 재실행하면,

1. back -> front : hello! 메세지를 보냄. ( 위 사진의 Line 34)

2. front -> back : front에서 10초 후 메세지를 보내면 backend 터미널에 hello from the server 라는 메세지 출력됨.

그러나 아래와 같은 에러가 떠서

강의 아래 있는 코멘트를 보고 수정한 뒤 재실행 하니

정상적으로 출력된것을 확인할 수 있었다.

* 메세지를 받을 때, frontend 에서는 addEventListener() 메소드로 받고, backend 에서는 socket.on() 메소드로 받는다. 

#1.3 WebSockets Events

이제 ws를 사용해서 backend 와 frontend 사이에 connection을 만들어보자. 

frontend 에서 websocket을 이용하여 backend 와 연결하는 것은 -> JS 에서 지원한다. 

websocket은 위의 버튼리스너가 동작하는 방식과 비슷하다.

즉 Event가 있고, 그 Event가 실행될 때 사용할 Function을 정하면 된다. 

(* 추가 상세 이론은 무료 vanilla JS 강의 참고) 

websocket은 listen 할 특정 event 명이 있으며, 추가적인 정보를 받기 위한 function 도 있디.

Event는 어떤 것들이 있을까?

-> click, submit, Wi-Fi on/off 등이 있다.

on() 함수의 첫번째 인자는 event, 두번째 인자는 function 이다. 이 function은 첫번째 인자인 event 가 발생할 때 호출된다. 

여기서 cb(call back)으로 socket을 받는다고 나와있다. socket은 연결된 어떤 사람을 말한다. 연결된 브라우저의와 contact line을 말하며, 이 socket 인자를 변수에 저장해놔야한다. 그래야 Function의 인자에 넣을 수 있다. 

아래는 event 들의 종류이다. connection를 입력한다. 

그 후 function을 생성한다. 이름은 handleConnection.(line 23~25)

connection 이벤트가 발생하면 handleConnection함수는 인자를 통해

backend에 연결된 사람의 정보를 socket을 통해 frontend로 받아온다. 이 방법은 vanilla JS를 사용할 때의 방법입. 

이제 frontend에서 backend와 연결하는 부분을 작성해보자.

참고 : https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#syntax

아래와 같이 frontend 에 작성 후 

console에서 새로고침을 해보면, 아래와 같이 http 프로토콜을 사용해서 에러가 났음을 확인할 수 있다. 

http를 ws로 변경하자. 

그리고 모바일에서 사용 시 localhost:3000으로 접속할 수 없으니 이 부분도 수정을 해보자.

브라우저에서 위 정보를 스스로 가져오게 해보자. 

콘솔창에서 window.location.host 를 입력하면 'localhost:3000'과 같이 뜨는 것을 확인할 수 있다. 

frontend 코드상에서도 아래와 같이 수정한 뒤 저장하고 refresh를 해보면 

WebSocket connection to 'ws://%24%7Bwindow.location.host%7D/' failed: 

와 같은 오류가 뜨는데 이는 따옴표(')를 -> 백틱(` - 물결 아래에 있으며 한글일 때는 ₩로 타이핑되므로 영문으로 전환 후 입력하면 된다)을 쓰면 해결된다. 

여기까지 websocket을 이용해 frontend와 backend 간 connection을 만들어보았다.

이제 real-time 으로 메세지를 주고 받아보자. 

#1.0 Introduction

실시간 채팅 어플을 만들어보자.  

#1.1 HTTP vs WebSockets 

http와 websocket 은 둘 다 프로토콜이다.  

아래 코드는 http의 request, response 방식이다. 즉 ,유저가 "/"(home)으로 Get Request 를 보내면 , 

template 으로 respond 한다. 인터넷은 기본적으로 이와 같이 http 방식이다. 

그러나 http의 특징은 stateless이다. 즉, req/res 후에 backend 는 유저를 잊는다. req를 주면 그저 res를 기다릴 뿐. 

그래서 authenticate 를 하려면 서버에 cookie를 보내줘야한다. 예를 들어 프로필 페이지에 들어가려면 내가 누구인지 알려주는 cookie를 서버로 보내고, 서버는 일치하는 프로필 페이지를 respond 해준다. 

Get request, Post Request 모두 Req/Res 방식이며, 이 과정은 Real time 으로  발생하지 않는다. 

WebSocket : 실시간 채팅/notification 기능 활용 가능

Websocket은 처음에 악수를 한다. (WebSocket request-> accept) accept하면 coonection이 성립된 것이며, 연결이 되었기 때문에 서버는 유저를 기억한다. 그래서 원한다면 서버가 먼저 유저에게 메세지를 보낼 수 있으며, 둘 사이에는 양방향 통신이기 때문에 서로 언제든지 메세지를 보낼 수 있다.(ex. Wifi, 전화통화) 

이후 자바스크립트용으로 구현된 websocket과 브라우저에 내장된 websocket api를 사용할 것이다. 

websocket 은 브라우저-backend 뿐 아니라 backend-backend 간에도 동작한다. (http도 동일)

#1.2 WebSockets in NodeJS

node.js로 websocket 서버를 만들어보자. (ws라는 package 활용)

ws는 websocket 을 사용하기 위한 기본. 다양한 기능 사용을 위해서는 framework를 추가로 사용해야한다. 

https://www.npmjs.com/package/ws

먼저 npm i ws로 모듈을 설치한다. 

이제 서버를 만들 것이다. ws 서버를 새로 만드는 것이 아니라 express 서버(http) 와 합친다. 

=> http + websocket 

express 는 websocekt 을 지원하지 않기 때문에 function을 새로 추가해야 한다.

이제 http server, Websocket server 를 만들어보자. => localhost:3000은 이 두 서버를 모두 사용할 수 있다. 즉, 동일한 포트 3000번에서 http, ws request 두개를 다 처리할 수 있다. 

[http]

line 1 : http package는 모든 Node.js 에 내장되어 있으므로 line 1 과 같이 import 만 해주면 설치없이 사용할 수 있다. 

line 18 : 서버 생성한 부분이다. 

[websocket]

line2 : websocket import

line 21 : 생성한 http 서버(const server) 위에 websocket 서버를 생성하였다. 

이제 위의 line 22와 같이 만든 서버를 listen 해보면 정상적으로 실행되는 것을 볼 수 있다.

전과 차이는 없지만, 생성한 http 서버의 위에 ws 서버를 생성한 것이다. (같은 포트 3000번 공유)

출처 : https://nomadcoders.co/noom/lectures/3111

#0.1 Requirements 

[BackEnd]

• ExpressJS
• app.get()
• Pug
• (req, res) => 
• package.json
• babel
• nodemon

[FrontEnd]

• 바닐라JS (바닐라JS로 크롬 앱 만들기 참고)  
  •   document.querySelector, document.createElement, title.innerText=""
  •  js로 HTML에서 요소를 가져오거나 생성하는 방법
  • 클래스명 추가/삭제 방법 (ex  .classList.add() )

[NodeJS]

• ver 4.17.3 이상

#0.2 Server Setup

package.json 만들기

Babel, Nodemon 설정하기

npm이란?

Node.js Package Manager의 약자

노드 프로젝트를 시작할 때

$npm init

으로 시작한다. 

터미널에서 바로 vscode 실행하는 방법

vscode 에서 shift+cmd+p 누르고 code 검색 후 설치 

터미널에서 code . 명령어 실행

여기서 main, scripts 부분 삭제

상단의 Terminal 탭에서 New Terminal 클릭하여 터미널 창 신규 생성

touch README.md 명령어 실행하여 github 용 README 추가

https://server-talk.tistory.com/392

Nodemon 설치하기

npm i nodemon -D 

babel 파일 생성, nodemon.js 파일 생성, src 폴더 생성

Babel 설치

먼저 git init. 실행 후 babel 설치

git init .

npm i @babel/core @babel/cli @babel/node -D

touch .gitignore 

추가로 preset 설치

npm i @babel/preset-env -D

후 babel.config.json 파일에 아래와 같이 입력

npm i express

npm i pub

import express from "express";

localhost:3000 접속 후 확인 

#0.3 Frontend Setup

static file과 User 에게 가게 될 파일 만드는 단계

WebPack을 사용하지 않고 단순히 JavaScript를 User에게 전송할 것 

먼저 아래와 같이 public, js 폴더 생성 후 그 안에 app.js 파일을 생성한다. 

public 안에 veiws 폴더 생성 및 home.pug 파일을 생성한다.

일반적인 html 작업을 위해 html 5를 선택한다. 

 pug 페이지들을 렌더하기 위해 server.js 파일에 pug 설정을 해준다. (line 5,6)

line 6은 views 경로를 설정해준 것이다. 

이제 npm run dev 로 실행시켜 보자.

이제 Route 를 생성할 차례이다. ( 한 개만 사용함)

여기서 Express 로 하는 것은 view 를 셋팅하는 것과, render 를 하는 것이며,

나머지는 websocket 에서 실시간으로 일어난다. 

오류가 나서 views 디렉토리 경로를 line 7과 같이 수정한다. 정상동작됨을 확인하였다.

다음은 home 에 script 를 작성한다.

이 상태에서 line 10의 url로 이동하면 동작하지 않는다. url 동작을 위해서는 static 작업이 필요하다.

line 8은 static 작업을 한 내용이다. user가 public 으로 이동하면 __dirname+/public 폴더를 보여주는 것이다. 

그 후 User가 보는 FrontEnd 에 해당하는 app.js 파일에 hello; 를 입력한 뒤 서버를 재시작하면 다음과 같이 확인할 수 있다.

app.js 를 저장할 때마다 nodemon이 새로 시작된다. 이는 비효율적이므로 views 나 server 를 수정할 때만 ㅜodemon이 재시작되도록 해보자. 아래와 같이 nodemon.json 파일에서 해당 파일을 ignore 하면 된다.

* nodemon은 우리의 프로젝트에서 변경 사항이 발생하면 서버를 재시작해주는 프로그램. 

서버를 재시작하는 대신에 babel node 를 실행한다.("exec": )

Babel은 우리가 작성한 코드를 일반 NodeJS 코드로 컴파일해주는 역할이며, 그 작업을 src/server.js 에다가 해주는 것이다. 

정리하면,

Pug로 view engine을 설정하고, Express에 template이 어디있는지 설명해주고 (line 6,7)

puglic url 을 생성하여 유저에게 파일(public 폴더)을 공유해주고 (보안적인 측면에서 유저가 모든 부분을 볼 수 없도록 제한) (line 8)

home.pug를 render 해주는 route handler 를 만듦. (line 9)

이제 mvp css 를 사용해서 추가로 html tag 를 더 예쁘게 꾸며보자. 

아래의 href 링크를 복사해서 

header에 추가하자.

line 8 : 기존의 link:css 에서 href 를 위 mvp css 걸로 수정한다.

왼쪽이 mvp css 적용 전, 오른쪽이 적용 후 이다. 

마지막으로 javascript가 잘 연결됐는지 확인해보자.

위의 javascript는 제대로 frontend 로 가고 있는 것이다. 

#0.4 Recap

Line 10 과 같이 CatchAll Url 만들어보자. 유저가 아무 url 로 이동하려고 시도해도 home 디렉토리로 리다이렉트 시킨다.