# 일단 server.js파일을 만들어서 cmd창을 키소 server.js 파일이 있는 위치로 이동한다.
# io를 이용할 수 있게 하기 위해서 io를 설치해야 하므로
> npm install io 라고 입력하면 설치가 시작된다.(시간이 조금 걸린다)
이 작업이 끝나면 페이지를 작성할 때 src="/socket.io/socket.io.js">를 추가하여 io를 사용할 수 있게 된다
io는 코드량을 줄이는데 도움을 준다
# 아래 코드를 작업 한다.
# > node server.js 라고 입력해서 server.js파일을 실행한다.
# 인터넷 브라우저를 열고 자신의 ip번호를 치고 포트번호로 9999를 사용한다(ex. 192.168.0.200:9999)
# 그럼 server.js에 의해 정해진 html페이지가 화면에 보이고 화면에서 입력된 값은 server.js에 의해 전송이 가능하다
# 다른 사람이 이 ip로 접속하면 서로간의 채팅이 가능해진다.
********************************************* server.js *********************************************
/*
* 서버측 프로그래밍(1개만 필요)
* 클라이언트html은 여러개 있어도 된다.
*
*/
var http = require('http');
var fs = require('fs');
//socketio 개겣 얻어오기
var socketio = require('socket.io');
//웹서버 생성하기
var server = http.createServer(function(request, response){
//해당 포트에 요청이 왔을 때 응답할 html 페이지 설정
fs.readFile('client.html', function(error, data){
response.writeHead(200, {'Content-Type':'text/html'});
//클라이언트 html에 출력하기
response.end(data);
});
}).listen(9999, function(){
console.log("Server is Running!");
});
//클라이언트와 소켓 연결을 하기 위해
var serverSocket = socketio.listen(server); //서버와 연결된 소켓 객체
//불필요한 로그 제거
//io.set('log level',2);
/*
* 소켓 통신의 종류
* 1. public : 자신을 포함한 모든 클라이언트에 데이터를 전달합니다.
* 2. broadcast : 자신을 제외한 모든 클라이언트에 데이터를 전달합니다.
* 3. private : 특정 클라이언트에게 데이터를 전달합니다.
*
* public => serverSocket.sockets.emit('이벤트명', data);
* broadcast => socket.broadcast.emit('이벤트명', data);
* private => serverSocket.sockets['id'].emit('이벤트명',data);
*/
//서버소켓은 클라이언트의 접속을 기다리고 있다가 클라이언트가 소켓 접속을 하면 'connection' 이벤트가 일어난다.
serverSocket.sockets.on('connection', function(socket){//이 socket이 클라이언트와 연결된 소켓이다.
//cmd에 아이디값 출력해보기
var socketId = socket.id;
console.log("소켓아이디:", socketId);//* + 연결 연산자가 안되서 ,로 대신 해줘야 한다!!
//클라이언트와 연결된 socket 객체가 인자로 들어온다.
socket.on('sendMessage', function(data){
//이벤트가 발생하면 public 통신으로 data를 클라이언트에 제공한다.
serverSocket.sockets.emit('newMessage', data);
})
});
********************************************* client.html *********************************************
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>소켓 채팅 테스트</title>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//서버와 통신할 소켓 객체
var sorket;
window.onload=function(){
//서버와 소켓을 연결합니다.
socket = io.connect();
//서버에서 발생하는 이벤트에 귀 귀울이기
socket.on('newMessage', function(data){
//서버에서 전송된 문자열을 ul의 가장 위의 요소로 추가한다.
$("<li/>").text(data).prependTo($("#chatList"));
});
//이름 입력받기
name = prompt("당신의 이름을 입력하세요!", '이름');
//사용하기 편하도록
$("#text").keyup(function(event){
//엔터키를 눌렀을 때 자동으로 전송되도록 한다.
if(event.which == 13){
send();
}
});
}
//전송 버튼을 눌렀을 때 실행되는 함수
function send(){
//입력한 내용을 읽어온다.
var msg = $("#text").val();
var message = name+" : "+msg
//서버에 이벤트를 발생시켜서 전송한다.
socket.emit("sendMessage", message);
//입력창 초기화
$("#text").val("");
}
</script>
</head>
<body>
<div>
<input type="text" id="text"/>
<button onclick="send()">전송</button>
</div>
<div>
<ul id="chatList">
</ul>
</div>
</body>
</html>
출처 : http://blog.naver.com/khs7515?Redirect=Log&logNo=20156593135
[출처] [Node.js] Node.js로 메세지 주고 받기|작성자 지탄
'Hot Tech Reference > HTML5' 카테고리의 다른 글
| [스크랩] HTML5 Cheat Sheet (0) | 2013.06.25 |
|---|---|
| [스크랩] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓. (0) | 2012.07.25 |
| Node.js (0) | 2012.05.22 |
| Websocket (1) | 2012.04.19 |