Оглавление
1. Создание местной экологической службы
2. Тестовый доступ к локальной сети
3.1 Установите cpolar локально на Ubuntu
3.3 Проверка доступа к общедоступной сети
4. Настройте фиксированное имя субдомена второго уровня.
4.1. Зарезервируйте субдомен второго уровня.
4.2 Настройка имени субдомена второго уровня
4.3 Тестовый доступ к фиксированному имени субдомена второго уровня публичной сети
Предисловие
Сеть: обычно мы говорим об Интернете; веб-сайт: можно понимать как дом в Интернете. Думайте об Интернете как о городе. Каждый дом в городе — это сайт, и ваши ресурсы хранятся в доме. А что, если кто-то захочет получить доступ к вещам в вашем доме?
В реальной жизни, заходя в чужой дом, сначала нужно знать его адрес, такую-то улицу в определенном районе и ее номер.В Интернете также существует понятие адреса, которое ИП. Мы можем найти сайты в Интернете через IP.Порт можно рассматривать как вход в дом.Разные входы будут видеть разное.Например, вход через дверь (порт 80) - это гостиная, вход из окна( порт 8080) Порт) — кабинет.
Далее мы создадим HTML-игру веб-сайта на Ubuntu, выполнив несколько простых шагов, и воспользуемся проникновением в интрасеть cpolar, чтобы опубликовать ее в общедоступной сети, чтобы пользователи общедоступной сети также могли нормально получать доступ к игре на локальном веб-сайте.
1. Создание местной экологической службы
apach2 - это служба, которую также можно рассматривать как контейнер, который представляет собой упомянутый выше дом, работающий в Ubuntu. Эта служба может помочь нам сделать наши собственные страницы веб-сайта доступными для других компьютеров, помимо этой машины, через соответствующие порты.
Скачать apach2
sudo apt install apache2 php -y
После скачивания запустите apache2
sudo service apache2 restart
Затем откройте браузер Ubuntu и введите: http://localhost , чтобы увидеть нашу страницу Apache по умолчанию. Это означает, что локальный сайт настроен.
Введите путь к домашнему каталогу сервера Apache по умолчанию. Этот каталог содержит ресурсы, которые вы хотите, чтобы другие видели, например изображение, HTML-страницу и т. д.
cd /var/www/html
После ввода удалите файл index.html. Поскольку страница Apache по умолчанию — это не та страница, которую мы хотим, мы хотим изменить ее на понравившуюся страницу, поэтому нам нужно ее удалить. Выполните следующую команду:
sudo rm -rf index.html
Чтобы добиться тестового эффекта, мы настраиваем мини-игру на html-странице и создаем game.htmlстраницу с именем
sudo vim game.html
Нажмите кнопкуi , чтобы войти в режим редактирования, и скопируйте в него следующий HTML-код (скопировать все)
<!DOCTYPE html>
<html>
<head><h4>Take it Easy!Please playing Game</h4></head>
<body>
<div></div>
<!-- 4个board -->
<div id="board1" style="position: absolute; width:80px; height:10px; left:420px;
top:555px; background-color: cadetblue;"></div>
<div id="board2" style="position: absolute; width:80px; height:10px; left:520px;
top:555px; background-color: cadetblue;"></div>
<div id="board3" style="position: absolute; width:80px; height:10px; left:620px;
top:555px; background-color: cadetblue;"></div>
<div id="board4" style="position: absolute; width:80px; height:10px; left:720px;
top:555px; background-color: cadetblue;"></div>
<!-- 小球 -->
<div id="ball" class="circle" style="width:20px;
height:20px; background-color:crimson; border-radius: 50%; position:absolute;
left:600px; top:100px"></div>
<!-- 框 -->
<div id="box" style="border: 5px solid #555555; width:400px; height:550px; display=hide"></div>
<!-- 分数 过的board越多，分数越高 -->
<div id="score" style="width:200px; height:10px; position:absolute; left:900px;
font-family:'隶书'; font-size: 30px;">score: 0</div>
<!-- 游戏结束 -->
<div id="gg" style="width:200px; height:10px; position:absolute; left:550px; top:200px;
font-family:'隶书'; font-size: 30px; display: none;">Game Over</div>
<script>
// 设置box的样式
var box = document.getElementById("box");
box.style.position = "absolute";
box.style.left = "400px";
// 设置board的样式
var board1 = document.getElementById("board1");
var board2 = document.getElementById("board2");
var board3 = document.getElementById("board3");
var board4 = document.getElementById("board4");
// 声音
var shengyin = new Audio();
shengyin.src = "声音2.mp3";
shengyinFlag = 0; // 用来表示小球在第几块board上
// 键盘事件函数
var ball = document.getElementById("ball");
document.onkeydown = f;
function f(e){
var e = e || window.event;
switch(e.keyCode){
case 37:
// 按下左键，小球左移，但不要超过左边框
if(ball.offsetLeft>=box.offsetLeft + 10)
ball.style.left = ball.offsetLeft - 8 + "px";
break;
case 39:
// 按下右键，小球右移，但不要超过由边框
if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10)
ball.style.left = ball.offsetLeft + 8 + "px";
break;
case 32:
}
}
// 定义一个分数变量
var fenshu = 0;
// 定义一个函数，移动给定的一个board
function moveBoard(board)
{
var t1 = board.offsetTop;
if(t1<=0)
{
// 如果board移到最上面了，就随机换个水平位置，再移到最下面
t2 = Math.floor(Math.random() * (720- 420) + 420);
board.style.left = t2 + "px";
board.style.top = "555px";
fenshu += 1; //分数增加1
document.getElementById("score").innerHTML = "score " + fenshu;
}
//
else
board.style.top = board.offsetTop - 1 + "px";
}
// 定义小球的速度变量
var startSpeed = 1;
var ballSpeed =startSpeed;
// step函数是游戏界面的单位变化函数
function step()
{
// board直接上下隔得太近，就逐个移动，否则，同时移动
var t1 = Math.abs(board1.offsetTop - board2.offsetTop);
var t2 = Math.abs(board2.offsetTop - board3.offsetTop);
var t3 = Math.abs(board3.offsetTop - board4.offsetTop);
// 定义一个board之间的间隔距离
var t4 = 140;
if(t1<t4)
{
moveBoard(board1);
}
else if(t2<t4)
{
moveBoard(board1);
moveBoard(board2);
}
else if(t3<t4)
{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
}
else
{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
moveBoard(board4);
}
// 定义小球的垂直移动规则，1、向下匀加速运动，2、如果碰到board就被board持续抬上去，
// 直到按左右键离开了该board
// 如果小球的纵坐标等于某个board的纵坐标，就被抬起
var t5 = Math.abs(ball.offsetTop - board1.offsetTop);
var t6 = Math.abs(ball.offsetTop - board2.offsetTop);
var t7 = Math.abs(ball.offsetTop - board3.offsetTop);
var t8 = Math.abs(ball.offsetTop - board4.offsetTop);
if(t5<=ball.offsetHeight && t5>0 && ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth)
{
ball.style.top = board1.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 1)
{
shengyin.play();
shengyinFlag = 1;
}
}
else if(t6<=ball.offsetHeight && t6>0 && ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth)
{
ball.style.top = board2.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 2)
{
shengyin.play();
shengyinFlag = 2;
}
}
else if(t7<=ball.offsetHeight && t7>0 && ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth)
{
ball.style.top = board3.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 3)
{
shengyin.play();
shengyinFlag = 3;
}
}
else if(t8<=ball.offsetHeight && t8>0 && ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth)
{
ball.style.top = board4.offsetTop - ball.offsetHeight + "px";
ballSpeed = startSpeed;
if(shengyinFlag != 4)
{
shengyin.play();
shengyinFlag = 4;
}
}
else
{
ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
ball.style.top = ball.offsetTop + ballSpeed + "px";
}
// ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
// ball.style.top = ball.offsetTop + ballSpeed + "px";
// 如果小球跑出来box，就结束游戏
if(ball.offsetTop==0 || ball.offsetTop>=box.offsetTop+box.offsetHeight)
{
clearInterval(gameover);
ball.style.display = 'none';
board1.style.display = 'none';
board2.style.display = 'none';
board3.style.display = 'none';
board4.style.display = 'none';
var gg = document.getElementById("gg"); //显示游戏结束
gg.style.display = 'block';
}
}
var gameover = setInterval("step();", 8);
</script>
</body>
</html>
После копирования
Escнажмите клавишу чтобы выйти из редактирования, затем введите двоеточие:wq, чтобы сохранить и выйти.
2. Тестовый доступ к локальной сети
Затем введите в браузере http://localhost/game.html , и вы увидите сайт мини-игры на HTML-странице. Поскольку развернут статический сайт, нет необходимости перезапускать службу.
3. Проникновение в интранет
Поскольку этот сайт в настоящее время доступен только локально, чтобы сделать его доступным для всех, нам необходимо опубликовать этот локальный базовый сайт в общедоступной сети. Здесь мы можем добиться этого с помощью инструмента проникновения в интрасеть cpolar, который поддерживает протокол http/https/tcp. Ни общедоступный IP-адрес, ни маршрутизатор не требуется. Он может легко публиковать локальные сайты в общедоступной сети, чтобы каждый мог получить к ним доступ.
3.1 Установите cpolar локально на Ubuntu
Как установить проникновение в интранет cpolar в Ubuntu, обратитесь к этой учебной статье.
3.2 Создать туннель
После успешной установки cpolar получите доступ к локальному порту 9200 в браузере и войдите в интерфейс управления веб-интерфейсом cpolar.
Нажмите «Управление туннелем» на панели слева — «Создать туннель»:
- Имя туннеля: настраиваемое, будьте осторожны, не повторяйте его.
- Протокол: http
- Местный адрес: 80
- Тип порта: случайное доменное имя.
- Регион: Китай vip
Нажмите创建
После успешного создания туннеля нажмите «Статус» слева — «Список онлайн-туннелей». Вы увидите, что только что созданный туннель сгенерировал соответствующий адрес общедоступной сети. Скопируйте его и проверьте доступ.
3.3 Проверка доступа к общедоступной сети
Откройте браузер и получите доступ к общедоступному сетевому адресу, который вы только что скопировали. Обратите внимание, что вам нужно добавить после него путь /game.html. Когда появится интерфейс игры, все будет успешно.
Для управления игрой используются клавиши клавиатуры вверх, вниз, влево и вправо.
4. Настройте фиксированное имя субдомена второго уровня.
Поскольку созданный выше туннель выбирает случайное доменное имя, сгенерированный адрес общедоступной сети будет меняться случайным образом в течение 24 часов, что более неудобно для пользователей, которым необходим долгосрочный доступ. Однако мы можем настроить для доступа фиксированное имя субдомена второго уровня, и адрес не будет меняться случайным образом.
Примечание. Для поддержки функции настройки фиксированных имен субдоменов второго уровня требуется обновление до пакета Basic Edition или выше.
4.1. Зарезервируйте субдомен второго уровня.
Войдите в серверную часть официального сайта cpolar, нажмите «Зарезервировать» слева и найдите зарезервированное имя субдомена второго уровня:
- Регион: Выберите Китай VIP
- Доменное имя второго уровня: можно настроить.
- Описание: Заметки, которые можно настроить.
Нажмите保留
Подскажите, что имя субдомена успешно зарезервировано, скопируйте зарезервированное имя субдомена второго уровня.
4.2 Настройка имени субдомена второго уровня
Получите доступ к локальному порту 9200, чтобы войти в интерфейс управления веб-интерфейсом cpolar, нажмите «Управление туннелями» — «Список туннелей» на левой панели управления, найдите туннель, который вы хотите настроить, и нажмите «Изменить» справа.
Измените информацию о туннеле и настройте в туннеле успешно зарезервированное имя субдомена второго уровня.
- Тип доменного имени: выберите имя субдомена второго уровня.
- Субдомен: введите имя поддомена второго уровня, которое было успешно зарезервировано, в данном случае test01.
Нажмите更新
Будет отображено сообщение об успешном обновлении туннеля. Нажмите на статус на левой панели управления — список онлайн-туннелей. Вы увидите, что адрес общедоступной сети был обновлен до имени поддомена второго уровня, которое было успешно зарезервировано. Скопируйте его.
4.3 Тестовый доступ к фиксированному имени субдомена второго уровня публичной сети
Мы можем использовать любой браузер и войти в фиксированный субдомен второго уровня общедоступной сети +/game.html, который мы только что успешно настроили, чтобы увидеть созданную нами мини-игру на сайте, и адрес больше не будет меняться случайным образом.
