선결 조건:

필수품

노드js

npm

특급

콘센트.io

VS 코드

소개하다.

배경 이야기

만약 네가 나의 다른 문장을 읽었다면, 너는 우리가 무엇을 건설해야 하는지 이미 알고 있을 것이다.없으면 설명해 드릴게요.우리는 ChrisOnCode's 'Crazy Buttons' lesson의 버전을 구축할 것이다.우리는 단추를 만들 것입니다. 단추를 누르면 문서의 무작위 위치로 이동합니다.다른 사람들이 그것을 눌렀는지 확인할 수 있도록 운동을 실시간으로 할 것이다.

콘센트라니요?목위일

개발자가 말한 바와 같이 "Socket.IO는 실시간 웹 응용 프로그램에 사용되는 자바스크립트 라이브러리입니다. 웹 클라이언트와 서버 간의 실시간 양방향 통신을 지원합니다. 브라우저에서 실행되는 클라이언트 라이브러리와 Node.js에 사용되는 서버 라이브러리 두 부분이 있습니다."
기본적으로, 이것은 우리가 실시간 응용 프로그램을 만들 수 있는 라이브러리입니다.이 방면의 한 예는io 게임과 페이스북 채팅.나는 네가 그들의 정부측website을 좀 볼 것을 건의한다.링크this를 살펴보면 작동 방식을 이해할 수 있습니다.
이제 우리가 뭘로 뭘 지을지 알겠어?

환경을 조성하다

Windows를 사용하는 경우 Windows 용어를 사용하지만 다른 운영 체제를 사용하는 경우 관리할 것으로 믿습니다.좋습니다. 환경을 설정하는 것부터 시작하겠습니다.새 폴더를 만들고 인터넷 단추로 이름을 붙입니다.폴더에서 VS 코드를 열고 다음 구조를 생성합니다.

현재 우리는 응용 프로그램의 기초를 구축해야 한다.디렉토리에서 터미널을 열고 를 입력합니다.

npm init

예약 값이 비어 있거나 이름과 설명을 추가하십시오. 이것은 당신의 선택입니다.변경할 때마다 프로그램을 다시 시작할 필요가 없도록 nodemon을 설치해야 합니다.이렇게 하는 것은

npm install -g nodemon

우리가 설치해야 할 마지막 소프트웨어 패키지는express & socket입니다.목위일

npm install --save express socket.io

모든 패키지를 설치한 후 패키지를 설치합니다.json의 모양은 이와 유사해야 합니다.

좋아, 우리는 준비가 다 됐어.우리 일을 시작합시다!

애플리케이션 구축

변수 추가

서버를 만드는 것부터 시작하겠습니다.서버 폴더에 있는 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;

이제 express 함수를 다음 함수로 호출합니다.

let app             = express();

그리고 http 연결을 허용하는 http 방법을 지정합니다.

let server          = http.createServer(app);

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

let io              = socketIO(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);

기능 설정

express 서버를 최종 제공 내용으로 설정해야 합니다.

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

포트에 마지막으로 연결:

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

쿨, 우리 모두 준비가 다 됐어.현재 공공 폴더에 들어가서 간단한 인덱스를 만듭니다.html 파일을 추가하고 내용을 추가합니다.빈 HTML 문서를 만들고 "Welcome to the socket.io training!"을 포함하는 h3 태그를 추가합니다.브라우저로 이동하고 localhost: 3000을 입력하여 모든 것이 정상인지 확인하십시오.
완벽해.우리 전진합시다!

프런트엔드 설정

이것은 콘센트이기 때문이다.IO 자습서는 HTML과 CSS를 설정하는 방법에 대해 자세히 설명하지 않습니다.반대로, 나는 너에게 플러그인이 없는 항목 링크를 줄 것이다.io 부분에서 구축할 것입니다.link
항목을 복제하려면 폴더 서버를 만들고 서버를 추가해야 한다는 것을 기억하십시오.js 파일.응용 프로그램을 추가해야 합니다.js는public/js 폴더에 있습니다.

콘센트.목위일

변량

네, 우리는 이미 어떤 콘센트인지 알고 있습니다.io가 뭐야, 어떻게 일하는지.이제는 우리 버튼과 함께 일할 때가 되었다.Insite public/js 응용 프로그램을 만듭니다.js 파일.우리는 꼭대기에 콘센트를 넣었다

let socket = io();

우리 시작했어."시작"단추를 누르기 전에 게임을 시작할 때 사라지는 구성 요소를 포함합니다.

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

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

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

마지막으로, 우리의'미친'버튼.움직이는 그:

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

콘센트.io 서버 연결

서버로 이동합니다.js 파일을 열고 플러그인을 엽니다.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 코드에서 터미널을 열고 메시지가 기록되었는지 확인합니다.

실시간 게임 시작

"시작"단추를 위한 기능을 만듭니다.우리는 이 비밀을 숨겨야 한다.일부 구성 요소를 시작하여 다른 유저에게도 숨길 수 있도록 실시간화합니다.응용 프로그램으로 이동합니다.js에서 시작 단추에 클릭 이벤트 감청기를 추가합니다:

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

})

사건 탐지기에서, 우리는 반드시 플러그인에 메시지를 보내야 한다.소켓이 있는 IO 서버입니다.발사('start Game');:

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

서버 쪽 (server.js) 에서 이 메시지에 대한 탐지기를 만들어야 합니다.

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

})

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

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

그리고 우리는 응용 프로그램에서 서버에서 온 메시지를 처리합니다.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이 올바른지 테스트합니다.

라이브 이동 버튼

이 부분에서 모든 내용은 거의 똑같다. 단 하나의 차이점이 있다. 우리는 데이터를 응용 프로그램에서 서버로 전달하고 그것을 처리한 다음에 연결된 클라이언트에게 되돌려야 한다.
우리는 미친 단추에 이벤트 탐지기를 추가하고 두 개의 값을 가진 대상인offsetLeft와offsetTop을 포함하는 메시지를 보냅니다. 이것은 수학 표현식입니다.창의 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);
});

우리의 응용.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";
}

테스트:

쿨, 우리 다 끝났어!

결론

오늘 뭘 배웠어?io는 데이터를 어떻게 전달하고 어떻게 메시지를 보내고 감청하는가입니다.나는 이것이 도움이 되기를 바란다. 너는 오늘 약간의 것을 배웠다.완전한 항목은 my website에서 얻을 수 있다.
이와 관련된 다른 게시물을 꼭 확인해 주십시오.나는 왜 건축 프로젝트가 하루 종일 동영상을 보는 것이 아니라 더 좋은 학습 방식인지 설명했다.