고정 헤더 영역
상세 컨텐츠
본문 제목
[ Node.js & Javascript ] WebSocket 서버와 클라이언트 구현하기 - 짧은 예제 / How to create server & client by Websocket?
본문
반응형
Node.js, JavaScript의 Websocket을 이용해 간단한 셀프 채팅 어플리케이션을 구현하겠습니다.
웹소켓의 기본적인 구성은 다음과 같습니다.
굳이 개념치 않다면 안보셔도 무방합니다.
■ ws 설치
$ npm install ws우선 npm 명령어로 ws (web socket) 을 설치하도록 하겠습니다.
■ Server.js
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer( { port: 8900 } ); // 포트번호는 자유롭게 작성해주세요.
wss.on( 'connection', function(ws){
console.log("connected");
// 클라이언트가 메시지를 전송했을 때 수신하여 다시 보내는 과정.
ws.on( 'message', function(msg){
console.log("msg[" + msg + "]" );
ws.send( msg );
});
});포트번호(port)는 본인이 사용하는 포트번호를 지정하면 됩니다.
그리고 구동하는 방법은 터미널에서
$ node server.js로 js파일을 구동시킵니다.
■ Client.html
html파일이던 php파일이던 상관없습니다. 중요한건 javascript로 한다는 것이니까요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input id="Send" type="text" autofocus> <!--메시지 작성 영역-->
<button type="button" onclick="sendMessage();" >Send</button> <!--전송버튼-->
</form>
<div id="Recv"></div> <!-- 보낸 메시지가 기록되는 곳 -->
<script>
$( document ).ready( function() {
var txtRecv = $('#Recv');
ws = new WebSocket("ws://localhost:8900");
// websocket 서버에 연결되면 연결 메시지를 화면에 출력한다.
ws.onopen = function(e){
txtRecv.append( "connected<br>" );
};
// websocket 에서 수신한 메시지를 화면에 출력한다.
ws.onmessage = function(e){
txtRecv.append( e.data + "<br>" );
};
// websocket 세션이 종료되면 화면에 출력한다.
ws.onclose = function(e){
txtRecv.append( "closed<br>" );
}
});
// 사용자가 입력한 메시지를 서버로 전송한다.
function sendMessage() {
var txtSend = $('#Send');
ws.send( txtSend.val() );
txtSend.val( "" );
txtSend.focus()
}
</script>
</body>
</html>■ 결과
· 서버 구동 -> 연결 -> 페이지 접속마다 터미널에 "connected" 라는 로그가 찍힙니다.
· 메시지를 작성하고 버튼을 통해 전송하였을 때,
■ 결론
-> 몇가지 보완할 내용이 존재하긴 하다.
1. jQuery로 작성하였다는 점.
-> 필자는 jQuery를 선호하지 않는다.
비동기통신 위주로 사용하는 스타일인데, 예전에는 ajax 사용할 때 사용했지만,
요즘은 axios 위주로 사용하기 때문에 이마저도 잘 사용하지 않는다.
2. 사소한 버그가 있다.
-> 메시지를 작성하고 송출하였을 때, 해당 메시지가 웹페이지에 제대로 출력이 되지 않고,
[ Object Object ] [ Blob ] 이런식으로 작성되더라.
-> e.data를 통해 해당 내용을 append 시켜 작성하였는데, 아무래도 해당 node 자체가 입력이 된것이라 판단하다.
-> 해결방법으로 <p> 를 하나 생성해서 해당 내용을 생성하여 삽입할 수 있다.
3. 뭐 그냥.. 그렇다고..
참고
[JavaScript] WebSocket echo 클라이언트/서버 예제
WebSocket 기반 echo 서버를 node.js 기반으로 개발하는 방법은 다음과 같습니다. 1. ws 패키지 설치 아...
blog.naver.com
댓글 영역