최근 프로젝트 요구로 인해 Nodejs Background Application WebSocket에서 널리 사용되는 프레임 워크 인 Nodejs, Socket.io의 WebSocket 구현을 연구했습니다.
준비
1. Socket.io를 설치하고 명령 NPM Socket.io를 사용하십시오.
2. Windows Systems의 경우 Socket.io가 설치되면 VC 코드가 컴파일되므로 VC 컴파일 환경이 필요합니다.
게임의 기본 원칙
1. 서버는 클라이언트의 연결을 듣습니다
2. 클라이언트 연결이 성공하면 바인딩 페이지가 마우스 이벤트를 이동하고 현재 좌표가 서버로 전송됩니다.
3. 서버는 글로벌 좌표 객체를 저장하고 클라이언트의 고유 번호를 키 값으로 사용합니다.
4. 새로운 연결이 오면 좌표를 다른 클라이언트에게 방송합니다.
5. 클라이언트가 연결이 끊어지면 서버는 좌표 정보를 삭제하여 다른 클라이언트에게 방송합니다.
서버 코드 구현을 시작합니다
scoket.io는 서버 모니터링을 설정하면 업그레이드 프로토콜을 처리하기 위해 HTTP 연결에 의존해야하므로 HTTP 모듈도 필요합니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var http = require ( 'http'),
io = 요구 사항 ( 'socket.io');
var app = http.createserver (). 듣기 (9091);
var ws = io.listen (app);
그런 다음 글로벌 좌표 객체를 정의하십시오
코드 사본은 다음과 같습니다.
var posts = {};
클라이언트의 연결을 듣고 새로운 브로드 캐스트 기능을 추가하십시오 (실제로는 소켓.io와 함께 제공되는 브로드 캐스트 방법 io.sockets.broadcast.emit)을 사용할 수 있으며 핵심 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
ws.on ( 'Connection', function (client) {
// 방송 기능
var broadcast = function (msg, cl) {
for (ws.sockets.sockets의 var k) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .id! = cl.id) {
ws.sockets.sockets [k] .emit ( 'position.change', msg);
}
}
}
};
console.log ( '/033 [92m은 새로운 연결이 있습니다 :/033 [39m', posts);
// 클라이언트 연결이 성공하면 다른 클라이언트의 좌표 정보가 전송됩니다.
client.emit ( 'position.change', post);
// 클라이언트가 메시지를 보냅니다
client.on ( 'position.change', function (msg) {
// 현재 클라이언트의 메시지는 좌표 메시지입니다
위치 [client.id] = msg;
// 다른 모든 클라이언트에게 메시지를 방송합니다
방송({
유형 : '위치',
게시물 : msg,
ID : client.id
}, 고객);
});
// 클라이언트를 닫는 연결 메시지를받습니다
client.on ( 'close', function () {
Console.log ( 'Close!');
// 클라이언트를 삭제하고 다른 클라이언트에 알립니다
위치 삭제 [client.id];
// 다른 모든 클라이언트에게 메시지를 방송합니다
방송({
유형 : '분리',
ID : client.id
}, 고객);
});
// 연결을 끊습니다
client.on ( '연결 끊기', function () {
Console.log ( 'Displosnect!');
// 클라이언트를 삭제하고 다른 클라이언트에 알립니다
위치 삭제 [client.id];
// 다른 모든 클라이언트에게 메시지를 방송합니다
방송({
유형 : '분리',
ID : client.id
}, 고객);
})
// 클라이언트 예외 처리를 정의합니다
client.on ( 'error', function (err) {
console.log ( 'error->', err);
})
});
위의 코드를 분석하는 핵심 사항은 다음과 같습니다
1. 새 클라이언트가 성공적으로 연결되고 다른 클라이언트의 좌표 정보가 전송됩니다.
2. 클라이언트가 좌표 정보를 업데이트하면 다른 클라이언트에 알립니다.
3. 클라이언트는 다른 클라이언트를 연결하고 통지합니다
4. 방송 메시지 유형은 좌표 수정 및 좌표 제거로 나뉩니다.
클라이언트 HTML 페이지를 작성하십시오
socket.io는 사용자 정의 프레임 워크이므로 클라이언트는 socket.io.js를 참조해야합니다. 이 JS는 Socket.io 모듈에서 찾을 수 있습니다. 경로는 일반적으로 node_modules/socket.io/node_modules/socket.io-client/dist입니다. 합병 및 압축에는 두 가지 버전이 있습니다. 개발 중에 병합 버전을 사용할 수 있습니다.
전체 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> socket.io 여러 사람의 동시 온라인 상호 작용의 예 </title>
<meta charset = "utf-8">
</head>
<body>
<script type = "text/javaScript"src = "socket.io.js"> </script>
<script type = "text/javaScript">
var ws = io.connect ( 'http : // localhost : 9091/');
var isfirst;
ws.on ( 'connect', function () {
Console.log (WS);
// 구속력있는 MouseMove 이벤트를 시작합니다
document.onmouseMove = function (ev) {
if (ws.socket.transport.isopen) {
ws.emit ( 'position.change', {x : ev.clientx, y : ev.clienty});
}
}
})
ws.on ( 'position.change', function (data) {
// 동시에 온라인으로 시작합니다
if (! isfirst) {
isfirst = true;
// 첫 번째 메시지는 다른 모든 클라이언트의 좌표를받는 것입니다.
for (data in data) {
이동 (i, 데이터 [i]);
}
}또 다른{
// 그렇지 않으면 연결이 끊어진 메시지이거나 업데이트되는 메시지입니다.
if ( '위치'== data.type) {
이동 (data.id, data.post);
}또 다른{
제거 (data.id);
}
}
})
ws.on ( 'error', function () {
console.log ( 'error :', ws);
ws.disconnect ();
})
함수 이동 (id, pos) {
var ele = document.querySelector ( '#cursor_' + id);
if (! ele) {
// 존재하지 않으면 생성됩니다.
ele = document.createelement ( 'IMG');
ele.id = 'cursor_' + id;
ele.src = 'img/cursor.png';
ele.style.position = '절대';
document.body.appendChild (ELE);
}
ele.style.left = pos.x + 'px';
ele.style.top = pos.y + 'px';
}
함수 제거 (id) {
var ele = document.querySelector ( '#cursor_' + id);
ele.parentNode.RemoveChild (ele);
}
</스크립트>
</body>
</html>
페이지의 img/cursor.png는 여기에서 찾을 수 있습니다, cursor.png, 여기에는 다른 많은 마우스 아이콘이 있습니다. 프론트 엔드의 원리는 비교적 간단합니다. 간단한 분석은 다음과 같습니다
1. 연결이 성공하면 페이지에 MouseMove 이벤트를 바인딩하고 새 좌표 메시지를 보냅니다.
2. 메시지 유형에 따라 메시지를 받았는데 다른 클라이언트 메시지를 수정하거나 다른 클라이언트 메시지를 제거해야합니까?
3. 다른 클라이언트 커서 아이콘 추가 정의 및 커서 아이콘 제거
4. 클라이언트 예외 메시지를 처리하고 서버가 좌표 정보를 제거 할 수 있도록 연결을 추가하십시오.
실행 예제
1. 서버 코드를 io_multigame.js로 저장하십시오
2. 클라이언트 코드를 io_multigame.html로 저장합니다
3. 서버 코드 노드 io_multigame.js를 실행하십시오
4. 여러 IO_MULTIGAME.HTML 페이지를 열어 효과를 확인하십시오
요약
글은 매우 캐주얼하며 놀라운 nodejs에 대한 언급입니다. 이것은 좋은 책입니다. Nodejs를 알고 싶어하는 친구들은이 책을 읽을 수 있습니다.