분류 javascript

Socket.IO를 사용하고 첫 번째 멀티 플레이어 게임을 만드는 방법!

컨텐츠 정보

  • 조회 404 (작성일 )

본문

전제 조건 :


필수품 

  • node.js
  • npm
  • express
  • socket.io
  • VS Code

https://dev.to/denislav__/how-to-use-socket-io-not-the-chat-3l21


소개 


배경 이야기 


내 다른 게시물을 읽으면 우리가 무엇을 만들지 이미 알고 있습니다. 그렇지 않다면 설명하겠습니다. ChrisOnCode의 'Crazy Buttons'강의의 버전을 빌드 할 것입니다. 클릭하면 문서 내 임의의 위치로 이동하는 버튼을 만들 것입니다. 

우리는 또한 움직임을 실시간으로 만들어 다른 사람들이 그것을 클릭하는 다른 사람이 있는지 볼 것입니다.


socket.io는 무엇입니까 


개발자 자신이 말한 것처럼 "Socket.IO는 실시간 웹 애플리케이션을 위한 JavaScript 라이브러리입니다. 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 합니다. 브라우저에서 실행되는 클라이언트 측 라이브러리, 및 Node.js 용 서버 측 라이브러리 " 


따라서 기본적으로 실시간 애플리케이션을 만들 수 있는 라이브러리입니다. .io 게임과 Facebook 채팅이 그 예입니다. 나는 그들의 공식 웹 사이트를 살펴볼 것을 제안한다. 이 링크를 확인하면 작동 방식을 이해하는 데 도움이 될 수 있습니다.


이제 우리가 무엇을 만들지, 무엇을 만들지 알 수 있습니다.


환경 설정 


Windows를 사용하고 있으므로 Windows 용어를 사용하지만 다른 OS를 사용하는 경우 관리 할 것입니다. 좋습니다. 환경 설정부터 시작하겠습니다. 새 폴더를 만들고 이름을 인터넷 버튼으로 지정합니다. 폴더에서 VS Code를 열고 다음 구조를 만듭니다.


Folder Structure 


이제 우리는 애플리케이션의 기본을 구축해야 합니다. 디렉토리에서 터미널을 열고 다음을 입력하십시오.


npm init



값을 비워 두거나 이름과 설명을 추가하십시오. 선택 사항입니다. 변경을 할 때마다 애플리케이션을 다시 시작할 필요가 없도록 nodemon을 설치해야 합니다. 그렇게 하기


npm install -g nodemon


설치해야 할 마지막 패키지는 express 및 socket.io입니다.


npm install --save express socket.io



모든 패키지 설치가 끝나면 package.json은 다음과 유사해야 합니다.


package 


앱 빌드 


변수 추가 


서버 폴더 안에 server.js 파일을 만드는 것으로 시작합니다. 이제 필요한 모든 변수를 설정하겠습니다. 먼저 모듈로드를 시작합니다. 다음 4 개의 변수를 추가합니다.


const path          = require('path');
const http          = require('http');
const express       = require('express');
const socketIO      = require('socket.io');


자, 이제 Express 서버를 설정하겠습니다. 먼저 생성 한 공용 폴더를 통해 HTML을 제공 할 경로를 설정합니다.


const publicPath    = path.join(__dirname, '/../public');


또한 앱이 실행될 포트를 지정해야 합니다. 3000으로 가자 :


const port          = process.env.PORT || 3000;


이제 우리는 다음과 같이 표현 함수를 호출합니다.


let app             = express();


그런 다음 HTTP 연결을 허용하는 http 메서드를 지정합니다.


let server          = http.createServer(app);


마지막으로 socketIO 연결을 설정했습니다


let io              = socketIO(server);


server.js 파일에는 다음 코드 줄이 있어야 합니다.


const path = require('path');
const http = require('http');
const express = require('express');
const socketIO = require('socket.io');

const publicPath = path.join(__dirname, '/../public');
const port = process.env.PORT || 3000;
let app = express();
let server = http.createServer(app);
let io = socketIO(server);


함수 설정 


마지막으로 콘텐츠를 제공하도록 익스프레스 서버를 설정해야 합니다.


app.use(express.static(public path));


마지막으로 포트에 연결 :


server.listen(port, ()=> {
    console.log(`Server is up on port ${port}.`)
});


멋져요, 우리는 모두 준비되었습니다. 이제 공용 폴더로 이동하여 간단한 index.html 파일을 만들고 여기에 추가합니다. 빈 HTML 문서를 만들고 "Welcome to the socket.io training!"을 포함하는 h3 태그를 추가하겠습니다. 브라우저로 이동하여 localhost : 3000을 입력하여 모든 것이 작동하는지 확인하십시오.


프런트 엔드 설정 


이것은 socket.io 튜토리얼이므로 HTML 및 CSS를 설정하는 방법에 대해서는 자세히 다루지 않을 것입니다. 대신 socket.io 부분이 없는 프로젝트에 대한 링크를 제공하고 대신 이를 빌드 할 것입니다. 링크


프로젝트를 복제하는 경우 폴더 서버를 만들고 server.js 파일을 추가해야 합니다. 또한 public / js 폴더 안에 app.js를 추가해야 합니다.


Socket.io 


변수


