파이썬을 구현하기 위해서는 먼저, python과 pip로 websockets 를 설치하셔야합니다.
웹소켓 설치 $ pip install websockets
설치확인 $ pip list
웹소켓 서버 코딩
너무 간단해서 사실 놀랐습니다. websockets.serve 함수에 인자로 각각 '실행메소드', 'ip 혹은 주소', 'port'를 넣어주고, 응답을 대기하는 동안 종료되지 않도록. asyncio.get_event_loop().run_until_complete, asyncio.get_event_loop().run_forever를 이용해 실행해 주시면되겠습니다.
서버는 복잡하지 않도록 응답을 그대로 돌려 주는 에코 서버로 만들었습니다. 소스는 아래와 같습니다.
import asyncio;
import websockets;
port = 10000
async def accept(self, path):
while True:
data = await self.recv()
print("receive:" + data)
send_str = 'echo : ' + data
await self.send(send_str)
print('send => ' + send_str)
print("웹소켓 시작 포트넘버:" + str(port))
start_server = websockets.serve(accept, "localhost", port)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
print("End Service!")
클라이언트 코딩
간단히 html과 javascript를 통해 예제를 만들어 봤습니다. 대체로, websocket.onopen, websocket.onclose 등의 함수를 사용하지만 저는 괄호가 중첩되는 것이 싫어 이벤트 형식으로 만들었습니다.
html 은 일반 채팅과 같은 TCP/IP 프로토콜을 사용하지만, 클라이언에서 서버로 요청을 보내면, 요청에 대한 처리 후 접속을 끊어 버립니다. 그런 이유로 단방향 통신이라하며, 서버에서 원할 때 클라이언트로 메시지를 보낼 방법이 없습니다.
하지만, HTML5에서 웹소켓 개념이 추가되며, 이런 문제를 해결하였습니다. node.js에서 잘 알려진 웹소켓 지원 모듈은 ws 와 socket.io 입니다. 둘다 websocket을 이용할 수 있다는 점은 같지만, 특징이 뚜렸하기 때문에, 사용목적이 달라질 수 있습니다.
ws : 표준 웹소켓을 구현하였습니다. 그래서, 웹 브라우저, 게임을 포함한 앱, 윈도우 프로그램 모든 곳에서 사용할 수 있습니다. 하지만, 구형 웹브라우저나, 웹소켓이 모두 구현되지 않은 곳에서는 잘 동작하지 않을 수 있습니다.
socket.io : 브라우저만을 위한 특화된 방식으로 모듈이 구현되어 있습니다. 그래서 표준 웹소켓이 아니므로, 웹에서만 사용이 가능합니다. 하지만, 웹소켓을 지원하지 않는 브라우저는 polling을 이용해 연결합니다. 즉, 99.99% 브라우저에서 동작합니다.
이 부분은 따로 설명하지 않습니다. ws 사용법을 집중적으로 다루기 위함 입니다. express를 사용해 본 경험이 없으시다면, 참고 문서의 express 구축 ( 링크 ) 페이지를 따라 구축해 주시면 될 것 같습니다.
2. socek.io를 이용한 route 구축.
- socket.io 모듈을 설치 합니다.
$ npm i socket.io
- 웹소켓을 구현 합니다.
그리고 웹소켓을 처리할 모듈파일 webSocket.js 을 적당한 위치에 만들어 줍니다. 모듈 파일을 생성했다면, 아래와 같이 소스를 만들어 줍니다. (각 소스에 대한 설명은 주석을 달아 두었습니다.). socket.io의 특징은 connect, disconnect, error외에 이벤트를 직접 정의 한다는 것 입니다. 즉 어디로 받을 것인지 선택할 수 있으며, 아래소스에서는 ms라는 이벤트를 추가하였습니다.
const SocketIO = require("socket.io");
module.exports = function ( _server ) {
// 소켓 io를 처리할 객체를 생성합니다.
const io = SocketIO( _server, {path: '/socket.io'} );
// 접속 처리 및 해당 클라이언트에 대한 모든 처리를 합니다.
io.on( "connection", function( socket ){
// 접속한 정보를 표시합니다.
const req = socket.request;
const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
console.log( ip + "의 새로운 유저가 접속하였습니다." );
// 접속이 끊어진 경우 처리를 하는 콜백 입니다.
socket.on( "disconnect", function( ){
console.log("접속을 해제 하였습니다.");
});
// 오류가 난 경우 처리를 하는 콜백 입니다.
socket.on( "error", function( error ){
console.log( "error:" + error );
});
// 일반 메시지를 받은 경우의 처리 입니다. (ms 라는 이벤트로 클라이언트가 보낼 때 마다 이 메소드가 호출 됩니다.)
socket.on( "ms", function( data ){
// 클라이언트로 부터 받은 메시지를 표시합니다.
console.log( "클라이언트로 부터 받은 메시지 : " + data );
// 클라이언트에 구현된 echo 이벤트로 메시지를 보내어 줍니다.
socket.emit( "echo", data );
});
});
}
- 구현한 웹소켓을 연결합니다.
그런다음 모듈을 http 서버에 연결해 줍니다. (express 같은 경우 listen을 통해 만들어진 서버, http의 경우 createServer 메소드로 만들어진 서버). 위에 링크된 express 구축을 따라했다면, /bin/www 파일속에 server 객체가 정의 되어 있습니다. 적당한 위치에 아래와 같이 웹소켓을 연결하도록 합니다.
const webSocket = require( "../routes/webSocket" );
webSocket( server );
3. 브라우저를 통해 웹소켓 서버에 접속해 보기.
- 지금까지 구현한 서버 실행.
$ npm start
- 클라이언트 만들고 호출 하기.
테스트할 웹브라우저에 아래 소스를 추가합니다. 웹에서 우리가 만든적 없는 js 파일 "/socket.io/socket.io.js" 파일을 추가하는데, express 서버에 socket.io를 구현하였다면, 자동으로 추가되어 다운로드 받을 수 있습니다. 그리고, 서버와 마찬가지로, 받는 이벤트명을 마음대로 정할 수 있습니다. 특징은 접속을 따로 하거나, 연결을 따로 하지 않습니다. 끊어지면 바로 자동으로 새 접속을 시도합니다. (언제나 연결을 유지 합니다.)
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script src="/socket.io/socket.io.js"></script>
<script>
// 웹소켓 서버를 설정합니다.
var socket = io.connect( "http://localhost:3000" , {path: "/socket.io"} );
socket.on( 'echo', function( data ){
console.log( data );
writeToScreen( "받은메시지:" + data )
});
// 서버로 데이터를 보내기 위한 메소드 입니다.
function sendMessage( )
{
// 서버에 구현된 ms 이벤트로 메시지를 보냅니다.
mss = document.getElementById( "message" ).value;
socket.emit( "ms", mss );
}
// 받은 메시지를 출력합니다.
function writeToScreen(message)
{
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
</script>
<h2>소켓 io 동작을 테스트 하기 위한 node js 입니다.</h2>
<form>
<input id="message" /> <button type="button" onclick="sendMessage();" >전송</button><br>
</form>
<div id="output"></div>
- 브라우저 호출.
브라우저에서 위의 소스를 실행하면, node.js에 아래와 같은 메시지를 볼 수 있습니다. (자동으로 바로연결됨)
그간의 html 통신은 요청에 대한 처리를 한 후 응답을 돌려주는 방식으로 동작했습니다. 우리가 흔히 챗팅 프로그램에서 사용하는 포로토콜인 TCP/IP를 사용했지만, [연결->요청에대한처리->응답->연결끊기] 사이클을 반복하며, 연결을 계속 끊기 때문에, 클라이언트의 요청은 언제든지 전달 할 수 있지만, 서버의 메시지는 클라이언트로 전달할 수 없었습니다.
그래서 나온 것이 웹소켓 이며, 서버의 구현도 간단하며 (직접 구현해도 될 정도), 클라이언트 또한 매우 간결하며, 요즘은 대부분은 웹브라우저에서 지원을 해 줍니다. 이 페이지는 ws 모듈을 이용해 웹브라우저와 node.js간의 간단한 통신을 구현한 예제를 설명하고 있습니다. 간단하지만, 이를 바탕으로 원하는 채팅 모듈을 구현할 수 있으리라 생각이 됩니다.
본 문서를 보려면, node.js 에서 express 서버의 구축 과정을 알고 있어야 합니다. (물론 아래에 관련 링크를 제공합니다.)
이 부분은 따로 설명하지 않습니다. ws 사용법을 집중적으로 다루기 위함 입니다. express를 사용해 본 경험이 없으시다면, 참고 문서의 express 구축 ( 링크 ) 페이지를 따라 구축해 주시면 될 것 같습니다.
2. ws를 이용한 route구축.
ws 모듈을 설치 합니다.
$ npm i ws
그리고 웹 소켓 통신을 처리할 모듈을 구현할 webSocket.js 파일을 만들어 줍니다.
모듈파일을 생성했다면, 아래와 같이 소스를 만들어 줍니다. (각 소스에 대한 설명은 주석을 달아 두었습니다.)
const wsModlue = require( "ws" );
module.exports = function( _server )
{
// 웹소켓 서버를 생성합니다.
const wss = new wsModlue.Server( {server:_server} );
// 클리이언트가 접속했을 때 처리하는 이벤트 메소드를 연결합니다.
wss.on( 'connection', function( ws, req ){
// 사용자의 ip를 파악합니다.
let ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
console.log( ip + "아이피의 클라이언트로 부터 접속 요청이 있었습니다." );
// 메시지를 받은 경우 호출되는 이벤트 메소드 입니다.
ws.on('message', function( message ){
// 받은 메시지를 출력합니다.
console.log( ip + "로 부터 받은 메시지 : " + message );
// 클라이언트에 받은 메시지를 그대로 보내, 통신이 잘되고 있는지 확인합니다.
ws.send( "echo:" + message );
});
// 오류가 발생한 경우 호출되는 이벤트 메소드 입니다.
ws.on('error', function(error){
console.log( ip + "클라이언트와 연결중 오류 발생:" + error );
})
// 접속이 종료되면, 호출되는 이벤트 메소드 입니다.
ws.on('close', function(){
console.log( ip + "클라이언트와 접속이 끊어 졌습니다." );
})
});
}
그런 다음 모듈을 http 서버에 연결해 줍니다. (express같은 경우 listen을 통해 만들어진 서버, http의 경우 createServer 메소드로 만들어진 서버). 위에 링크된 express 구축을 따라 했다면, /bin/www 파일 속에 server 객체가 정의 되어 있습니다. 적당한 위치에 아래와 같이 웹소켓을 연결하도록 합니다.
const webSocket = require("../routes/webSocket");
webSocket( server );
웹소켓은 익스프레스 서버와 port를 공유하므로, 따로 포트를 지정할 필요가 없습니다.
3. 브라우저를 통해 웹소켓 서버에 접속해 보기.
브라우저에서 웹소켓 이용 방법은 위의 참고 문서 [javascript 웹소켓 클라이언트 (링크)] 문서를 읽어 주세요. 이 페이지는 node js를 통한 웹소켓 서버 구축만 집중적으로 설명을 합니다.
웹소켓을 테스트하기 위한 웹 브라우저는 따로 만들지 websocket공식 사이트에 구현된 챗팅 클라이언트 페이지를 이용합니다. 웹소켓 기능을 구현할 때 일단 websocket 공식 사이트에 구헌된 챗팅 클라이언트 페이지를 이용해 구축하고, 클라이언트 부분은 이렇게 완성된 웹소켓 서버와 연결하는 식으로 구축합니다. 2가지를 한 꺼번에 구축하면, 오류 발생시 어느쪽이 문제인지 알 기 힘듭니다. 이렇게 단계별로 만든다면, 약간은 쉽게 구현이 가능합니다.
먼저 지금 까지 구현 한 서버를 동작 시켜 줍니다.
$ npm start
그 다음, 클라이언트로 이용할 https://www.websocket.org/echo.html 페이지로 접속합니다. 그러면 아래와 같은 화면을 볼 수 있습니다. 여기서, 로케이션 창에 주소를 입력하고 connect 버튼을 누릅니다. 이라고 입력 합니다. 위의 참고 문서 [express 구축] 을 보고 서버를 구축했다면, 주소는 ws://localhost:3000 이 됩니다.
그럼 아래와 같이 접속이 됩니다.
서버 또한 클라이언트로 부터 연결이 있었음을 알 수 있는 로그를 표시합니다.
다음 웹브라우저에서 서버로 메시지를 보내 보겠습니다. Message 항목에 적당한 메시지를 입력하고, Send 버튼을 누릅니다.
HTML5와 웹소켓이 나오기 전까지, 홈페이지는 그저 요청에 대한 서버 결과를 돌려 주는 형태로만 제작이 가능했습니다. 물론 여러가지 방법을 통해, 비슷한 형태로 제작이 가능했지만, 근본적인 대책은 아니였습니다. TCP/IP 통신을 하지 못해, 챗팅 게임등의 서버로 사용하기 힘들었지만, 웹소켓이 나온 이후로는 매우 편리해 졌습니다.
거기다, 쉬운 방식으로 구현히 가능해, 적어도 한 시간 이내에 기능을 구현하는 것이 가능합니다. 제가 TCP, UDP통신을 모두 구현해 보았지만, 웹소켓만큼 구현히 쉽지는 않았습니다.
이 문서에는 javascript를 통한, 클라이언트를 구현해 보도록 하겠습니다. websocket.org 라는 사이트에서 웹소켓 에코 서버를 지원해 주므로, 클라이언트 부터 만들고, 이 클라이언트를 바탕으로 서버를 만들면 서버 또한 깔금하게 만들수 있습니다.
공식 사이트에 가면, 샘플에 대한 구현 방법과 에코서버를 어떻게 테스트 하는지 잘 설명하고 있습니다.
먼저, 공식 사이트로 이동합니다. ( 링크 ) 그럼, 아래와 같이 페이지가 나오는데 화면 중앙의 GET STARTED 버튼을 눌러 주도록 합니다.
그럼 에코 테스트 페이지가 나옵니다. 화면 중앙의 녹색 This browser supports WebSocket 이라는 문구는, 여러분이 사용하는 브라우저가 웹소켓을 지원하고 있음을 알려주고 있습니다. 요즘은 거의 모든 브라우저가 웹소켓을 지원하지만, 얼마전까지만 해도 그렇지 않았습니다.
원할한 서비스를 위해 여러분도 여려분의 홈페이지에 방문자의 브라우저가 웹소켓을 지원하는지 여부를 알려줄 필요가 있을 지 모릅니다. (구현은 간단합니다.) location: 부분에 입력된 값은 테스트를 위한 에코서버의 주소 입니다. 일단 그대로 두고, 컨넥트 버튼을 눌러 보도록 하겠습니다.
그럼 에코 서버와 연결이 되어 Log에, CONNECTED라고 표시됩니다.
메시지 부분에 적당한 메시지를 입력하고, Send를 눌러 보도록 하겠습니다.
그럼 아래와 같이 보낸 메시지를 서버가 그대로 돌려 줍니다.
마지막으로 서버와의 접속을 끊어주는 Disconnect 를 눌러 주도록 합니다.
그럼 아래와 같이 DISCONNECTED 라는 로그가 남기며 접속이 종료됩니다.
간단한 기능이지만, 챗팅 및 게임을 구현하기에 충분한 역할을 하고 있는 것을 확인할 수 있습니다. 하지만, 이렇게 구현하는데, 코드 몇 줄으면 끝이난다는 것이 더 매력적입니다.
2. 소스 보기.
위의 페이지에서 아래로 스크로를 해 보면, 위 코드에 대해서 간단히 구현해 놓은 코드를 제공합니다.
워낙 소스가 잘되어 있어서, 따로 무언가를 할 필요가 없어서, 공식예제에 주석만 달아 아래에 소스를 공개합니다.
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
var wsUri = "wss://echo.websocket.org/";
var output;
// DOM 이 형성되었을 때 가장 먼저 호출되는 메소드 입니다.
function init()
{
output = document.getElementById("output");
testWebSocket();
}
// 서버와의 접속을 시작하는 메소드 입니다.
function testWebSocket()
{
// 지정한 주소로 웹소켓 연결을 시도하는 코드 입니다.
websocket = new WebSocket(wsUri);
// 웹소켓의 각 이벤트에 대한 처리 메소드들을 연결한 코드들 입니다.
// 위의 호출 이후 이벤트를 연결해도 문제가 없는 이유는 위의 웹소켓은 콜백 처리를 하게되는데,
// 콜백으로 호출되는 메소드들은 무조건 다음 프레임에 처리됩니다. 그래서 뒤에 호출해도 됩니다.
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
// 서버와 접속이 완료되었을 때 호출되는 메소드 입니다.
function onOpen(evt)
{
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
// 어떤 이유로든 서버와의 접속이 종료되었을 때, 호출되는 메소드 입니다.
function onClose(evt)
{
writeToScreen("DISCONNECTED");
}
// 메시지를 받았을 때, 처리하는 메소드 입니다.
function onMessage(evt)
{
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
websocket.close();
}
// 에러가 발생했을 때, 처리 메소드 입니다.
function onError(evt)
{
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
// 서버로 메시지를 보냅니다.
function doSend(message)
{
writeToScreen("SENT: " + message);
websocket.send(message);
}
// 로그에 메시지를 남겨 줍니다.
function writeToScreen(message)
{
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
// 브라우저의, DOM 구성이 완료되면, 가장 먼저 실행할 메소드를 지정하는 메소드 입니다.
// (즉, 가장 먼저 실행될 메소드 지정).
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id="output"></div>
웹은 기본적으로, TCP/UDP 등의 소켓 통신을 할 수 없습니다. 그로인해, 웹 온라인 게임을 제작하는 것은 불가능했었습니다. 하지만, HTML5와 웹소켓의 등장으로, 웹에서도 게임을 제작할 수 있게 되었습니다. 이 문서는 c#으로 웹소켓을 구현하는 방법을 설명합니다.
그리고 주 메뉴에서, 터미널을 열어 줍니다. 맥 미리 보기지만, 공식 문서를 보니 메뉴가 같은 위치에 있습니다. (즉, 윈도우도 같은 위치에 있습니다.)
그럼 아래와 같이 화면 하단에 터미널이 나타 납니다. 저는 맥이라, 저렇게 경로가 나타나지만, 윈도우는 또 윈도우 경로가 표시됩니다.
터미널에 아래와 같이 doetnet new consol 을 입력합니다. 그럼 아래와 같이 프로젝트가 생성됩니다.
doetnet new consol
이렇게 정상적으로 되었다면, c# 프로젝트가 생성된 것을 확인할 수 있습니다.
터미널에서 동작하는 콘솔 프로그램의 프로젝트가 생성된 것인데, 프로젝트의 처음 시작 부분은 Program.cs 파일의 Main 메소드 입니다. 왼쪽의 Program.cs 파일을 눌러 파일의 내용을 확인해 보면 다음과 같습니다.
이제 프로젝트가 잘 생성되었는지 확인할 차례인데, 터미널 내용을 먼저 지워 줍니다. (여기서는 새 터미널을 열었습니다.)
터미널에 dotnet run 을 입력하면, 로그가 실행되고 종료합니다. (컴파일 시간이 조금 걸릴 수 있습니다.).
dotnet run
디버깅을 위해서는, 디버그 > 시작 을 눌러 주면됩니다.
처음에는 디버그 구성이 되어있지 않아, 구성을 위해 개발환경을 묻는데, .net core 를 눌러 줍니다.
그리고 다시 디버그 시작을 눌러 주면 아래와 같이 DEBUG CONSOLE 에 로그가 표시되는 것을 확인할 수 있습니다.
3. ReadLine 이용 바로 종료되지 않게 하기.
위에서 실행을 해 보면, 콘솔앱이 시작되자 마자 바로 종료되는 것을 확인할 수 있을 것 입니다. 우리는 클라이언트의 응답을 기다리기 위해, 계속 대기 상태로 들어가야하는데, 이렇게 되어 있다면, 대기가 되기 전 메인 쓰레드가 종료되어 바로 종료되거나, 좀비 프로세스가 되어, 이전 좀비 프로세스로가 물고 있는 포트를 사용하지 못할 가능성이 있습니다.
이 것을 막기 위해, 입력값을 받을 수 있도록 해 두면, 입력값을 줄 때까지, 콘솔이 대기 상태가 됩니다. 터미널에서 실행하면, 터미널에 키를 입력하면 종료되고, 디버그로 실행하면 입력을 받지 않아, 계속 실행상태가 될 수 있습니다.
아래와 같이 코드를 약간 수정하고, 디버그를 실행시켜 봅니다.
class Program
{
static void Main(string[] args)
{
Console.WriteLine("웹 소켓 서버를 시작합니다.");
// 엔터를 입력하면 앱이 종료됩니다.
Console.ReadLine();
}
}
그럼 메시지를 뱉고 종료는 되지 않고 계속 대기 상태에 빠집니다.
상단의 디버그 메뉴에서 정지를 시켜줍니다.
자 그럼 서버를 구축하기 위한 준비가 완료되었습니다.
4. 코드 작성하기.
아래와 같이 파일 추가 버튼을 눌러줍니다. (마우스를 해당 위치로 가져가야 나타 납니다.)
그리고, wsServer.cs 라고 wsServer 클래스용 파일을 만들어 줍니다.
생성자 부분은 소켓을 생성하고, 클라이언트 접속을 기다리는 코드를 추가합니다.
그리고, 클라이언트가 접속했을 때 처리하는 메소드를 정의 합니다. 현재는 클라이언트 소켓을 따로 저장하거나 하지 않습니다. 이유는, 클라이언트에서 단발성으로 데이터를 보내고 끊어지도록되어 있기 때문입니다. 여러분은 필요에 따라, 구현하시면되겠습니다.
*현재의 wsServer.cs 파일 코드.
using System;
using System.Net;
using System.Net.Sockets;
namespace vsWebSocketServer
{
class wsServer
{
// 초기화 시 입력 받는 값들.
public string addr = "";
public int port = 0;
// 동작에 사용되는 멤버 변수들.
TcpListener listner = null;
TcpClient client = null;
// 생성자를 만들어 주도록 합니다.
public wsServer( string _addr, int _port )
{
// 입력 받은 값들을 저장해 줍니다.
addr = _addr;
port = _port;
listner = new TcpListener( IPAddress.Parse( addr ), port );
listner.Start();
Console.WriteLine( "웹소켓 서버를 오픈하도록 합니다." );
listner.BeginAcceptTcpClient( OnServerConnect, null);
Console.WriteLine( "클라이언트와의 접속을 기다립니다." );
}
// 서버의 접속이 들어 왔을 때 처리하는 메소드 입니다.
void OnServerConnect( IAsyncResult ar )
{
client = listner.EndAcceptTcpClient( ar );
Console.WriteLine( "한 클라이언트가 접속했습니다." );
// 클라이언트의 접속을 다시 대기.
listner.BeginAcceptTcpClient( OnServerConnect, null);
}
}
}
그리고, Program.cs 파일도 127.0.0.1, 80 번 포트로 wsServer 클래스 파일을 호출 할 수 있도록 해당 내용을 추가합니다. 아래 코드는 Program.cs 파일 전체지만, 실제, wsSever ws = new wsServer("127.0.0.1", 80); 한줄만 추가하였습니다.
using System;
namespace vsWebSocketServer
{
class Program
{
static void Main(string[] args)
{
Console.WriteLine("웹 소켓 서버를 시작합니다.");
wsServer ws = new wsServer( "127.0.0.1", 8181 );
// 엔터를 입력하면 앱이 종료됩니다.
Console.ReadLine();
}
}
}
그리고, websocketclient.html 파일도, 우리의 로컬 웹소켓 서버를 호출할 수 있도록, 주소를 변경해 줍니다.
이제 서버 부부분을 디버깅 합니다.
그럼 코드가 디버깅 되고, 아래처럼 클라이언트의 응답을 기다립니다.
그럼 websocketclient.html 파일을 실행해 봅시다. 그럼 미처 다 실행되지 않고, 아래 처럼 서버의 응답을 기다립니다.
우리 서버쪽을 보면, 클라이언트가 접속했음을 확인할 수 있는 로그가 뜹니다.
클라이언트를 몇 번 새로고침 해 보면, 클라이언트가 계속 접속을 시도하는 것을 확인할 수 있습니다.
여기 까지 왔다면 일단 웹소켓으로 접속이 된 것으로 이후는 큰 문제를 발생시키지 않습니다. 이제 서버를 종료 시켜 줍니다.
연결을 처리하기 위한 코드가 필요한데, wsServer 클래스에, onAcceptReader( IAsyncResult ) 메소들를 추가해 줍니다. 응답을 돌려주는 부분은 RFC 6455 규격이 정해져 있습니다.
void onAcceptReader( IAsyncResult ar )
{
// 받은 데이터의 길이를 확인합니다.
int receiveLength = clientStream.EndRead( ar );
// 받은 데이터가 없는 경우는 접속이 끊어진 경우 입니다.
if( receiveLength <= 0 )
{
Console.WriteLine( "접속이 끊어졌습니다." );
return;
}
// 받은 메시지를 출력합니다.
string newMessage = Encoding.UTF8.GetString( readBuffer, 0, receiveLength );
Console.WriteLine(
string.Format("받은 메시지:{0}\n", newMessage)
);
// 첫 3문자가 GET으로 시작하지 않는 경우, 잘못된 접속이므로 종료합니다.
if( !Regex.IsMatch( newMessage, "^GET" ) )
{
Console.WriteLine( "잘못된 접속 입니다." );
client.Close();
return;
}
// 클라이언트로 응답을 돌려 줍니다.
const string eol = "\r\n"; // HTTP/1.1 defines the sequence CR LF as the end-of-line marker
// 보낼 메시지.
string resMessage = "HTTP/1.1 101 Switching Protocols" + eol
+ "Connection: Upgrade" + eol
+ "Upgrade: websocket" + eol
+ "Sec-WebSocket-Accept: " + Convert.ToBase64String(
System.Security.Cryptography.SHA1.Create().ComputeHash(
Encoding.UTF8.GetBytes(
new Regex("Sec-WebSocket-Key: (.*)").Match(newMessage).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
)
)
) + eol
+ eol
;
// 보낸 메시지를 출력해 봅니다.
Console.WriteLine(
string.Format("보낸 메시지:{0}\n", resMessage)
);
// 메시지를 보내 줍니다.
Byte[] response = Encoding.UTF8.GetBytes( resMessage );
clientStream.Write(response, 0, response.Length);
}
그리고, 기존의 클라이언트가 접속했을 때, 코드를 각각확인할 수 있습니다. 접속처리를 하는 부분을 아래와 같이 처리하도록 합니다.
void OnServerConnect( IAsyncResult ar )
{
client = listner.EndAcceptTcpClient( ar );
Console.WriteLine( "한 클라이언트가 접속했습니다." );
// 클라이언트의 접속을 다시 대기.
listner.BeginAcceptTcpClient( OnServerConnect, null);
// 현재의 클라이언트로 부터 데이터를 받아 옵니다.
clientStream = client.GetStream();
clientStream.BeginRead( readBuffer, 0, readBuffer.Length, onAcceptReader, null );
}
서버를 다시 디버깅해 아래처럼 대기 상태로 놓습니다.
그리고, websocketclient.html 파일을 새로고침 하면, 아래 처럼, 접속이 완료 되고 메시지를 보내는 것 까지 확인이 됩니다.
받은 로그를 보면, 또 아래와 같은 메시지가 나옵니다. 중요한 부분은 Sec-WebSocket-Key 부분입니다. 클라이언트가 매번 바꿔 보내 줍니다. 이 값을 활용해 데이터 보낼때 사용합니다.
이제 데이터 받는 부분을 추가해 봅니다. 종료는 한번에 처리 했습니다.
void onEchoReader( IAsyncResult ar )
{
// 받은 데이터의 길이를 확인합니다.
int receiveLength = clientStream.EndRead( ar );
// 받은 데이터가 6인 경우는 종료 상태 일 뿐이므로, 종료 데이터를 보내고 우리도 접속을 종료합니다.
if( receiveLength == 6 )
{
Console.WriteLine( "접속 해제 요청이 와 접속을 종료합니다." );
client.Close();
return;
}
// 받은 데이터가 없는 경우는 접속이 끊어진 경우 입니다.
if( receiveLength <= 0 )
{
Console.WriteLine( "접속이 끊어졌습니다." );
return;
}
BitArray maskingCheck = new BitArray( new byte[]{ readBuffer[1] } );
int receivedSize = (int)readBuffer[1];
byte[] mask = new byte[]{readBuffer[2], readBuffer[3], readBuffer[4], readBuffer[5]};
if( maskingCheck.Get(0) )
{
Console.WriteLine( "마스킹 되어 있습니다." );
receivedSize -= 128; // 마스킹으로 인해 추가된 값을 빼 줍니다.
}
else
{
Console.WriteLine( "마스킹 되어 있지 않습니다." );
}
// 문자열을 길이를 파악합니다.
Console.WriteLine( "받은 데이터 길이 비트 : {0}", receivedSize );
Console.WriteLine( "받은 데이터 길이 : {0}", receiveLength );
// 받은 메시지를 디코딩해 줍니다.
byte[] decodedByte = new byte[ receivedSize ];
for( int _i = 0; _i < receivedSize; _i++ )
{
int curIndex = _i + 6;
decodedByte[_i] = (byte)( readBuffer[curIndex] ^ mask[_i % 4] );
}
// 받은 메시지를 출력합니다.
// string newMessage = Encoding.UTF8.GetString( readBuffer, 6, receiveLength - 6 );
string newMessage = Encoding.UTF8.GetString( decodedByte, 0, receivedSize );
Console.WriteLine(
string.Format("받은 메시지:{0}", newMessage)
);
string sendSource = "이 문자열이 보이면 성공!";
byte[] sendMessage = Encoding.UTF8.GetBytes( sendSource );
// 보낼 메시지를 만들어 줍니다.
List< byte > sendByteList = new List<byte>();
// 첫 데이터의 정보를 만들어 추가합니다.
BitArray firstInfor = new BitArray(
new bool[]{
true // FIN
, false // RSV1
, false // RSV2
, false // RSV3
// opcode (0x01: 텍스트)
, false
, false
, false
, true
}
);
byte[] inforByte = new byte[1];
firstInfor.CopyTo( inforByte, 0 );
sendByteList.Add( inforByte[0] );
// 문자열의 길이를 추가합니다.
sendByteList.Add( (byte)sendMessage.Length );
// 실제 데이터를 추가합니다.
sendByteList.AddRange( sendMessage );
// 보낸 메시지를 출력해 봅니다.
Console.WriteLine(
string.Format("보낸 메시지:\n{0}", sendSource)
);
// 받은 메시지를 그대로 보내 줍니다.
clientStream.Write(sendByteList.ToArray(), 0, sendByteList.Count);
Console.WriteLine( string.Format( "보낸 메시지 길이:{0}", sendByteList.Count ) );
// 또 다음 메시지를 받을 수 있도록 대기 합니다.
clientStream.BeginRead( readBuffer, 0, readBuffer.Length, onEchoReader, null );
}
그리고, 클라이언트 접속 처리를 하던, onAcceptReader 메소드 끝에, 아래와 같이 한줄을 추가해, 클라이언트의 응답을 대기하도록 합니다.
그리고, 클라이언트를 시작하고, 웹페이지를 리로드하면, 다음과 같은 화면을 볼 수 있습니다.
이 코드에서 중요한 점은 메시지를 보낼 때의 서식 입니다. 아래와 같은데, 비트 다위로 표시되어 있습니다.
0번 비트는 이게 메시지 끝인지 여부인데, 1이면, 끝 0 이면, 문서를 나눠 보냈으며, 다 오려면 기다려야 함을 표시합니다.
1~3번 비트는 사용하지 않습니다.
4~7번 비트는 이 데이터의 속성을 나타냅니다. 이 4비트를 부호없는 정수로 읽어, text =1 , Binary = 2, Disconnect = 8, Ping = 9, Pong = 10 입니다.
핑은 현재 상대가 연결중인지 확인하기 위한 데이터이며, 받은 쪽은 받은 데이터 그대로 퐁을 보내야 합니다.
8 번 비트는 마스킹 되어 있는지 여부, 9~15 번 비트는 부호없는 정수로 값을 읽어 데이터 길이 입니다. 125인 경우 그대로 길이이며, 126인경우, 뒤에 2바이트를 부호없는 정수로 읽어 문자열의 길이를 나타내며, 127인 경우, 뒤에 4바이트를 부호없는 정수로 읽어 문자열의 길이를 나타냅니다.
앞서 8번째 비트가 마스킹 되어 있는지 의 비트라고 했는데, 만약 마스킹되어 있다면, 길이 이후 4바이트는 마스크 값, 이 후가 데이터 입니다. 마스킹 되어 있지않다면, 바로 데이터 입니다.
마스크 되어 있는 경우는 마스크를 해제 해야 하며 아래의 공식으로 마스크를 해제 할수 있습니다.
for (int i = 0; i < encoded.Length; i++) {
decoded[i] = (Byte)(encoded[i] ^ mask[i % 4]);
}
5. 모든 코드.
* Program.cs
class Program
{
static void Main(string[] args)
{
Console.WriteLine("웹 소켓 서버를 시작합니다.");
wsServer ws = new wsServer( "127.0.0.1", 8181 );
// 엔터를 입력하면 앱이 종료됩니다.
Console.ReadLine();
}
}
* wsServer.cs
class wsServer
{
// 초기화 시 입력 받는 값들.
public string addr = "";
public int port = 0;
// 읽기에 사용되는 값들.
NetworkStream clientStream = null;
byte[] readBuffer = new byte[500000];
// 동작에 사용되는 멤버 변수들.
TcpListener listner = null;
TcpClient client = null;
// 생성자를 만들어 주도록 합니다.
public wsServer( string _addr, int _port )
{
// 입력 받은 값들을 저장해 줍니다.
addr = _addr;
port = _port;
listner = new TcpListener( IPAddress.Parse( addr ), port );
listner.Start();
Console.WriteLine( "웹소켓 서버를 오픈하도록 합니다." );
listner.BeginAcceptTcpClient( OnServerConnect, null);
Console.WriteLine( "클라이언트와의 접속을 기다립니다." );
}
// 서버의 접속이 들어 왔을 때 처리하는 메소드 입니다.
void OnServerConnect( IAsyncResult ar )
{
client = listner.EndAcceptTcpClient( ar );
Console.WriteLine( "한 클라이언트가 접속했습니다." );
// 클라이언트의 접속을 다시 대기.
listner.BeginAcceptTcpClient( OnServerConnect, null);
// 현재의 클라이언트로 부터 데이터를 받아 옵니다.
clientStream = client.GetStream();
clientStream.BeginRead( readBuffer, 0, readBuffer.Length, onAcceptReader, null );
}
// 클라이언트의 데이터를 읽어 오는 메소드 입니다.
void onAcceptReader( IAsyncResult ar )
{
// 받은 데이터의 길이를 확인합니다.
int receiveLength = clientStream.EndRead( ar );
// 받은 데이터가 없는 경우는 접속이 끊어진 경우 입니다.
if( receiveLength <= 0 )
{
Console.WriteLine( "접속이 끊어졌습니다." );
return;
}
// 받은 메시지를 출력합니다.
string newMessage = Encoding.UTF8.GetString( readBuffer, 0, receiveLength );
Console.WriteLine(
string.Format("받은 메시지:\n{0}", newMessage)
);
// 첫 3문자가 GET으로 시작하지 않는 경우, 잘못된 접속이므로 종료합니다.
if( !Regex.IsMatch( newMessage, "^GET" ) )
{
Console.WriteLine( "잘못된 접속 입니다." );
client.Close();
return;
}
// 클라이언트로 응답을 돌려 줍니다.
const string eol = "\r\n"; // HTTP/1.1 defines the sequence CR LF as the end-of-line marker
// 보낼 메시지.
string resMessage = "HTTP/1.1 101 Switching Protocols" + eol
+ "Connection: Upgrade" + eol
+ "Upgrade: websocket" + eol
+ "Sec-WebSocket-Accept: " + Convert.ToBase64String(
System.Security.Cryptography.SHA1.Create().ComputeHash(
Encoding.UTF8.GetBytes(
new Regex("Sec-WebSocket-Key: (.*)").Match(newMessage).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
)
)
) + eol
+ eol
;
// 보낸 메시지를 출력해 봅니다.
Console.WriteLine(
string.Format("보낸 메시지:\n{0}", resMessage)
);
// 메시지를 보내 줍니다.
Byte[] response = Encoding.UTF8.GetBytes( resMessage );
clientStream.Write(response, 0, response.Length);
// 에코 메시지 받기 시작.
clientStream.BeginRead( readBuffer, 0, readBuffer.Length, onEchoReader, null );
}
// 에코 메시지를 받아 오는 부분 입니다.
void onEchoReader( IAsyncResult ar )
{
// 받은 데이터의 길이를 확인합니다.
int receiveLength = clientStream.EndRead( ar );
// 받은 데이터가 6인 경우는 종료 상태 일 뿐이므로, 종료 데이터를 보내고 우리도 접속을 종료합니다.
if( receiveLength == 6 )
{
Console.WriteLine( "접속 해제 요청이 와 접속을 종료합니다." );
client.Close();
return;
}
// 받은 데이터가 없는 경우는 접속이 끊어진 경우 입니다.
if( receiveLength <= 0 )
{
Console.WriteLine( "접속이 끊어졌습니다." );
return;
}
BitArray maskingCheck = new BitArray( new byte[]{ readBuffer[1] } );
int receivedSize = (int)readBuffer[1];
byte[] mask = new byte[]{readBuffer[2], readBuffer[3], readBuffer[4], readBuffer[5]};
if( maskingCheck.Get(0) )
{
Console.WriteLine( "마스킹 되어 있습니다." );
receivedSize -= 128; // 마스킹으로 인해 추가된 값을 빼 줍니다.
}
else
{
Console.WriteLine( "마스킹 되어 있지 않습니다." );
}
// 문자열을 길이를 파악합니다.
Console.WriteLine( "받은 데이터 길이 비트 : {0}", receivedSize );
Console.WriteLine( "받은 데이터 길이 : {0}", receiveLength );
// 받은 메시지를 디코딩해 줍니다.
byte[] decodedByte = new byte[ receivedSize ];
for( int _i = 0; _i < receivedSize; _i++ )
{
int curIndex = _i + 6;
decodedByte[_i] = (byte)( readBuffer[curIndex] ^ mask[_i % 4] );
}
// 받은 메시지를 출력합니다.
// string newMessage = Encoding.UTF8.GetString( readBuffer, 6, receiveLength - 6 );
string newMessage = Encoding.UTF8.GetString( decodedByte, 0, receivedSize );
Console.WriteLine(
string.Format("받은 메시지:{0}", newMessage)
);
string sendSource = "이 문자열이 보이면 성공!";
byte[] sendMessage = Encoding.UTF8.GetBytes( sendSource );
// 보낼 메시지를 만들어 줍니다.
List< byte > sendByteList = new List<byte>();
// 첫 데이터의 정보를 만들어 추가합니다.
BitArray firstInfor = new BitArray(
new bool[]{
true // FIN
, false // RSV1
, false // RSV2
, false // RSV3
// opcode (0x01: 텍스트)
, false
, false
, false
, true
}
);
byte[] inforByte = new byte[1];
firstInfor.CopyTo( inforByte, 0 );
sendByteList.Add( inforByte[0] );
// 문자열의 길이를 추가합니다.
sendByteList.Add( (byte)sendMessage.Length );
// 실제 데이터를 추가합니다.
sendByteList.AddRange( sendMessage );
// 보낸 메시지를 출력해 봅니다.
Console.WriteLine(
string.Format("보낸 메시지:\n{0}", sendSource)
);
// 받은 메시지를 그대로 보내 줍니다.
clientStream.Write(sendByteList.ToArray(), 0, sendByteList.Count);
Console.WriteLine( string.Format( "보낸 메시지 길이:{0}", sendByteList.Count ) );
// 또 다음 메시지를 받을 수 있도록 대기 합니다.
clientStream.BeginRead( readBuffer, 0, readBuffer.Length, onEchoReader, null );
}
}
