[Node.js] 실시간 멀티 채팅 만들기 1탄
Node.js라는 친구를 소개하고 멀티 채팅 구현글을 임시 저장해놓고 시간이 없다는 핑계로 일주일을 방치했더니 날아가버려서 다시 쓴다^^... 정리 잘해놨는데... 참고 블로그 - https://jinblog.kr/156 Socket.IO..
do-dam.tistory.com
1편은 사실 맛보기 였던것 같다.
아직도 너무 신기한 기술이다. 👍
1편에선 res.send()를 통해 html 문자열을 반환하여 보여주었는데,
이렇게 관리하기엔 힘들테니 이번엔 html파일을 호출해보자 :D
socket.io의 예제 html을 스타일만 변경했다. html코드는 요로코롬...!
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
.chat{position:relative;border:1px solid #ddd;height:500px;}
.chat form{position:absolute;bottom:0;left:0;width:100%;padding:10px;box-sizing:border-box;}
.chat form input[type="text"]{border:0;padding:0 15px;height:35px;line-height:35px;width:calc(100% - 140px);box-sizing:border-box;outline:none;border-bottom:1px solid #ddd;}
.chat form button{border:1px solid #ddd;background-color:#fff;color:#333;width:100px;height:35px;line-height:33px;margin-left:20px;}
#messages{height:calc(500px - 58px);overflow-y:scroll;}
#messages li{}
</style>
</head>
<body>
<div class="chat">
<ul id="messages"></ul>
<form action="">
<input type="text" id="m" autocomplete="off" placeholder="입력해주세요 :D" /><button>전송</button>
</form>
</div>
</body>
</html>
그리고 1편에서 작성했던 index.js의 app.get 부분을 아래와 같이 변경 해주었다.
app.get('/', function(req, res){
// path의 파일을 읽고 해당 내용을 클라이언트로 전송
res.sendFile(__dirname + '/index.html');
});변경한 index.js를 실행시킨후 3000번 포트로 접근하니 위에 만들어주었던 index.html이 열린다!
이제 채팅하는 곳은 만들었으니 본격적으로 socket.io를 이용해보자 :D
socket.io는 두가지 파트가 있다구 한다.
- socket.io : 서버 사용 모듈 ( HTTP와 Node.js 사이 )
- socket.io-client : 브라우저 위에서 사용될 클라이언트 모듈
문서에는 socket.io자동으로 클라이언트가 포함되어 있으니 socket.io만 설치하면 된다구 한다.
socket.io 설치 명령어 > npm install socket.io
.
.
설치 완료 했다면 계속해서 index.js에 코드를 추가해보자 XD
설명은 주석으로 대체 하겠다.
var app = require('express')(); // express라는 모듈을 요청하여 http객체에 담아 핸들링
var http = require('http').createServer(app); // 서버 생성 및 제어
var io = require('socket.io')(http); // http에 socket.io 인스턴스로 초기화
// index.html 반환
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
// connect event
io.on('connection', function(socket){
console.log('user connected');
// disconnect event
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
http.listen(3000, function(){ // http 서버가 포트 3000에서 수신 대기
console.log('listening on *:3000');
});그리고 index.html에서 body전에 io 연결을 위해 아래와 같은 코드를 추가했다.
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>실행 시켜보면 사용자가 들어오고 나가는 여부를 알 수 있다.
좋다..! 이제 메세지를 주고 받을 준비를 해보려고 한다.
chat_server 이벤트를 사용해 서버에게 전송해보자 :)
index.html에는 다음과 같이 서버에 전송하도록 스크립트를 수정했다.
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading ( 페이지 새로고침 막기 )
socket.emit('chat message', $('#m').val()); // "chat message"라는 이벤트 생성
$('#m').val(''); // 보낸 메세지 초기화
return false;
});
});
</script>index.js에는 등록한 chat message 이벤트에 대한 핸들러를 등록해주었다.
io.on('connection', function(socket){
// 메세지 받기
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});여기 까지 사용자가 입력한 값이 콘솔에 찍히는걸 확인 할 수 있다!!
마지막으로 브로드캐스팅하는 방법을 다음편에 이어서 정리하겠다.
너무 길면 보기 싫으니까 !-!
'웹 프로그래밍 > 공부일지' 카테고리의 다른 글
| [ 원페이지 스크롤 + 일반 스크롤 ] 화나서 직접 만든 원페이지 스크롤 2탄 (0) | 2020.03.12 |
|---|---|
| [Node.js] 실시간 멀티 채팅 만들기 3탄 (브로드캐스팅) (2) | 2020.02.23 |
| [Node.js] 실시간 멀티 채팅 만들기 1탄 (1) | 2020.02.14 |
| [ jQuery ] 컬러피커 플러그인 minicolors (0) | 2020.02.13 |
| 인스타그램 그래프 api 검수 완료😭 (47) | 2020.02.07 |