Nodejs는 여러 사람이 동시에 온라인으로 마우스를 움직일 수 있도록 작은 게임 공유를 구현합니다_node.js

최근에는 프로젝트 요구로 인해 nodejs 백그라운드 애플리케이션에서 널리 사용되는 웹소켓 프레임워크인 nodejs, 소켓.io의 웹소켓 구현에 대해 연구했습니다.

준비

1.socket.io를 설치하고 npm installsocket.io 명령을 사용하세요
2. Windows 시스템의 경우, Socket.io 설치 시 VC 코드가 컴파일되기 때문에 VC 컴파일 환경이 필요합니다

게임의 기본원리

1. 서버는 클라이언트의 연결을 모니터링합니다
2. 클라이언트 접속 성공 시 페이지를 바인딩하여 마우스 이벤트를 이동시키고, 이벤트를 처리하여 현재 좌표를 서버로 전송합니다
3. 서버는 전역 좌표 객체를 저장하고 클라이언트 고유 번호를 키 값으로 사용합니다
4. 새로운 연결이 오면 다른 클라이언트에게 좌표를 방송하세요
5. 클라이언트 연결이 끊어지면 서버는 좌표 정보를 삭제하고 이를 다른 클라이언트에게 브로드캐스팅합니다

서버 코드 구현 시작

scoket.io가 서버 모니터링을 설정할 때 업그레이드 프로토콜을 처리하기 위해 http 연결에 의존해야 하므로 http 모듈도 필요합니다.

코드 복사 코드는 다음과 같습니다.

var http = require('http'),
​ io = require('socket.io');

var app = http.createServer().listen(9091);

var ws = io.listen(앱);

그런 다음 전역 좌표 객체를 정의합니다

코드 복사 코드는 다음과 같습니다.

var 위치 = {};

클라이언트 연결 모니터링을 시작하고 브로드캐스트 기능을 추가합니다. (실제로는 Socket.io에 포함된 브로드캐스트 메서드 io.sockets.broadcast.emit를 사용할 수 있습니다.) 핵심 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

ws.on('연결', 함수(클라이언트){
// 방송 기능
var 브로드캐스트 = 함수(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 ('posity.change', msg)
                }
            }
}
};
console.log(' // 클라이언트가 성공적으로 연결되면 다른 클라이언트의 좌표 정보가 전송됩니다
Client.emit('position.change', position);
// 클라이언트가 보낸 메시지를 받습니다
Client.on('position.change', function(msg){
                                      // 현재 클라이언트의 메시지는 좌표 메시지뿐입니다.
        위치[client.id] = msg;
               // 다른 모든 클라이언트에게 메시지를 브로드캐스트
방송({
            유형: '위치',
위치: msg,
              ID: client.id
          }, 고객);
});
// 클라이언트 연결 종료 메시지 수신
Client.on('닫기', function(){
console.log('닫기!');
​​​​ //클라이언트를 삭제하고 다른 클라이언트에게 알립니다
~ >                // 다른 모든 클라이언트에게 메시지를 브로드캐스트
방송({
            유형: '연결 끊기',
              ID: client.id
          }, 고객);
});
// 연결 끊기
Client.on('disconnect', function(){
console.log('연결 끊기!');
​​​​ //클라이언트를 삭제하고 다른 클라이언트에게 알립니다
~ >                // 다른 모든 클라이언트에게 메시지를 브로드캐스트
방송({
            유형: '연결 끊기',
              ID: client.id
          }, 고객);
})
// 클라이언트 예외 처리 정의
Client.on('오류', function(err){
console.log('error->', err);
})
});



위 코드를 분석해 보면 핵심은

1. 새 클라이언트가 성공적으로 연결되어 다른 클라이언트의 좌표 정보를 보냅니다

2. 클라이언트가 좌표정보를 업데이트하면 다른 클라이언트에게 알립니다

3. 클라이언트의 연결이 끊어지고 다른 클라이언트에게 알립니다.

4. 방송 메시지 유형은 좌표 수정과 좌표 제거로 구분됩니다


클라이언트 HTML 페이지 작성

socket.io는 사용자 정의 프레임워크이므로 클라이언트는 소켓.io.js를 참조해야 합니다. 이 js는 일반적으로 merge를 포함하는 node_modulessocket.ionode_modulessocket.io-clientdist입니다. 두 버전을 압축하면 개발 중에 병합된 버전을 사용할 수 있습니다

전체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.