우리는 이미 socket.io가 무엇이며 어떻게 작동하는지 알고 있습니다. 이제 버튼으로 작동하도록 할 시간입니다. insite public / js 우리는 app.js 파일을 만들 것입니다. 상단에 소켓을 추가합니다.


let socket = io();



우리는 시작 섹션을 얻습니다. 여기에는 "시작"버튼을 클릭하기 전에 표시되고 게임을 시작할 때 사라지는 구성 요소가 포함되어 있습니다.


const startingSection = document.querySelector('.starting-section');


그리고 '시작'버튼 ...


const homeBtn = document.querySelector('.home-btn');


마지막으로 '미친'버튼입니다. 움직이는 사람 :


let crazyButton = document.getElementById('crazyButton');


Socket.io 서버 연결 


server / server.js 파일로 이동하여 다음 코드를 사용하여 socket.io 연결을 엽니다.


io.on('connection', (socket) => {
    console.log('A user just connected.');
    socket.on('disconnect', () => {
        console.log('A user has disconnected.');
    })
});


이것은 내장 함수입니다. 새로운 연결이 이루어질 때마다 그 안의 코드가 실행됩니다. 우리는 자명 한 또 다른 내장 기능 분리를 포함합니다.


nodemon (nodemon server / server.js)을 시작하고 localhost : 3000을 찾아 이를 테스트 할 수 있습니다. VS Code에서 터미널을 열고 메시지가 기록되고 있는지 확인합니다.


실시간 게임 시작 


"시작"버튼에 대한 기능을 만들어 보겠습니다. .starting-section 구성 요소를 숨기고 실시간으로 만들어 다른 플레이어도 숨길 것입니다. app.js로 이동하여 시작 버튼에 클릭 이벤트 리스너를 추가합니다.


start button.addEventListener('click', () => {

})


이벤트 리스너 내에서 socket.emit ( 'startGame');을 사용하여 socket.io 서버에 메시지를 내 보내야 합니다.


startButton.addEventListener('click', () => {
    socket.emit('startGame');
});


이제 서버 측 (server.js)에서 해당 메시지에 대한 '리스너'를 만들어야 합니다.


socket.on('startGame', () => {

})


연결된 모든 클라이언트에 메시지를 다시 보냅니다.


socket.on('startGame', () => {
    io.emit('startGame');
})


그런 다음 app.js에서 서버의 '메시지'를 처리합니다.


socket.on('startGame', () => {
});


그리고 hideStartButton () 함수를 호출합니다.


socket.on('startGame', () => {
    hideStartButton();
});


마지막으로 hideStartButton 함수를 선언합니다.


function hideStartButton() {
    startButton.style.display = "none";
    crazyButton.style.display = "block";
    startingSection.style.display = "none";
}


이제 모든 것이 localhost : 3000에서 작동하는지 테스트합니다.


9b72a53939f52dd58052583a273a1851 


버튼을 실시간으로 이동 


이 부분의 경우 모든 것이 거의 동일하지만 한 가지 차이점 만 있습니다. 앱에서 서버로 데이터를 전달하고 처리 한 다음 연결된 각 클라이언트에 반환해야 합니다.


미친 버튼에 이벤트 리스너를 추가하고 두 값 (offsetLeft 및 offsetTop)이 포함 된 메시지를 내 보냅니다.이 값은 Math.random에 창의 innerWidth 및 innerHeight를 곱한 값입니다. 버튼의 clientWidth 및 clientHeight :


crazyButton.addEventListener('click', () => {
    socket.emit('crazyIsClicked', {
        offsetLeft: Math.random() * ((window.innerWidth - crazyButton.clientWidth) - 100),
        offsetTop: Math.random() * ((window.innerHeight - crazyButton.clientHeight) - 50)
    });
})


그런 다음 서버는 '데이터'변수의 형식으로 이러한 값을 수신하고 다시 내 보냅니다.

socket.on('crazyIsClicked', (data) => {
    io.emit('crazyIsClicked', data);
});


그런 다음 app.js 파일이 데이터를 받아 함수에 입력하면 버튼이 이동합니다.


socket.on('crazyIsClicked', (data) => {
    goCrazy(data.offsetLeft, data.offsetTop);
});


goCrazy 함수를 만듭니다.


function goCrazy(offLeft, offTop) {
    let top, left;

    left = offLeft;
    top = offTop;

    crazyButton.style.top = top + 'px';
    crazyButton.style.left = left + 'px';
    crazyButton.style.animation = "none";
}


그리고 테스트 :


fde568eb7135dda0b81455054cc4eb37 


멋지다, 우리 모두 끝났다!


결론 


오늘 여러분은 socket.io가 무엇인지, 데이터를 전달하는 방법, 메시지를 내보내고 듣는 방법을 배웠습니다. 도움이 되었기를 바라며 오늘 뭔가를 배웠습니다! 내 웹 사이트에서 전체 프로젝트를 사용할 수 있습니다.


이것과 관련된 다른 게시물을 확인하십시오-(JSourney : 비디오가 아닌 프로젝트로 배우십시오!) [https://dev.to/denislav__/the-jsourney-learn-with-projects-not-videos-1hg1 ].

하루 종일 비디오를 보는 것보다 프로젝트를 구축하는 것이 더 나은 학습 방법 인 이유를 설명합니다.