??????歡迎來到我的博客，很高興能夠在這里和您見面！希望您在這里可以感受到一份輕松愉快的氛圍，不僅可以獲得有趣的內(nèi)容和知識，也可以暢所欲言、分享您的想法和見解。
- 推薦:kwan 的首頁,持續(xù)學(xué)習(xí),不斷總結(jié),共同進(jìn)步,活到老學(xué)到老
- 導(dǎo)航
- 檀越劍指大廠系列:全面總結(jié) java 核心技術(shù)點,如集合,jvm,并發(fā)編程 redis,kafka,Spring,微服務(wù),Netty 等
- 常用開發(fā)工具系列:羅列常用的開發(fā)工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等
- 數(shù)據(jù)庫系列:詳細(xì)總結(jié)了常用數(shù)據(jù)庫 mysql 技術(shù)點,以及工作中遇到的 mysql 問題等
- 懶人運(yùn)維系列:總結(jié)好用的命令,解放雙手不香嗎?能用一個命令完成絕不用兩個操作
- 數(shù)據(jù)結(jié)構(gòu)與算法系列:總結(jié)數(shù)據(jù)結(jié)構(gòu)和算法,不同類型針對性訓(xùn)練,提升編程思維,劍指大廠
非常期待和您一起在這個小小的網(wǎng)絡(luò)世界里共同探索、學(xué)習(xí)和成長。?????? ?? 歡迎訂閱本專欄 ??
前言
Node.js 是能夠在服務(wù)器端運(yùn)行 JavaScript 的開放源代碼、跨平臺運(yùn)行環(huán)境。Node.js 由 OpenJS Foundation（原為 Node.js Foundation，已與 JS Foundation 合并）持有和維護(hù)，亦為 Linux 基金會的項目。Node.js 采用 Google 開發(fā)的 V8 運(yùn)行代碼，使用事件驅(qū)動、非阻塞和異步輸入輸出模型等技術(shù)來提高性能，可優(yōu)化應(yīng)用程序的傳輸量和規(guī)模。這些技術(shù)通常用于資料密集的即時應(yīng)用程序。
Node.js 大部分基本模塊都用 JavaScript 語言編寫。在 Node.js 出現(xiàn)之前，JavaScript 通常作為客戶端程序設(shè)計語言使用，以 JavaScript 寫出的程序常在用戶的瀏覽器上運(yùn)行。Node.js 的出現(xiàn)使 JavaScript 也能用于服務(wù)端編程。Node.js 含有一系列內(nèi)置模塊，使得程序可以脫離 Apache HTTP Server 或 IIS，作為獨(dú)立服務(wù)器運(yùn),下面將介紹如何簡單幾步實現(xiàn)遠(yuǎn)程公共網(wǎng)絡(luò)下訪問 windwos node.js 的服務(wù)端。
1.安裝 Node.js 環(huán)境
官網(wǎng)下載 node.js,我們選擇 64 位一鍵安裝
https://nodejs.org/zh-cn/download/
安裝好后我們打開 cmd,輸入命令有正常出來版本號，表示安裝成功,一鍵安裝版,默認(rèn)會配置環(huán)境變量。
node -v
2.創(chuàng)建 node.js 服務(wù)
這里我們在本地創(chuàng)建一個簡單的 nodejs 服務(wù)，創(chuàng)建一個貪吃蛇頁面小游戲來進(jìn)行演示。
首先在本地創(chuàng)建一個文件夾，并在文件夾中新建 2 個文件，一個是js文件和一個html文件，需要放在同個目錄下，然后使用 vscode 打開。
game.html文件nodetest.js文件
在game.html添加如下html代碼并保存，以下代碼是一個 html 頁面小游戲(貪吃蛇)
<!DOCTYPE html>
<html>
<head>
<title>貪吃蛇</title>
<meta charset="UTF-8" />
<meta name="keywords" content="貪吃蛇" />
<meta name="Description" content="這是一個初學(xué)者用來學(xué)習(xí)的小游戲" />
<style type="text/css">
* {
margin: 0;
}
.map {
margin: 100px auto;
height: 600px;
width: 900px;
background: #00d0ff;
border: 10px solid #afaeb2;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="map">
<canvas id="canvas" height="600" width="900"> </canvas>
</div>
<script type="text/javascript">
//獲取繪制工具
/*
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");//獲取上下文
ctx.moveTo(0,0);
ctx.lineTo(450,450);*/
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
/*ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(450,450);
ctx.stroke();
*/
var snake = []; //定義一條蛇，畫蛇的身體
var snakeCount = 6; //初始化蛇的長度
var foodx = 0;
var foody = 0;
var togo = 0;
function drawtable() {
//畫地圖的函數(shù)
for (
var i = 0;
i < 60;
i++ //畫豎線
) {
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(15 * i, 0);
ctx.lineTo(15 * i, 600);
ctx.closePath();
ctx.stroke();
}
for (
var j = 0;
j < 40;
j++ //畫橫線
) {
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(0, 15 * j);
ctx.lineTo(900, 15 * j);
ctx.closePath();
ctx.stroke();
}
for (
var k = 0;
k < snakeCount;
k++ //畫蛇的身體
) {
ctx.fillStyle = "#000";
if (k == snakeCount - 1) {
ctx.fillStyle = "red"; //蛇頭的顏色與身體區(qū)分開
}
ctx.fillRect(snake[k].x, snake[k].y, 15, 15); //前兩個數(shù)是矩形的起始坐標(biāo)，后兩個數(shù)是矩形的長寬。
}
//繪制食物
ctx.fillStyle = "black";
ctx.fillRect(foodx, foody, 15, 15);
ctx.fill();
}
function start() {
//定義蛇的坐標(biāo)
//var snake =[];//定義一條蛇，畫蛇的身體
//var snakeCount = 6;//初始化蛇的長度
for (var k = 0; k < snakeCount; k++) {
snake[k] = { x: k * 15, y: 0 };
}
drawtable();
addfood(); //在start中調(diào)用添加食物函數(shù)
}
function addfood() {
foodx = Math.floor(Math.random() * 60) * 15; //隨機(jī)產(chǎn)生一個0-1之間的數(shù)
foody = Math.floor(Math.random() * 40) * 15;
for (var k = 0; k < snake; k++) {
if (foodx == snake[k].x && foody == sanke[k].y) {
//防止產(chǎn)生的隨機(jī)食物落在蛇身上
addfood();
}
}
}
function move() {
switch (togo) {
case 1:
snake.push({
x: snake[snakeCount - 1].x - 15,
y: snake[snakeCount - 1].y,
});
break; //向左走
case 2:
snake.push({
x: snake[snakeCount - 1].x,
y: snake[snakeCount - 1].y - 15,
});
break;
case 3:
snake.push({
x: snake[snakeCount - 1].x + 15,
y: snake[snakeCount - 1].y,
});
break;
case 4:
snake.push({
x: snake[snakeCount - 1].x,
y: snake[snakeCount - 1].y + 15,
});
break;
case 5:
snake.push({
x: snake[snakeCount - 1].x - 15,
y: snake[snakeCount - 1].y - 15,
});
break;
case 6:
snake.push({
x: snake[snakeCount - 1].x + 15,
y: snake[snakeCount - 1].y + 15,
});
break;
default:
snake.push({
x: snake[snakeCount - 1].x + 15,
y: snake[snakeCount - 1].y,
});
}
snake.shift(); //刪除數(shù)組第一個元素
ctx.clearRect(0, 0, 900, 600); //清除畫布重新繪制
isEat();
isDead();
drawtable();
}
function keydown(e) {
switch (e.keyCode) {
case 37:
togo = 1;
break;
case 38:
togo = 2;
break;
case 39:
togo = 3;
break;
case 40:
togo = 4;
break;
case 65:
togo = 5;
break;
case 68:
togo = 6;
break;
}
}
function isEat() {
//吃到食物后長度加1
if (
snake[snakeCount - 1].x == foodx &&
snake[snakeCount - 1].y == foody
) {
addfood();
snakeCount++;
snake.unshift({ x: -15, y: -15 });
}
}
//死亡函數(shù)
function isDead() {
if (
snake[snakeCount - 1].x > 885 ||
snake[snakeCount - 1].y > 585 ||
snake[snakeCount - 1].x < 0 ||
snake[snakeCount - 1].y < 0
) {
window.location.reload();
}
}
document.onkeydown = function (e) {
keydown(e);
};
window.onload = function () //調(diào)用函數(shù)
{
start();
setInterval(move, 150);
drawtable();
};
</script>
</body>
</html>
nodetest.js文件添加如下js代碼，以下代碼意思是開啟一個http服務(wù),設(shè)置監(jiān)聽3000端口號
const http = require("http");
//加載文件模塊
const fs = require("fs");
const hostname = "127.0.0.1";
//端口
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/html");
fs.readFile("./game.html", (err, data) => {
if (err) throw err;
console.log(data.toString);
res.end(data);
});
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
3. 訪問 node.js 服務(wù)
當(dāng)我們編寫好相關(guān)代碼后,我們開始啟動服務(wù).在 vscode 控制臺輸入命令【注意需要進(jìn)入到相應(yīng)的文件目錄下執(zhí)行命令】
node .\nodetest.js
有正常返回提示服務(wù)在本地 3000 端口下，我們打開瀏覽器,訪問http://127.0.0.1:3000/,出現(xiàn)貪吃蛇界面表示成功【游戲控制:鍵盤上下左右鍵】
4.內(nèi)網(wǎng)穿透
這里我們使用 cpolar 來進(jìn)行內(nèi)網(wǎng)穿透，支持 http/https/tcp 協(xié)議，不限制流量，無需公網(wǎng) IP，也不用設(shè)置路由器，使用簡單。
4.1 安裝配置 cpolar 內(nèi)網(wǎng)穿透
cpolar 官網(wǎng)：https://www.cpolar.com/
訪問 cpolar 官網(wǎng)，注冊一個賬號，然后下載并安裝客戶端，具體安裝教程可以參考官網(wǎng)文檔教程。
- windows 系統(tǒng)：在官網(wǎng)下載安裝包后，雙擊安裝包一路默認(rèn)安裝即可。
- linux 系統(tǒng)：支持一鍵自動安裝腳本，詳細(xì)請參考官網(wǎng)文檔——入門指南
4.2 創(chuàng)建隧道映射本地端口
cpolar 安裝成功后，在瀏覽器上訪問本地 9200 端口 http://localhost:9200，使用 cpolar 郵箱賬號登錄。
點擊左側(cè)儀表盤的隧道管理——創(chuàng)建隧道，創(chuàng)建一個指向本地 3000 端口的 http 隧道
- 隧道名稱：可自定義命名，注意不要與已有的隧道名稱重復(fù)
- 協(xié)議：選擇 http
- 本地地址：3000
- 域名類型：免費(fèi)選擇隨機(jī)域名
- 地區(qū)：選擇 China vip
點擊創(chuàng)建
隧道創(chuàng)建成功后，點擊左側(cè)的狀態(tài)——在線隧道列表,查看所生成的公網(wǎng)地址，然后復(fù)制地址
打開瀏覽器器,我們使用上面公網(wǎng)地址進(jìn)行訪問,至此,我們成功將本地·node.js 服務(wù)發(fā)布到了公網(wǎng)地址
5.固定公網(wǎng)地址
由于以上使用 cpolar 所創(chuàng)建的隧道使用的是隨機(jī)公網(wǎng)地址，24 小時內(nèi)會隨機(jī)變化，不利于長期遠(yuǎn)程訪問。因此我們可以為其配置二級子域名，該地址為固定地址，不會隨機(jī)變化。
- 保留一個二級子域名
登錄 cpolar 官網(wǎng)，點擊左側(cè)的預(yù)留，選擇保留二級子域名，設(shè)置一個二級子域名名稱，點擊保留,保留成功后復(fù)制保留的二級子域名名稱
保留成功后復(fù)制保留的二級子域名地址
- 配置二級子域名
訪問http://127.0.0.1:9200/，登錄cpolar web UI 管理界面，點擊左側(cè)儀表盤的隧道管理——隧道列表，找到所要配置的 3000 隧道，點擊右側(cè)的編輯
修改隧道信息，將保留成功的二級子域名配置到隧道中
- 域名類型：選擇二級子域名
- Sub Domain：填寫保留成功的二級子域名
點擊更新
更新完成后,打開在線隧道列表,此時可以看到公網(wǎng)地址已經(jīng)發(fā)生變化,地址名稱也變成了保留過的二級子域名名稱,將其復(fù)制下來
然后使用固定 http 地址打開瀏覽器訪問
訪問成功，現(xiàn)在這個公網(wǎng)地址是固定的了，不會隨機(jī)變化。成功通過 cpolar 內(nèi)網(wǎng)穿透，實現(xiàn)在外遠(yuǎn)程訪問 nodejs 服務(wù)，無需公網(wǎng) IP ，也不用設(shè)置路由器。
覺得有用的話點個贊
????唄。
??????本人水平有限，如有紕漏，歡迎各位大佬評論批評指正！????????????如果覺得這篇文對你有幫助的話，也請給個點贊、收藏下吧，非常感謝!?? ?? ??
??????Stay Hungry Stay Foolish 道阻且長,行則將至,讓我們一起加油吧！??????文章來源：http://www.zghlxwxcb.cn/news/detail-774155.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-774155.html
到了這里，關(guān)于如何使用Node.js快速創(chuàng)建本地HTTP服務(wù)器并實現(xiàn)公網(wǎng)訪問服務(wù)端的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
