程序员经验分享-hwhale

Nodejs快速搭建简单的HTTP服务器，并发布公网远程访问

2023-05-16

文章目录

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

转载自内网穿透工具的文章：使用Nodejs搭建HTTP服务，并实现公网远程访问「内网穿透」

前言

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来进行内网穿透，支持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 ，也不用设置路由器。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Nodejs快速搭建简单的HTTP服务器，并发布公网远程访问 的相关文章

  • 关于电子与电气自动化芯片侧的一些基础理解

    EEE Electrical and Electronics Engineering 电子与电气自动化工程 人类科技母行业 涉及的主要领域 xff1a 半导体元器件 芯片 xff0c 模组 PCBA xff0c 嵌入式系统 xff08 驱动

  • BA(后端)优化与卡尔曼滤波的一些区别

    今天这篇文章会写得深入一些 xff0c 主要知识来自于业内多位大佬的实际落地与自身的思考 主要涉及机器人状态估计与机器视觉 xff0c 多传感器结合时 xff0c BA优化与卡尔曼滤波的差异及如何选择 机器人状态估计中 xff0c 大家应该

  • 关于VIO零速更新(ZUPT)与控制三种约束的工程实践

    今天这篇是深度稍微高一些的 xff0c 尽量写细 xff0c 但是具体实践各家都有不同的方式与工程习惯 xff0c 就不多赘述了 小组工作比较忙 xff0c 代码还没来得及整理 xff0c 总体更新一下基础知识 VIO系统后端核心的三种约束

  • 关于DSO直接法与IMU预积分联合VIO/SLAM一些思路

    本文不适合初学者 xff1b 干货多没写具体方法 xff0c 目前还在数论分解和思考中 xff0c 估计得2个月后完成 必要性 xff1a 1 常规VIO系统如VINS MONO建立的地图质量太差 xff0c 稀疏且不便认知 2 假设并入D

  • 主流VIO/VSLAM系统改造与工程化落地

    今天主要写针对主流VIO和VSLAM如VINS MONO和DSO的工程改造思路 肯定是有相当价值的 xff0c 总体写得比较简单 xff0c 需要具备软件 硬件 算法等各方面综合能力才能掌握主要路径 xff0c 具体实现方面以后由其他同事来

  • VIO与全局快门及轮速计的一些应用小技巧

    封面就用一个可爱的小车车 之前各种针对VIO xff0c VSLAM和VINS的工程注意事项都讲过了 今天的内容主要是针对VSLAM xff0c VIO的实用性 比如Td xff0c 同步对时 xff0c 内参 xff0c 外参这一串 最近

  • 关于机器人状态估计(12)-VIO/VSLAM的稀疏与稠密

    VIO三相性与世界观室内ALL IN ONE 首先以此链接先对近期工作的视频做个正经的引流 xff0c 完成得这么好的效果 xff0c 仅仅是因为知乎限流1分钟以内的视频 xff0c 导致整个浏览量不到300 xff0c 让人非常不爽 这套

  • 关于机器人状态估计(13)-线性代数有多重要？18.06总结

    太久没更新主要是在忙开发和测试 xff0c 这几个月被很多同学提问 xff0c 同时接触了一些实习生 普遍发现动手能力不错 xff0c 数学基础却差异很大 从我身边电子 xff0c CV或者SLAM做得比较杰出的朋友来看 xff0c 大家普

  • postman的安装与使用

    目录 第一部分 xff1a 基础篇postman1 安装postman进入postman官网 如果是mac系统可以直接点击mac app安装 第二部分 xff1a 进阶篇1 使用自带的脚本对接口进行测试 第一部分 xff1a 基础篇 pos

  • DMA案例 外设到内存搬运

    DMA案例 外设到内存搬运 需求 使用DMA的方式将串口接收缓存寄存器的值搬运到内存中 xff0c 同时闪烁LED1 CubeMX配置 串口配置 DMA配置 串口中断配置 用到的库函数 HAL UART ENABLE span class

  • 用rs_lidar雷达跑lio_sam

    1 准备工作 imu绑定串口有线连接雷达并能用rviz显示雷达点云用两个imu标定包标定imu在完成第二步必要的工作后 xff0c 配置LIO SAM config 下的params yaml参数 xff0c 更改之前建议备份在旁边复制粘贴

  • ubuntu18.04安装ros及解决rosdep update失败问题

    1 安装ros 转自 https blog csdn net qq 44830040 article details 106049992 ops request misc 61 257B 2522request 255Fid 2522 25

  • 球机是枪机和云台机的结合体

    1 枪机是监控类CCD摄像机中一种 枪机外观长方体 xff0c 前面是C CS镜头接口 xff0c 枪机不包含镜头 所谓的枪机主要从外型 镜头安装接口上区分 2 监控类摄像机主要有 xff1a 枪机 小半球 大半球 一体机 球机几个类别 枪

  • ROS学习笔记-1

    一 ROS简介 ROS全称Robot Operating System 机器人操作系统 ROS是适用于机器人的开源元操作系统 ROS集成了大量的工具 xff0c 库 xff0c 协议 xff0c 提供类似OS所提供的功能 xff0c 简化对

  • C语言指针详解（1）

    指针详解 之前我说过一篇关于指针在C语言中的基本使用 xff0c 这次我再来细讲一下指针的其他内容 目录 一 指针详解 1 指针定义 2 指针类型 3 野指针 4 如何规避野指针 xff1f 1 指针定义 指针理解的2个要点 xff1a 1

  • C语言结构体详解 (2) 结构体内存对齐,默认对齐数

    前言 上次 xff0c 我讲到了关于结构体的基本使用 xff0c 大家若感兴趣的话看一看我之前写的一篇结构体博客 xff0c 里面记载了我对于结构体的创建 初始化 嵌套结构体 结构体的访问访问方式和结构体传参方式等知识的见解 xff0c C

  • C语言——十进制转换十六进制

    请编写程序 xff0c 输入十进制数 xff0c 输出对应的十六进制数 输入格式 十进制非负整数 输出格式 对应的十六进制非负整数 要求 xff1a 十六进制数中的字母均为大写形式 输入样哩 5050 输出样例 13BA 代码输入 xff1

  • 如何编写头文件及使用Makefile

    头文件中应该写什么 xff1a 头文件可能会被任意源文件包含 xff0c 意味着头文件中的内容可能会在多个目标文件中存在 xff0c 要保证合并时不要冲突 重点 xff1a 头文件只编写声明语句 xff0c 不能有定义语句 全局变量声明 函

  • 剖析Linux内存中的/proc/meminfo参数

    PROC MEMINFO之谜 proc meminfo是了解Linux系统内存使用状况的主要接口 xff0c 我们最常用的 free vmstat 等命令就是通过它获取数据的 xff0c proc meminfo所包含的信息比 free 等

  • 看完秒懂：Linux DMA mapping机制分析

    说明 xff1a Kernel版本 xff1a 4 14ARM64处理器 xff0c Contex A53 xff0c 双核使用工具 xff1a Source Insight 3 5 xff0c Visio 1 概述 DMA xff08 D

