NodeJS가 처음이신분들은 위에 개발환경 구축하기 링크를 통해 참고하시면 됩니다.
자바스크립트를 비롯한 프론트엔드 개발에 가장 효과적인 Text Editor이자 통합 개발 환경인
Visual Studio Code를 사용해서 Node.Js로 간단한 채팅 기능을 아래의 캡처화면과 동일하게 구현해보도록 하겠습니다.
1. 임의로 작업폴더 하나 생성
저는 폴더이름을 chat으로 하나 만들겠습니다.
2. window키 + R -> cmd 명령어로 DOS창 실행
3. NPM 설치확인
cd 명령어로 생성한 폴더의 절대경로 또는 상대경로로 DOS창에서 chat폴더에 위치합니다.
- NPM (Node Package Manager)
npm --version이란 명령어를 통해 npm의 버전을 확인할 수 있습니다.
일반적으로 npm은 Node.js를 설치하면 그 당시의 최신버전으로 기본적으로 설치가 됩니다.
추가적으로 npm 버전을 최신버전으로 업데이트를 하고 싶다 하시면 npm의 설치 명령어인 install 명령어를 통해
npm install --global npm이란 명령어로 npm을 설치해주시면 됩니다.
즉. npm의 설치 명령어로 npm을 설치한다는겁니다.
@ --global 옵션은 모듈을 한번만 설치함으로서 해당 프로젝트 뿐만아니라 자신의 pc내의 모든 프로젝트에서 사용할수 있도록 단어 의미 그대로 전역적으로 설치를 하겠다 할때 사용합니다.
4. chat폴더에 package.json파일 생성
npm init -y 명령어로 chat폴더에 package.json파일을 생성
- npm init
새로운 프로젝트를 만들때 사용하는 명령어
package.json파일은 해당 프로젝트의 갖가지 설정정보, 의존 모듈, 환경변수 등을 포함하고 있는 파일입니다.
npm init 명령어를 입력할시에 아래와 같이 package.json의 각각의 항목을 일일이 입력하라고 나오는데
-y 옵션을 추가해줌으로써 저러한 과정을 뛰어넘고 알아서 Default값으로 구성해줍니다.
5. express와 socket.io 모듈 설치
npm install express socket.io 명령어를 통해
웹 서버를 간단하게 구축할 수 있는 웹 서버와 관련된 기능들을 구현해놓은 모듈인 express와
소켓 통신을 편리하게 구현할 수 있도록 만들어진 socket.io모듈을 설치해줍니다.
6. Visual Studio Code에서 chat 폴더 Open
7. server.js, chat.html 생성
server.js : 서버에서 수행할 로직들을 구성합니다.
chat.html : 클라이언트가 사용할 채팅창 UI를 위주로 작성합니다.
8. 웹서버 구성 및 클라이언트와 웹서버 간의 소켓 연결하기
- server.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var express = require('express');
var app = express();
var http = require('http');
var server = http.Server(app);
var socket = require('socket.io');
var io = socket(server);
var port = 5000;
app.use('/', function(req, resp) {
resp.sendFile(__dirname + '/chat.html');
});
io.on('connection', function(socket) {
console.log('User Join');
});
server.listen(port, function() {
console.log('Server On !');
});
|
cs |
가장 기본이되는 웹 서버 구축은 express 모듈의 Docs를 참고하시면 아주 손쉽게 구성할 수 있습니다.
http://expressjs.com/en/starter/hello-world.html
+ socket.io의 Docs는 아래 링크를 참고
Port번호는 임의로 5000번 포트로 설정해 주었고
localhost:5000/ 의 url로 접속할시( / 요청이 들어올시)에 클라이언트에게 chat.html 파일이 보이게 설정해줍니다.
- chat.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container">
<div id="chatView">
</div>
<form id="chatForm" onsubmit="return false">
<input type="text" id="msg">
<input type="submit" id="send" value="전송">
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</body>
</html>
|
cs |
코딩의 편의성을 조금 높이기 위해 JQuery라이브러리를 cdn link로 가져오고
/socket.io/socket.io.js라는 링크를 포함시킨것에 대해서는 조금 아래로 내려가면 확인할 수 있습니다.
작성이 끝난후 아래와 같이 DOS창에서 node server.js라고 입력해서 server.js를 실행 즉 서버를 실행시키고
인터넷 창을 하나 켜서 localhost:5000/ URL로 접속을 하시면 성공적으로 클라이언트와 서버쪽 코드가 각각 성공적으로 수행되고 있다는걸 확인할 수 있습니다.
그리고 현재의 출력결과에서는 단순하게 input box와 전송버튼만 보여지고 있는데 아직 채팅UI에 CSS 작업을 하지 않아서 저렇게 뜨는겁니다.
chat.html파일에서 포함시켜준 socket.io/socket.io.js의 경로로 직접 접속해보면 아래와같은 소켓통신과 관련된 코드가 주우우욱 나오는데 사실 저도 이게 뭔지는 모르겠습니다.
어쨋든 아래와 같이 뜬다면 성공입니다.
다음 장에서는 채팅UI를 그럴듯하게 꾸며주고 실제로 채팅을 주고받는 기능을 구현해보도록 하겠습니다.
'Javascript > Node.js' 카테고리의 다른 글
| [NodeJS] 채팅방UI 구성, 소켓 연결을 통한 채팅기능 완성하기 [express와 socket.io을 이용한 채팅기능 구현하기 - 2장] (5) | 2019.02.27 |
|---|---|
| [NodeJS] 노드JS(Node JS) 개발환경 구축하기 (0) | 2019.02.22 |
댓글