## 최종 파일 ##
스프링 예제.zip
우선 구글에 접속을 해주세요.
구글에 nodejs를 검색을 해주신뒤 광고 밑에 있는 nodef.js 사이트에 접속을 햊쉐요.
만약, 필자와 다른 결과가 나올 경우 여기를 눌러주세요.
현재 버전 보다는 왼쪽에 있는 안정적, 신뢰도 높음이라고 적혀있는 버전을 다운받아주세요.
## 설치 과정 ##
설치가 완료가 되었다면 자신이 원하는 경로에 폴더를 만들어주세요.
필자는 바탕화면서 폴더를 만들겠습니다.
방금 만든 폴더로 들어가서 "package.json" json 파일을 만들어주세요.
1 2 3 4 5 6 7 | { "name": "socket_test", "version": "1.0.0", "description": "socket_test", "dependencies": {} } | cs |
| cs |
그런뒤 해당하는 파일을 열어 안에 위에 예제를 참고해서 적어주세요.
위 이미지는 위에 소스코드를 입력한 결과 입니다.
폴더를 만들어둔곳으로 이동한뒤 Shift(쉬프트) + 우클릭을 합니다.
그런뒤 여기서 PowerShell 창 열기를 눌러주세요.
여기서 주의 할점은 WINDOW10만 이렇게 진행이 가능 합니다.
만약, 윈도우 10이 아니라면 아래의 설명을 참고 해주세요.
## 윈도우 10 이하 버전 ##
우선, 윈도우키 + R을 눌러주세요.
단축기를 누르게 되면 "실행"창이 나오게 됩니다.
열기에 "CMD"를 입력 해주세요.
그런뒤, 확인
아까전에 만든 폴더의 경로를 복사해주세요.
cd 복사한경로 를 넣어주신뒤 엔터키를 눌러주세요.
그러면 "이동한경로>"이렇게 현재 위치가 변경됨을 알 수 있습니다.
cmd 혹은 powershell에 해당하는 폴더로 이동한뒤 "npm install --save express@4.15.2"를 입력하시고 엔터를 누르시면 위와 같이 express가 설치되는것을 확인할 수 있습니다.
다시, 폴더로 이동을 하신뒤 정상적으로 설치가 되었다면, node_modules 폴더와 package-lock.json json 파일이 생성된것을 확인할 수 잇습니다.
그런뒤, 해당하는 폴더에 파일이름.js로 js파일을 하나 만들어주세요. (한글 파일은 추천 안합니다.)
1 2 3 4 5 6 7 8 9 10 | var app = require('express')(); var http = require('http').Server(app); app.get('/', function(req, res){ res.send('<h1>안녕하세요 "/" 경로 입니다.</h1>'); }); http.listen(82, function(){ console.log('listening on *:82'); }); | cs |
server.js 파일안에 위와 같이 소스코드를 입력 바랍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //app이라는 변수에 express를 담아줌 var app = require('express')(); //http 변수에 http를 담아두고 Server함수에 app을 담아줌 var http = require('http').Server(app); //페이지를 get으로 요청을 했을때. app.get('/', function (req, res) { //아래와 같은 메시지를 출력 res.send('<h1>안녕하세요 "/" 경로 입니다.</h1>'); }); //http는 82번 포트를 사용한다. http.listen(82, function () { //콘솔창에 출력 console.log('listening on *:82'); }); | cs |
위 소스코드는 간단한 해석 입니다.
위 소스코드를 입력한 결과 화면
다시 CMD 혹은 POWERSHELL로 이동하신뒤 node server.js를 입력 해주신뒤 엔터
server.js는 아까전에 js파일을 만들었던 파일 이름 입니다.
그러면 아래의 listening on *:82 문구가 출력이 되는데 서버가 82번 포트로 정상적으로 열렸다는 입니다.
그런뒤 인터넷창에 http://localhost:82로 접속을 해주세요.
그러면 위와 같은 결과값이 나옵니다.
이제, 간단한 노드 JS에 대한 설명은 치우고 SOCKET.IO로 넘어갈게요.
CMD 혹은 POWERSHELL에 "npm install --save socket.io"를 입력 해주세요.
SOCKET.IO에 대한 라이브러리를 다운 받기 위함 입니다.
만약, 서버가 열려 있는 상태에서 명령어 입력이 안된다면 Ctrl(컨트롤) + c를 단축기를 입력해주시면 서버가 닫힙니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.send('<h1>안녕하세요 "/" 경로 입니다.</h1>'); }); io.on('connection', function(socket){ console.log('한명의 유저가 접속을 했습니다.'); }); http.listen(82, function(){ console.log('listening on *:82'); }); | cs |
server.js에 파란색으로 색칠한 소스코드를 추가 해주세요.
다시 CMD 혹은 POWERSHELL로 이동하신뒤 node server.js를 입력 하시고 엔터키를 눌러 서버를 실행 시켜주세요.
그런뒤, 인터넷창에 http://localhost:82/socket.io/socket.io.js 주소를 입력신뒤 접속을 해주세요.
위와 같은 결과가 나오신다면 정상적으로 소켓 서버가 열린겁니다.
STS를 실행시키신뒤 간단하게 MAVEN 프로젝트를 실행시켜주세요.
만약 프로젝트를 만드실줄 모르신다면 아래의 링크를 눌러서 따라해주세요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>소켓 서버</title> </head> <body> <script src="http://localhost:82/socket.io/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(document).ready(function(){ var socket = io("http://localhost:82"); }); </script> </body> </html> | cs |
home.jsp 파일에 위와 같이 소스코드를 입력 해주세요.
위 이미지는 소스코드를 넣은 결과값 입니다.
그런뒤, 서버를 실행 시켜 주세요.
필작 기준에서 sts를 통해 만든 주소는 http://localhost:8080/chat/ 입니다.
사이트로 접속을 해주세요.
서버에 접속을 해주신뒤 아까전에 node js로 서버를 열어둔 cmd, powershell를 열어서 확인 해주세요.
그려면 한명의 유저가 접속을 했습니다. 라고 출력이 됩니다.
## 실행 후 결과 화면##
이상 포스팅을 마치고 다음 게시글은 간단한 채팅방을 보여 드리곘습니다.
'스프링(Spring) > 스프링 강의' 카테고리의 다른 글
| [Spring] 자동 등록 방지를 구현하자 - google reCAPTCHA -1 (0) | 2018.12.07 |
|---|---|
| [Spring] Node.js를 이용해 Spring에 채팅방을 만들자! (7) | 2018.12.03 |
| [Spring] 스프링 마이바티스 마리아디비 연결 (3) | 2018.11.27 |
| [Spring] Maria DB 설치 (0) | 2018.11.27 |
| [Spring] STS 기본설정과 pom.xml 사용법 (0) | 2018.11.27 |