随机推荐

  • linux网络编程-多进程实现TCP并发服务器

    服务端流程步骤 socket函数创建监听套接字lfd bind函数将监听套接字绑定ip和端口 listen函数设置服务器为被动监听状态 xff0c 同时创建一条未完成连接队列 xff08 没走完tcp三次握手流程的连接 xff09 xff0

  • Linux内核中断下半部工作队列（work queue）

    工作队列work queue 工作队列 xff08 work queue xff09 是中断下半部的一种实现机制 xff0c 主要用于耗时任务处理 xff0c 由内核线程代表进程执行 工作队列运行于进程上下文 xff0c 因此允许阻塞 运行

  • 手把手带你部署Ceph集群

    前言 xff1a Ceph作为开源的分布式文件系统 xff0c 可以轻松地将存储容量扩展到PB以上并拥有不错的性能 Ceph提供对象存储 块存储和文件系统三种存储方式 xff0c 如果不想花时间安装ceph xff0c 可以通过ceph d

  • Linux 内核安全增强—— stack canary

    一 背景知识 aarch64的函数栈 1 栈生长方向与push pop操作 栈是一种运算受限的线性表 入栈的一端为栈顶 xff0c 另一端则为栈底 其生长方向和操作顺序理论上没有限定 而在aarch64平台上 栈是向低地址方向增长的 STA

  • Linux下Makefile的简单编写与使用

    Makefile 一个工程文件中的源文件可能有很多 xff0c 并且不同的功能 模块等都放在不同的目录中 xff0c 常规的编译已经不能高效化的处理这样的问题 xff0c 而Makefile就是为解决这一问题而来 Makefile一旦写好

  • STM32 USART 串口DMA收发注意事项

    正常情况这里不介绍 目录 1 低波特率情况 xff0c 接收信号可能会出现干扰 2 波特率300时 xff0c DMA接收无法工作 3 波特率1200时DMA发送 4 具体现象如下 环境 xff1a 主频72M STM32F103C8 注意

  • STM32学习笔记———几种简单传感器的数据读取

    引言 传感器正如计算机的眼睛 从广义上讲 xff0c 传感器就是一种能感知外界信息 xff0c 并将这些信息按照一定规律转换成可用的电信号或其他形式的输出信号的装置 xff0c 达到对信息的存储 xff0c 传输 xff0c 控制的目的 本

  • 基于STM32F103C8T6的USART1串口的中断接收

    一 串口介绍 二 项目所需硬件 1 USB转串口模块 三 项目代码 一 串口介绍 USART Universal Synchronous Asynchronous Receiver Transmitter 通用同步 异步串行接收 发送器 U

  • 第5讲—寄存器编程

    编程方式两种 xff0c 一种是寄存器编程 xff0c 一种是函数库编程 什么是寄存器 stm32芯片 61 ARM内核生产Cortex内核 43 st公司 xff08 在内核基础上 xff09 开发stm32 寄存器是用来地址操作的 寄存

  • C语言运行HTTP代码示例

    include lt iostream gt include lt algorithm gt include lt cstring gt include 34 curl curl h 34 usingnamespace std static

  • 在Linux上实现HTTP请求

    在Linux上实现HTTP请求是一种非常有用的技能 xff0c 有时候我们需要从Web服务器获取数据 xff0c 而不是使用浏览器发起网络调用 HTTP是一种常用的网络协议 xff0c 可以用于在Linux上实现HTTP请求 要在Linux

  • Linux下设置堆栈系统参数

    Linux系统下有几个与堆栈相关的系统参数 xff1a 1 ulimit s xff1a 此参数用于限制进程的堆栈大小 可以使用该命令来查看和更改进程的堆栈大小限制 2 proc sys kernel stack protect xff1a

  • Leetcode每日一题——“消失的数字”

    各位CSDN的uu们你们好呀 xff0c 今天 xff0c 小雅兰又开新专栏了 xff0c 以后会在Leetcode上面进行刷题 xff0c 尽量每天写一道 xff0c 请大家监督我 xff01 xff01 xff01 好啦 xff0c 让

  • Leetcode每日一题——“轮转数组”

    各位CSDN的uu们你们好呀 xff0c 今天 xff0c 小雅兰的内容是轮转数组 xff0c 下面 xff0c 让我们进入轮转数组的世界吧 小雅兰之前其实就已经写过了字符串旋转的问题了 xff1a C语言刷题 xff08 7 xff09

  • Python一行命令搭建HTTP服务器并外网访问【内网穿透】

    文章目录 1 前言2 本地http服务器搭建2 1 Python的安装和设置2 2 Python服务器设置和测试 3 cpolar的安装和注册3 1 Cpolar云端设置3 2 Cpolar本地设置 4 公网访问测试5 结语 转载自远程内网

  • 顺序表（更新版）——“数据结构与算法”

    各位CSDN的uu们你们好呀 xff0c 今天小雅兰又来更新新专栏啦 xff0c 其实之前我就已经写过了顺序表的内容 xff0c 只是之前的内容不是最新版的顺序表 xff0c 现在 xff0c 我来更新一下最新版的顺序表 xff0c 下面

  • Leetcode每日一题——“移除元素”

    各位CSDN的uu们你们好呀 xff0c 小雅兰又来啦 xff0c 今天 xff0c 小雅兰的内容是移除元素 xff0c 下面 xff0c 让我们进入Leetcode的世界吧 说明 为什么返回数值是整数 xff0c 但输出的答案是数组呢 请

  • Leetcode每日一题——“回文数”

    各位CSDN的uu们 xff0c 你们好呀 xff0c 今天小雅兰又来刷力扣啦 xff0c 今天的题目是回文数 xff0c 下面 xff0c 让我们进入回文数的世界吧 示例 1 xff1a 输入 xff1a x 61 121 输出 xff1

  • 【社区图书馆】《新程序员005：开源深度指南 & 新金融背后的科技力量》

    各位CSDN的uu们你们好呀 xff0c 今天 xff0c 小雅兰来给大家推荐一本书 xff0c 此书的书名为新程序员005 xff1a 开源深度指南 amp 新金融背后的科技力量 xff0c 为什么小雅兰今天要给大家推荐这样一本书呢 xf

  • Nodejs快速搭建简单的HTTP服务器，并发布公网远程访问

    文章目录 前言1 安装Node js环境2 创建node js服务3 访问node js 服务4 内网穿透4 1 安装配置cpolar内网穿透4 2 创建隧道映射本地端口 5 固定公网地址 转载自内网穿透工具的文章 xff1a 使用Node

热门标签