1. 에디터, 서버와 클라이언트 셋팅
블로그에서 만드는 채팅프로그램은 socket.io 스타터 프로젝트를 재현합니다. 재현하면서 발생하는 문제를 기록하고 프로젝트 마지막에 있는 남은 과제또한 수행하는것이 목적입니다.
https://socket.io/get-started/chat/
Socket.IO — Chat
In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels. IntroductionWriting a chat ap
socket.io
socket.io를 알고싶다면 저와함께 프로젝트를 조금씩 진행하시기를 추천드립니다.
2. 프로젝트 셋팅
- 에디터: intellij
- OS: 윈도우 10
1) 서버만들기
기본적으로 NPM 을 사용하여 서버를 셋팅하고 서버는 node, express 를 사용합니다.
프로젝트 폴더에 npm 을 설치해주세요.
npm init -y그리고 express를 설치합니다.
npm install expressexpress는 노드서버를 만들때 더욱 쉽게 만들수 있는 패키지입니다.
root 디렉토리에 index.js 파일을 하나 만들고 아래와 같이 작성해주세요
var app = require('express')();
var http = require('http').createServer(app);
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});- app.get('/') : 서버라우터 역할을 합니다. /을 통해서 들어온 요청은 해당 get 함수를 실행시킵니다.
- res.send(): 서버렌더링으로 브라우제어 <h1> 태그를 출력합니다.
mac이라면 터미널을 이용하여 node index.js 를 입력하세요. 윈도우라는 cmd 저는 intellij 터미널에서 입력하겠습니다.
node index.js
위의 이미지처럼 서버가 잘 켜졌나요?
이제 브라우저에 localhost:3000으로 접속해보겠습니다.
위와 같이 브라우저에 표시됬다면 성공입니다. 이젠 Hello world 가 아닌 그럴듯한 채팅 창으로 렌더링 하겠습니다. socket.io 사이트 예제에 있는 마크업을 그대로 복붙하겠습니다. 그전에 root 디렉토리에 index.html 파일을 만들어 주세요.
index.html
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>그리고 node 서버도 해당 파일을 불러서 화면에 렌더링 할수 있도록 index.js 파일도 수정하겠습니다.
index.js
const app = require('express')();
const http = require('http').createServer(app);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
http.listen(3000, function () {
console.log('listening on*: 3000');
});
- sendFile() : 노드에서 프로젝트 경로에있는 특정 파일을 찾아 클라이언트 브라우저로 내려주는 역할을 합니다.
__dirname은 루트경로를 의미합니다.
변경한상태에서 서버를 다시 재가동해주세요. 그리고 다시한번 localhost:3000으로 접속합니다.
위와같이 화면이 나왔다면 성공입니다. 아직까진 어려울게 없네요.
다음 장에서는 드디어 socket,io를 연동해보도록 하겠습니다.
'Front-End > socket.io' 카테고리의 다른 글
| [socket.io] 6. socket.io를 이용한 채팅프로그램 - 닉네임추가 (0) | 2019.11.27 |
|---|---|
| [socket.io] 5. socket.io를 이용한 채팅프로그램 - 유저접속추가 (0) | 2019.11.26 |
| [socket.io] 4. socket.io를 이용한 채팅프로그램 - 이벤트처리 & 채팅완성 (0) | 2019.11.26 |
| [socket.io] 3. socket.io를 이용한 채팅프로그램 - socket.io 연동 (0) | 2019.11.25 |
| [socket.io] 1. socket.io란 무엇인가? (0) | 2019.11.20 |
리딩리드