使用Nodejs搭建简单的HTTP服务器 - 内网穿透公网远程访问

文章目录

  • 前言
  • 1.安装Node.js环境
  • 2.创建node.js服务
  • 3. 访问node.js 服务
  • 4.内网穿透
    • 4.1 安装配置cpolar内网穿透
    • 4.2 创建隧道映射本地端口
  • 5.固定公网地址
  • 🍀小结🍀

在这里插入图片描述
在这里插入图片描述

🎉博客主页：小智_x0___0x_

🎉欢迎关注：👍点赞🙌收藏✍️留言

🎉系列专栏：小智带你闲聊

🎉代码仓库：小智的代码仓库

前言

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/

image-20230302141011787

安装好后我们打开cmd,输入命令有正常出来版本号，表示安装成功,一键安装版,默认会配置环境变量。

node -v

image-20230302150424377

2.创建node.js服务

这里我们在本地创建一个简单的nodejs服务，创建一个贪吃蛇页面小游戏来进行演示。

首先在本地创建一个文件夹，并在文件夹中新建2个文件，一个是js文件和一个html文件，需要放在同个目录下，然后使用vscode打开。

  • game.html文件
  • nodetest.js文件

image-20230302155043387

在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}/`);
});

3. 访问node.js 服务

当我们编写好相关代码后,我们开始启动服务.在vscode控制台输入命令【注意需要进入到相应的文件目录下执行命令】

node .\nodetest.js

image-20230302170633966

有正常返回提示服务在本地3000端口下，我们打开浏览器,访问http://127.0.0.1:3000/,出现贪吃蛇界面表示成功【游戏控制:键盘上下左右键】

image-20230302171105342

4.内网穿透

这里我们使用[cpolar](cpolar - 安全的内网穿透工具)来进行内网穿透，支持http/https/tcp协议，不限制流量，无需公网IP，也不用设置路由器，使用简单。

4.1 安装配置cpolar内网穿透

cpolar官网：https://www.cpolar.com/

访问cpolar官网，注册一个账号，然后下载并安装客户端，具体安装教程可以参考官网文档教程。

  • windows系统：在官网下载安装包后，双击安装包一路默认安装即可。
  • linux系统：支持一键自动安装脚本，详细请参考官网文档——入门指南

20230130105715

4.2 创建隧道映射本地端口

cpolar安装成功后，在浏览器上访问本地9200端口http://localhost:9200，使用cpolar邮箱账号登录。

20230130105810

点击左侧仪表盘的隧道管理——创建隧道，创建一个指向本地3000端口的http隧道

  • 隧道名称：可自定义命名，注意不要与已有的隧道名称重复
  • 协议：选择http
  • 本地地址：3000
  • 域名类型：免费选择随机域名
  • 地区：选择China vip

点击创建

image-20230302171633772

隧道创建成功后，点击左侧的状态——在线隧道列表,查看所生成的公网地址，然后复制地址

image-20230302171740715

打开浏览器器,我们使用上面公网地址进行访问,至此,我们成功将本地·node.js 服务发布到了公网地址

image-20230302171817498

5.固定公网地址

由于以上使用cpolar所创建的隧道使用的是随机公网地址，24小时内会随机变化，不利于长期远程访问。因此我们可以为其配置二级子域名，该地址为固定地址，不会随机变化。

  • 保留一个二级子域名

登录cpolar官网，点击左侧的预留，选择保留二级子域名，设置一个二级子域名名称，点击保留,保留成功后复制保留的二级子域名名称

image-20230302172317079

保留成功后复制保留的二级子域名地址

image-20230302172454064

  • 配置二级子域名

访问http://127.0.0.1:9200/，登录cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的3000隧道，点击右侧的编辑

image-20230302172856768

修改隧道信息，将保留成功的二级子域名配置到隧道中

  • 域名类型：选择二级子域名
  • Sub Domain：填写保留成功的二级子域名

点击更新

image-20230302172806823

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了保留过的二级子域名名称,将其复制下来

image-20230302172935943

然后使用固定http地址打开浏览器访问

image-20230302173012863
访问成功，现在这个公网地址是固定的了，不会随机变化。成功通过cpolar内网穿透，实现在外远程访问nodejs服务，无需公网IP ，也不用设置路由器。

🍀小结🍀

今天我们认识了"使用Nodejs搭建简单的HTTP服务器 - 内网穿透公网远程访问"相信大家看完有一定的收获。
种一棵树的最好时间是十年前，其次是现在！ 把握好当下，合理利用时间努力奋斗，相信大家一定会实现自己的目标！加油！创作不易，辛苦各位小伙伴们动动小手，三连一波💕💕~~~，本文中也有不足之处，欢迎各位随时私信点评指正！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/50738.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

“车-路-网”电动汽车充电负荷时空分布预测（matlab）

“车-路-网”电动汽车充电负荷时空分布预测（matlab）

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考《基于动态交通信息的电动汽车充电负荷时空分布预测》和《基于动态交通信息的电动汽车充电需求预测模型及其对配网的影响分析》文献模型&#xff0c;考虑私家车、出租车和共用车三类交通工具特性和…
阅读更多...
Python支持下最新Noah-MP陆面模式站点、区域模拟及可视化分析技术

Python支持下最新Noah-MP陆面模式站点、区域模拟及可视化分析技术

查看原文>>> Python支持下最新Noah-MP陆面模式站点、区域模拟及可视化分析技术 熟悉陆表过程的主要研究内容以及陆面模型在生态水文研究中的地位和作用&#xff1b;深入理解Noah-MP 5.0模型的原理&#xff0c;掌握Noah-MP模型&#xff08;2023年最新发布的5.0版本&am…
阅读更多...
Android 查看签名文件的MD5 SHA1值

Android 查看签名文件的MD5 SHA1值

1.找到存放签名文件所在的文件夹 2.输入命令&#xff1a;keytool -list -v -keystore atui.jks 3.输入口令&#xff08;keystore.jks签名文件的密码&#xff09;
阅读更多...
U盘被分成了4个盘要怎么合并

U盘被分成了4个盘要怎么合并

原来是做为系统盘的&#xff0c;然后有一大概小半年没用&#xff0c;今天一看它自己分成了四个盘。 并且我一插入电脑就提示我格式化 其实根本不需要任何工具&#xff0c;操作前最好把U盘数据备份一下 首先把你的U盘插在电脑上 方法一 U盘被分成四个分区的原因有以下几种可…
阅读更多...
第二届人工智能与智能信息处理技术国际学术会议（AIIIP 2023）

第二届人工智能与智能信息处理技术国际学术会议（AIIIP 2023）

第二届人工智能与智能信息处理技术国际学术会议&#xff08;AIIIP 2023&#xff09; 2023 2nd International Conference on Artificial Intelligence and Intelligent Information Processing 第二届人工智能与智能信息处理技术国际学术会议&#xff08;AIIIP 2023&#xf…
阅读更多...
Seaborn数据可视化（二）

Seaborn数据可视化（二）

目录 1.Seaborn风格设置 1.1 主题设置 1.2 轴线设置 1.3 移除轴线 1.4 使用字典传递函数 2.设置绘图元素比例 2.1 设置绘图元素比例paper 2.2 设置绘图元素比例poster 2.3 设置绘图元素比例notebook Seaborn将Matplotlib的参数划分为两个独立的组合&#xff0c;第一组用于…
阅读更多...
【ARM AMBA AXI 入门 10 - AXI 总线 DATA信号与 STRB 信号之间的关系 】

【ARM AMBA AXI 入门 10 - AXI 总线 DATA信号与 STRB 信号之间的关系 】

文章目录 AXI STRB 信号 AXI STRB 信号 AXI总线是ARM公司设计的高性能处理器接口&#xff0c;其中STRB和DATA信号在AXI协议中有特殊的含义和关系。 DATA信号&#xff1a;在AXI中&#xff0c;DATA信号用于在读写操作中传输实际的数据。数据的大小可以根据AXI接口的位宽来变化&…
阅读更多...
HTTP与RPC的取舍

HTTP与RPC的取舍

HTTP与RPC的取舍 HTTP和RPC都是常用的网络通信协议&#xff0c;它们各有优劣。选择何种协议&#xff0c;主要取决于应用的需求和场景。 HTTP和RPC都有各自的优点和缺点&#xff0c;首先我们对两种协议进行一个总结。 HTTP协议图 HTTP的优点&#xff1a; 广泛的支持&#xff1…
阅读更多...
Unity 之 Transform.Translate 实现局部坐标系中进行平移操作的方法

Unity 之 Transform.Translate 实现局部坐标系中进行平移操作的方法

文章目录 Translate 默认使用局部坐标也可以转换成世界坐标 Translate 默认使用局部坐标 在Unity中&#xff0c;Transform.Translate是用于在游戏对象的局部坐标系中进行平移操作的方法。这意味着它将游戏对象沿着其自身的轴进行移动&#xff0c;而不是世界坐标轴。这在实现物…
阅读更多...
leetcode 118.杨辉三角

leetcode 118.杨辉三角

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;https://leetcode.cn/problems/pascals-triangle/description/ 代码&#xff1a; class Solution { public:vector<vector<int>> generate(int numRows) {// 先开空间vector<vector<int>> v;v.…
阅读更多...
C++图形界面编程-MFC

C++图形界面编程-MFC

C控制台程序是命令行黑框&#xff0c;如果要写一个图形界面&#xff0c;VS也提供了图形界面编程MFC。建项目的时候选如下选项&#xff1a; 类似于QT。 问&#xff1a;那么MFC项目的运行入口main()或WinMain()在哪里呢&#xff1f; 答&#xff1a;其实&#xff0c;在MFC应用程…
阅读更多...
FPGA原理与结构——FIFO IP核原理学习

FPGA原理与结构——FIFO IP核原理学习

一、FIFO概述 1、FIFO的定义 FIFO是英文First-In-First-Out的缩写&#xff0c;是一种先入先出的数据缓冲器&#xff0c;与一般的存储器的区别在于没有地址线&#xff0c; 使用起来简单&#xff0c;缺点是只能顺序读写数据&#xff0c;其数据地址由内部读写指针自动加1完成&…
阅读更多...
第8章 海量数据搜索实现

第8章 海量数据搜索实现

mini商城第8章 海量数据搜索实现 一、课题 海量数据搜索 二、回顾 1、理解OpenResty 百万并发站点架构 2、能明白多级缓存架构思路 3、实现Nginx代理缓存 4、能实现缓存一致性 三、目标 1、了解ElasticSearch并会使用核心API 2、基于Canal实现ES和数据库数据同步 3、…
阅读更多...
上篇——税收大数据应用研究

上篇——税收大数据应用研究

财税是国家治理的基础和重要支柱&#xff0c;税收是国家治理体系的重要组成部分。我们如何利用税收数据深入挖掘包含的数据价值&#xff0c;在进行数据分析&#xff0c;提升税收治理效能&#xff0c;推进税收现代化。 1. 定义与特点 对于“大数据”&#xff08;Big data&#…
阅读更多...
『PyQt5-基础篇』｜ 02 Pyqt5开发环境+安装配置QtDesigner

『PyQt5-基础篇』｜ 02 Pyqt5开发环境+安装配置QtDesigner

02 Pyqt5开发环境安装配置QtDesigner 1 Pycharm安装2 Python安装3 Pip安装4 PyQt5安装5 Pycharm中编译工具设置及pyqt5包的导入6 指定Qt Designer7 指定PyUIC58 指定PyRcc59 PyInstaller安装10 查看是否配置OK 1 Pycharm安装 安装教程请参考&#xff1a;安装教程 2 Python安装…
阅读更多...
酷开科技大屏营销，锁定目标人群助力营销投放

酷开科技大屏营销，锁定目标人群助力营销投放

近日&#xff0c;中科网联发布《2023年中国家庭大屏白皮书》&#xff0c;数据显示智能电视近三年内使用人群增长平稳。全国4.94亿家庭户中&#xff0c;智能大屏渗透率近九成。不仅如此&#xff0c; CCData研究预测&#xff0c;2025年中国智能电视渗透率将达到95%以上。这与三年…
阅读更多...
让智慧城市更进一步，无人机解决方案全面应用

让智慧城市更进一步，无人机解决方案全面应用

在城市规划中&#xff0c;无人机正在颠覆传统的操作和思维方式。这种技术不仅改变了城市管理获取和分析信息的方式&#xff0c;还提供了前所未有的视角&#xff0c;使城市管理能够更加明智地制定策略。 1. 数据采集的新纪元&#xff1a; 城市规划的核心在于数据的收集和分析。…
阅读更多...
matlab面向对象

matlab面向对象

一、面向对象编程 1.1 面向过程与面向对象 区别&#xff1a; 面向过程的核心是一系列函数&#xff0c;执行过程是依次使用每个函数面向对象的核心是对象&#xff08;类&#xff09;及其属性、方法&#xff0c;每个对象根据需求执行自己的方法以解决问题 对象&#xff1a;单个…
阅读更多...
数组和指针练习（3）

数组和指针练习（3）

题目&#xff1a; int main() { int a[5][5]; int(*p)[4]; p a; printf( "%p,%d\n", &p[4][2] - &a[4][2], &p[4][2] - &a[4][2]); return 0; } 思路分析&#xff1a; int(*p)[4]; 定义了指针变量p是一个数组指针&#xff0c;且该数组指…
阅读更多...
ONLYOFFICE 文档如何与 Alfresco 进行集成

ONLYOFFICE 文档如何与 Alfresco 进行集成

ONLYOFFICE 文档是一款开源办公套件&#xff0c;其是包含文本文档、电子表格、演示文稿、数字表单、PDF 查看器和转换工具的协作性编辑工具。要在 Alfresco 中使用 ONLYOFFICE 协作功能&#xff0c;可以将他们连接集成。阅读本文&#xff0c;了解这如何实现。 关于 ONLYOFFICE…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023