利用Node.js和cpolar實現遠程訪問，無需公網IP和路由器設置的完美解決方案

文章目錄

前言
1.安裝Node.js環境
2.創建node.js服務
3. 訪問node.js 服務
4.內網穿透
- 4.1 安裝配置cpolar內網穿透
- 4.2 創建隧道映射本地端口
5.固定公網地址

前言

Node.js 是能夠在服務器端運行 JavaScript 的開放源代碼、跨平臺運行環境。Node.js 由 OpenJS Foundation（原為 Node.js Foundation，已與 JS Foundation 合并）持有和維護，亦為 Linux 基金會的項目。Node.js 采用 Google 開發的 V8 運行代碼，使用事件驅動、非阻塞和異步輸入輸出模型等技術來提高性能，可優化應用程序的傳輸量和規模。這些技術通常用于資料密集的即時應用程序。

Node.js 大部分基本模塊都用 JavaScript 語言編寫。在 Node.js 出現之前，JavaScript 通常作為客戶端程序設計語言使用，以JavaScript 寫出的程序常在用戶的瀏覽器上運行。Node.js 的出現使 JavaScript 也能用于服務端編程。Node.js 含有一系列內置模塊，使得程序可以脫離 Apache HTTP Server 或 IIS，作為獨立服務器運,下面將介紹如何簡單幾步實現遠程公共網絡下訪問windwos node.js的服務端。

1.安裝Node.js環境

官網下載node.js,我們選擇64位一鍵安裝

https://nodejs.org/zh-cn/download/

安裝好后我們打開cmd,輸入命令有正常出來版本號，表示安裝成功,一鍵安裝版,默認會配置環境變量。

node -v

2.創建node.js服務

這里我們在本地創建一個簡單的nodejs服務，創建一個貪吃蛇頁面小游戲來進行演示。

首先在本地創建一個文件夾，并在文件夾中新建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="這是一個初學者用來學習的小游戲"><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()//畫地圖的函數{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";//蛇頭的顏色與身體區分開}ctx.fillRect(snake[k].x,snake[k].y,15,15);//前兩個數是矩形的起始坐標，后兩個數是矩形的長寬。}//繪制食物	ctx.fillStyle ="black";ctx.fillRect(foodx,foody,15,15);ctx.fill();}function start()//定義蛇的坐標{//var snake =[];//定義一條蛇，畫蛇的身體//var snakeCount = 6;//初始化蛇的長度for(var k=0;k<snakeCount;k++){snake[k]={x:k*15,y:0};}drawtable();addfood();//在start中調用添加食物函數}function addfood(){foodx = Math.floor(Math.random()*60)*15; //隨機產生一個0-1之間的數foody = Math.floor(Math.random()*40)*15;for (var k=0;k<snake;k++){if (foodx==snake[k].x&&foody==sanke[k].y)//防止產生的隨機食物落在蛇身上{	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();//刪除數組第一個元素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});}}//死亡函數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()//調用函數
{ start();setInterval(move,150);drawtable();}
</script>
</body>
</html>

nodetest.js文件添加如下js代碼，以下代碼意思是開啟一個http服務,設置監聽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}/`);
});